Home Explore Help
Sign In
kingdee_large_screen
/
pc_kingdee_large_screen
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

焦煤第四个图

zhbyyy 1 year ago
parent
ab14a481d4
commit
c55ae37ac0
9 changed files with 1473 additions and 453 deletions
Unified View Show Diff Stats
  1. 2 2
      cokingCoal/cokingCoalC.html
  2. 151 0
      cokingCoal/cokingCoalD.html
  3. BIN
      cokingCoal/images/center2-back.gif
  4. 0 0
      cokingCoal/images/title.png
  5. 0 451
      cokingCoal/js/cokingCoalA.js
  6. 156 0
      cokingCoal/js/cokingCoalC.js
  7. 531 0
      cokingCoal/js/cokingCoalD.js
  8. 0 0
      cokingCoal/styles/cokingCoalC.css
  9. 633 0
      cokingCoal/styles/cokingCoalD.css

+ 2 - 2
cokingCoal/cokingCoalA.html → cokingCoal/cokingCoalC.html
View File 

@@ -7,7 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <!-- 引入样式 -->
 
   <!-- 引入样式 -->
 
   <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
   <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
-  <link rel="stylesheet" href="./styles/cokingCoalA.css" />
 
+  <link rel="stylesheet" href="./styles/cokingCoalC.css" />
 
   <!-- 引入js -->
 
   <!-- 引入js -->
 
   <script src="./libs/vue@2.7.10.js"></script>
 
   <script src="./libs/vue@2.7.10.js"></script>
 
   <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script>
 
   <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script>
 
@@ -191,7 +191,7 @@
 
       </div>
 
       </div>
 
     </dv-full-screen-container>
 
     </dv-full-screen-container>
 
   </div>
 
   </div>
 
-  <script src="./js/cokingCoalA.js"></script>
 
+  <script src="./js/cokingCoalC.js"></script>
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 151 - 0
cokingCoal/cokingCoalD.html
View File 

@@ -0,0 +1,151 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <!-- 引入样式 -->
 
+  <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
+  <link rel="stylesheet" href="./styles/cokingCoalD.css" />
 
+  <!-- 引入js -->
 
+  <script src="./libs/vue@2.7.10.js"></script>
 
+  <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script>
 
+  <script src="./libs/echarts.min.js"></script>
 
+  <script src="./libs/element-ui@2.15.9.js"></script>
 
+  <script src="./libs/axios.min.js"></script>
 
+  <script src="./js/request.js"></script>
 
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <dv-full-screen-container>
 
+      <header class="my-header"><span>焦煤集团驾驶舱数字看板</span></header>
 
+      <div class="main">
 
+        <dv-border-box-8 class="center-item relative">
 
+          <div class="center-title mx-auto flex flex-col justify-center">
 
+            <div class="flex items-center items-center">
 
+              <img src="./images/arrow.png" alt="" class="arrow">
 
+              <span>工资总额均衡预算使用情况</span>
 
+            </div>
 
+            <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+          </div>
 
+          <div class="center1-footer flex justify-center items-center  mx-auto">
 
+            <div id="budget" style="width: 100%; height: 100%;"></div>
 
+          </div>
 
+          <div class="top-title1 absolute">集团公司均衡预算使用<span
 
+              style="color: #69C0FF;font-weight: bold;margin: 0 10px;">56%</span></div>
 
+        </dv-border-box-8>
 
+        <dv-border-box-8 class="center-item">
 
+          <div class="center-title mx-auto flex flex-col justify-center">
 
+            <div class="flex items-center items-center">
 
+              <img src="./images/arrow.png" alt="" class="arrow">
 
+              <span>月度平均工资</span>
 
+            </div>
 
+            <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+          </div>
 
+          <div class="center1-footer flex justify-center items-center  mx-auto">
 
+            <div id="salary" style="width: 100%; height: 100%;"></div>
 
+          </div>
 
+          <div class="top-title1 absolute">集团公司月度平均工资<span style="color: #B889EA;font-weight: bold;margin: 0 10px;">4680
 
+              元</span></div>
 
+        </dv-border-box-8> <dv-border-box-8 class="center-item">
 
+          <div class="center-title mx-auto flex flex-col justify-center">
 
+            <div class="flex items-center items-center">
 
+              <img src="./images/arrow.png" alt="" class="arrow">
 
+              <span>月度平均工资涨幅</span>
 
+            </div>
 
+            <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+          </div>
 
+          <div class="center1-footer flex justify-center items-end  mx-auto">
 
+            <dv-scroll-board :config="config5" style="width: 100%; height: 80%" />
 
+          </div>
 
+          <div class="top-title1 absolute">集团公司增幅<span
 
+              style="color: #45DAD1;font-weight: bold;margin: 0 10px;">63%</span></div>
 
+        </dv-border-box-8> <dv-border-box-8 class="center-item">
 
+          <div class="center-title mx-auto flex flex-col justify-center " style="margin-bottom: 0 !important;">
 
+            <div class="flex items-center">
 
+              <img src="./images/arrow.png" alt="" class="arrow">
 
+              <span>全员劳动生产率</span>
 
+            </div>
 
+            <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+          </div>
 
+          <div class="center1-footer flex justify-center items-center  mx-auto" style="height: 80%;">
 
+            <ul class="list flex flex-col justify-between">
 
+              <li class="list-item ">
 
+                <div class="serial shrink-0">1</div>
 
+                <div class="flex items-center justify-between">
 
+                  <span style="color: #417FAE;width: 200px;">集团公司<span
 
+                      style="margin-left: 10px;color: #fff;">完成：1000万元/人</span></span>
 
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
 
+                </div>
 
+              </li>
 
+              <li class="list-item">
 
+                <div class="serial shrink-0">2</div>
 
+                <div class="flex items-center justify-between">
 
+                  <span style="color: #417FAE;width: 200px;">山焦西山<span
 
+                      style="margin-left: 10px;color: #fff;">完成：980万元/人</span></span>
 
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
 
+                </div>
 
+              </li>
 
+              <li class="list-item">
 
+                <div class="serial shrink-0">3</div>
 
+                <div class="flex items-center justify-between">
 
+                  <span style="color: #417FAE;width: 200px;">山焦汾西<span
 
+                      style="margin-left: 10px;color: #fff;">完成：1000万元/人</span></span>
 
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
 
+                </div>
 
+              </li>
 
+              <li class="list-item">
 
+                <div class="serial shrink-0">4</div>
 
+                <div class="flex items-center justify-between">
 
+                  <span style="color: #417FAE;width: 200px;">山焦霍州<span
 
+                      style="margin-left: 10px;color: #fff;">完成：1000万元/人</span></span>
 
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
 
+                </div>
 
+              </li>
 
+              <li class="list-item">
 
+                <div class="serial shrink-0">5</div>
 
+                <div class="flex items-center justify-between">
 
+                  <span style="color: #417FAE;width: 200px;">山焦山煤<span
 
+                      style="margin-left: 10px;color: #fff;">完成：1000万元/人</span></span>
 
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
 
+                </div>
 
+              </li>
 
+            </ul>
 
+          </div>
 
+        </dv-border-box-8> <dv-border-box-8 class="center-item">
 
+          <div class="center-title mx-auto flex flex-col justify-center">
 
+            <div class="flex items-center items-center">
 
+              <img src="./images/arrow.png" alt="" class="arrow">
 
+              <span>原煤生产人员效率</span>
 
+            </div>
 
+            <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+          </div>
 
+          <div class="aiQuality dis-flex flex-dir-column ">
 
+            <div id="aiQuality1" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+          </div>
 
+        </dv-border-box-8> <dv-border-box-8 class="center-item">
 
+          <div class="center-title mx-auto flex flex-col justify-center">
 
+            <div class="flex items-center items-center">
 
+              <img src="./images/arrow.png" alt="" class="arrow">
 
+              <span>原煤在岗人员效率</span>
 
+            </div>
 
+            <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+          </div>
 
+          <div class="aiQuality dis-flex flex-dir-column ">
 
+            <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+          </div>
 
+        </dv-border-box-8>
 
+      </div>
 
+      <div class="footer justify-center">
 
+        <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
 
+      </div>
 
+    </dv-full-screen-container>
 
+
 
+  </div>
 
+  <script src="./js/cokingCoalD.js"></script>
 
+</body>
 
+
 
+</html>

BIN
cokingCoal/images/center2-back.gif
View File


+ 0 - 0
cokingCoal/images/出池人数.png → cokingCoal/images/title.png
View File


+ 0 - 451
cokingCoal/js/cokingCoalA.js
View File 

@@ -1,451 +0,0 @@
 
-let app = new Vue({
 
-  el: '#app',
 
-  data () {
 
-    return {
 
-      year: '2022',
 
-      storageRecordConfig: {
 
-        header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
 
-        headerBGC: '#05507b33',
 
-        oddRowBGC: '#69c0ff0f',
 
-        evenRowBGC: '',
 
-        headerHeight: '40',
 
-        rowNum: 4,
 
-        align: ['center'],
 
-        data: [
 
-          ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-        ],
 
-      },
 
-      storageRecordConfig2: {
 
-        header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
 
-        headerBGC: '#05507b33',
 
-        oddRowBGC: '#05507b33',
 
-        evenRowBGC: '',
 
-        headerHeight: '40',
 
-        rowNum: 4,
 
-        align: ['center'],
 
-        data: [
 
-          ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-        ],
 
-      },
 
-      companyList: [
 
-        { name: '核心人力-1' },
 
-        { name: '核心人力-2' },
 
-        { name: '内部人才市场' },
 
-        { name: '薪酬福利' },
 
-        { name: '培训' }
 
-      ],
 
-    }
 
-  },
 
-  mounted () {
 
-    // 左侧图表
 
-    // this.initChartL1()
 
-    // this.initChartL2()
 
-    // this.initChartR1()
 
-    setTimeout(() => {
 
-      this.aiQualityECharts();
 
-    });
 
-  },
 
-  methods: {
 
-    aiQualityECharts () {
 
-      let chart = echarts.init(document.getElementById("aiQuality"));
 
-      let option = {
 
-        grid: {
 
-          top: 35,
 
-          right: 40,
 
-          left: 60,
 
-          bottom: 20,
 
-        },
 
-        tooltip: {
 
-          show: true,
 
-          trigger: "axis",
 
-          axisPointer: {
 
-            // 坐标轴指示器，坐标轴触发有效
 
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 
-          },
 
-        },
 
-        xAxis: {
 
-          data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"],
 
-          axisTick: {
 
-            show: false,
 
-          },
 
-          // x轴的字体颜色
 
-          axisLabel: {
 
-            textStyle: {
 
-              color: "white",
 
-            },
 
-          },
 
-          //y轴线的颜色以及宽度
 
-          axisLine: {
 
-            show: true,
 
-            lineStyle: {
 
-              color: "#1E5389",
 
-              width: 1,
 
-              type: "solid",
 
-            },
 
-          },
 
-        },
 
-        yAxis: {
 
-          axisTick: {
 
-            lineStyle: {
 
-              color: "#18416F",
 
-            },
 
-          },
 
-          // y轴的字体颜色
 
-          axisLabel: {
 
-            textStyle: {
 
-              color: "white",
 
-            },
 
-          },
 
-          splitLine: {
 
-            show: true,
 
-            lineStyle: {
 
-              color: "#204561",
 
-              width: 1,
 
-              type: "dotted",
 
-            },
 
-          },
 
-          //y轴线的颜色以及宽度
 
-          axisLine: {
 
-            show: true,
 
-            lineStyle: {
 
-              color: "#1E5389",
 
-              width: 1,
 
-              type: "solid",
 
-            },
 
-          },
 
-        },
 
-        series: [
 
-          {
 
-            name: "入池人数",
 
-            type: "bar",
 
-            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
 
-            showBackground: true,
 
-            backgroundStyle: {
 
-              color: "#18416F",
 
-            },
 
-            barWidth: "10%",
 
-            itemStyle: {
 
-              barBorderRadius: [10, 10, 0, 0],
 
-              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
-                {
 
-                  offset: 0,
 
-                  color: "#00F4FD",
 
-                }, //柱图渐变色
 
-                {
 
-                  offset: 1,
 
-                  color: "#061C4F",
 
-                },
 
-              ]),
 
-            },
 
-          },
 
-          {
 
-            name: "出池人数",
 
-            type: "bar",
 
-            data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725],
 
-            showBackground: true,
 
-            backgroundStyle: {
 
-              color: "#18416F",
 
-            },
 
-            barWidth: "10%",
 
-            itemStyle: {
 
-              barBorderRadius: [10, 10, 0, 0],
 
-              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
-                {
 
-                  offset: 0,
 
-                  color: "#F55002",
 
-                }, //柱图渐变色
 
-                {
 
-                  offset: 1,
 
-                  color: "#0B0243",
 
-                },
 
-              ]),
 
-            },
 
-          },
 
-        ],
 
-        legend: {
 
-          data: ["入池人数", "出池人数"],
 
-          textStyle: {
 
-            // 图列内容样式
 
-            color: "#fff", // 字体颜色
 
-            // fontSize: "10",
 
-          },
 
-          right: 30,
 
-          icon: "roundRect",
 
-          // 小图标的宽高
 
-          itemHeight: 5,
 
-        },
 
-      };
 
-      chart.setOption(option);
 
-      tools.loopShowTooltip(chart, option, {
 
-        nterval: 2000,
 
-        loopSeries: true,
 
-      });
 
-    },
 
-    initChartL1 () {
 
-      let myChart = echarts.init(this.$refs['echartL1'])
 
-      let option = {
 
-        grid: {
 
-          left: '10%',
 
-          top: '18%',
 
-          bottom: '12%',
 
-          right: '8%',
 
-        },
 
-        tooltip: {
 
-          trigger: 'axis',
 
-          axisPointer: {
 
-            type: 'shadow',
 
-          },
 
-        },
 
-        xAxis: {
 
-          data: ['2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
 
-          axisLine: {
 
-            show: true, //隐藏X轴轴线
 
-            lineStyle: {
 
-              color: '#3D7495',
 
-              width: 1,
 
-            },
 
-          },
 
-          axisTick: {
 
-            show: false, //隐藏X轴刻度
 
-          },
 
-          axisLabel: {
 
-            show: true,
 
-            textStyle: {
 
-              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
 
-            },
 
-          },
 
-        },
 
-        yAxis: [
 
-          {
 
-            type: 'value',
 
-            name: '亿元',
 
-            nameTextStyle: {
 
-              color: '#FFF',
 
-            },
 
-            splitLine: {
 
-              show: true,
 
-              lineStyle: {
 
-                color: '#68b4dd66',
 
-                type: 'dashed',
 
-              },
 
-            },
 
-            axisLine: {
 
-              show: true,
 
-              lineStyle: {
 
-                color: '#3D7495'
 
-              }
 
-            },
 
-            axisLabel: {
 
-              show: true,
 
-              textStyle: {
 
-                color: 'rgba(250,250,250,0.6)',
 
-              },
 
-            },
 
-          }
 
-        ],
 
-        series: [
 
-          {
 
-            type: 'pictorialBar',
 
-            barCategoryGap: '0%',
 
-            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
 
-            label: {
 
-              show: true,
 
-              position: 'top',
 
-              distance: 5,
 
-              color: '#08DFFE',
 
-              fontSize: 12,
 
-            },
 
-            itemStyle: {
 
-              normal: {
 
-                color: {
 
-                  type: 'linear',
 
-                  x: 0,
 
-                  y: 0,
 
-                  x2: 0,
 
-                  y2: 1,
 
-                  colorStops: [
 
-                    {
 
-                      offset: 0,
 
-                      color: '#9A11FF',
 
-                    },
 
-                    {
 
-                      offset: 1,
 
-                      color: '#08DFFE',
 
-                    },
 
-                  ],
 
-                  global: false, //  缺省为  false
 
-                },
 
-              },
 
-              emphasis: {
 
-                opacity: 1,
 
-              },
 
-            },
 
-            data: [123, 60, 25, 18, 12, 9],
 
-          },
 
-        ],
 
-      }
 
-
 
-      myChart.setOption(option)
 
-    },
 
-    initChartL2 () {
 
-      let myChart = echarts.init(this.$refs['echartL2'])
 
-      let option = {
 
-        tooltip: {
 
-          trigger: 'axis',
 
-          axisPointer: {
 
-            type: 'shadow',
 
-          },
 
-        },
 
-        grid: {
 
-          top: '16%',
 
-          right: '3%',
 
-          left: '10%',
 
-          bottom: '10%',
 
-        },
 
-        legend: {
 
-          top: '1',
 
-          right: '10',
 
-          textStyle: {
 
-            color: 'rgba(250,250,250,0.6)',
 
-          },
 
-        },
 
-        xAxis: {
 
-          data: ['山西焦煤', '山西文旅', '潞安化工', '晋能控股', '山西建投'],
 
-          axisLine: {
 
-            show: true, //隐藏X轴轴线
 
-            lineStyle: {
 
-              color: '#005094',
 
-              width: 1,
 
-            },
 
-          },
 
-          axisTick: {
 
-            show: false, //隐藏X轴刻度
 
-          },
 
-          axisLabel: {
 
-            show: true,
 
-            textStyle: {
 
-              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
 
-            },
 
-          },
 
-        },
 
-        yAxis: [
 
-          {
 
-            type: 'value',
 
-            nameTextStyle: {
 
-              color: '#ebf8ac',
 
-            },
 
-            splitLine: {
 
-              show: true,
 
-              lineStyle: {
 
-                color: '#68b4dd66',
 
-                type: 'dashed',
 
-              },
 
-            },
 
-            axisLine: {
 
-              show: true,
 
-              lineStyle: {
 
-                color: '#3D7495'
 
-              }
 
-            },
 
-            axisLabel: {
 
-              show: true,
 
-              textStyle: {
 
-                color: 'rgba(250,250,250,0.6)',
 
-              },
 
-            },
 
-          },
 
-        ],
 
-        series: [
 
-          {
 
-            name: '计划投资',
 
-            type: 'bar',
 
-            barWidth: 15,
 
-            itemStyle: {
 
-              normal: {
 
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
-                  {
 
-                    offset: 0,
 
-                    color: '#69c0ff',
 
-                  },
 
-                  {
 
-                    offset: 1,
 
-                    color: '#082550',
 
-                  },
 
-                ]),
 
-              },
 
-            },
 
-            data: [900, 600, 500, 450, 500],
 
-          },
 
-          {
 
-            name: '实际投资',
 
-            type: 'bar',
 
-            barWidth: 15,
 
-            itemStyle: {
 
-              normal: {
 
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
-                  {
 
-                    offset: 0,
 
-                    color: '#957DFF',
 
-                  },
 
-                  {
 
-                    offset: 1,
 
-                    color: '#082550',
 
-                  },
 
-                ]),
 
-              },
 
-            },
 
-            data: [500, 900, 600, 800, 450],
 
-          },
 
-        ],
 
-      }
 
-      myChart.setOption(option)
 
-    },
 
-    initChartR1 () {
 
-      let myChart = echarts.init(this.$refs['echartR1'])
 
-      let option = {
 
-        tooltip: {
 
-          trigger: 'item'
 
-        },
 
-        legend: {
 
-          top: 'center',
 
-          orient: 'vertical',
 
-          right: '2%',
 
-          textStyle: {
 
-            color: '#9DB9EB'
 
-          }
 
-        },
 
-        series: [
 
-          {
 
-            name: '',
 
-            type: 'pie',
 
-            radius: ['55%', '80%'],
 
-            labelLine: {
 
-              normal: {
 
-                lineStyle: {
 
-                  width: 1
 
-                }
 
-              }
 
-            },
 
-            data: [
 
-              { value: 1048, name: '煤炭' },
 
-              { value: 735, name: '火电' },
 
-              { value: 580, name: '焦化' },
 
-              { value: 484, name: '风电' },
 
-            ]
 
-          }
 
-        ]
 
-      }
 
-      myChart.setOption(option)
 
-    },
 
-  },
 
-})

+ 156 - 0
cokingCoal/js/cokingCoalC.js
View File 

@@ -0,0 +1,156 @@
 
+let app = new Vue({
 
+  el: '#app',
 
+  data () {
 
+    return {
 
+      companyList: [
 
+        { name: '核心人力-1' },
 
+        { name: '核心人力-2' },
 
+        { name: '内部人才市场' },
 
+        { name: '薪酬福利' },
 
+        { name: '培训' }
 
+      ],
 
+    }
 
+  },
 
+  mounted () {
 
+    setTimeout(() => {
 
+      this.aiQualityECharts();
 
+    });
 
+  },
 
+  methods: {
 
+    aiQualityECharts () {
 
+      let chart = echarts.init(document.getElementById("aiQuality"));
 
+      let option = {
 
+        grid: {
 
+          top: 35,
 
+          right: 40,
 
+          left: 60,
 
+          bottom: 20,
 
+        },
 
+        tooltip: {
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            // 坐标轴指示器，坐标轴触发有效
 
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"],
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          // x轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "入池人数",
 
+            type: "bar",
 
+            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
 
+            showBackground: true,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#00F4FD",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#061C4F",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+          {
 
+            name: "出池人数",
 
+            type: "bar",
 
+            data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725],
 
+            showBackground: true,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#F55002",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#0B0243",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+        ],
 
+        legend: {
 
+          data: ["入池人数", "出池人数"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    }
 
+  },
 
+})

+ 531 - 0
cokingCoal/js/cokingCoalD.js
View File 

@@ -0,0 +1,531 @@
 
+let app = new Vue({
 
+  el: '#app',
 
+  data () {
 
+    return {
 
+      companyList: [
 
+        { name: '核心人力-1' },
 
+        { name: '核心人力-2' },
 
+        { name: '内部人才市场' },
 
+        { name: '薪酬福利' },
 
+        { name: '培训' }
 
+      ],
 
+      config5: {
 
+        header: ["单位名称", "平均工资涨幅"],
 
+        data: [
 
+          ["山焦财务", "-1%"],
 
+          ["山焦担保", "4%"],
 
+          ["山焦股份", "6%"],
 
+          ["山焦国华", "-20%"],
 
+          ["山焦国华", "9%"],
 
+          ["山焦财务", "-1%"],
 
+          ["山焦担保", "4%"],
 
+          ["山焦股份", "6%"],
 
+          ["山焦国华", "-20%"],
 
+          ["山焦国华", "9%"]
 
+        ],
 
+        align: ["center", "center", "center", "center"],
 
+        headerBGC: "#153A62",
 
+        oddRowBGC: "#061F42",
 
+        evenRowBGC: "#0C284A",
 
+      },
 
+    }
 
+  },
 
+  mounted () {
 
+    setTimeout(() => {
 
+      this.budgetECharts();
 
+      this.salaryECharts();
 
+      this.aiQualityECharts1();
 
+      this.aiQualityECharts2();
 
+    })
 
+  },
 
+  methods: {
 
+    aiQualityECharts1 () {
 
+      let chart = echarts.init(document.getElementById("aiQuality1"));
 
+      let option = {
 
+        grid: {
 
+          top: 30,
 
+          right: 40,
 
+          left: 75,
 
+          bottom: 50,
 
+        },
 
+        tooltip: {
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            // 坐标轴指示器，坐标轴触发有效
 
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"],
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          // x轴的字体颜色
 
+          axisLabel: {
 
+            interval: 0,
 
+            rotate: 40,
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "",
 
+            type: "bar",
 
+            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
 
+            showBackground: true,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#13445D",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#45DAD1",
 
+                },
 
+              ]),
 
+            },
 
+          }
 
+        ],
 
+        legend: {
 
+          data: ["入池人数", "出池人数"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    },
 
+    aiQualityECharts2 () {
 
+      let chart = echarts.init(document.getElementById("aiQuality2"));
 
+      let option = {
 
+        grid: {
 
+          top: 30,
 
+          right: 40,
 
+          left: 75,
 
+          bottom: 50,
 
+        },
 
+        tooltip: {
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            // 坐标轴指示器，坐标轴触发有效
 
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"],
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          // x轴的字体颜色
 
+          axisLabel: {
 
+            interval: 0,
 
+            rotate: 40,
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "",
 
+            type: "bar",
 
+            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
 
+            showBackground: true,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#02355C",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#40A9FF",
 
+                },
 
+              ]),
 
+            },
 
+          }
 
+        ],
 
+        legend: {
 
+          data: ["入池人数", "出池人数"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    },
 
+    budgetECharts () {
 
+      let chart = echarts.init(document.getElementById("budget"));
 
+      let option = {
 
+        grid: {
 
+          top: 35,
 
+          right: 40,
 
+          left: 60,
 
+          bottom: 50,
 
+        },
 
+        tooltip: {
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            lineStyle: {
 
+              color: "#ddd",
 
+            },
 
+          },
 
+        },
 
+        legend: {
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+        xAxis: {
 
+          type: "category",
 
+          data: ["集团公司", "山焦西山", "山焦汾西", "山焦霍州", '山焦山煤', '山焦华晋', '山焦焦化', '山焦民爆'],
 
+          boundaryGap: false,
 
+          splitLine: {
 
+            show: false,
 
+            interval: "auto",
 
+          },
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          axisLine: {
 
+            lineStyle: {
 
+              color: "#7ECEF4",
 
+            },
 
+          },
 
+          axisLabel: {
 
+            interval: 0,
 
+            rotate: 40,
 
+            margin: 10,
 
+            textStyle: {
 
+              // fontSize: 10,
 
+              color: "#fff",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          type: "value",
 
+          splitLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          axisLine: {
 
+            lineStyle: {
 
+              color: "#7ECEF4",
 
+            },
 
+          },
 
+          axisLabel: {
 
+            margin: 10,
 
+            textStyle: {
 
+              fontSize: 10,
 
+              color: "#fff",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "",
 
+            type: "line",
 
+            smooth: false,
 
+            showSymbol: false,
 
+            symbol: "circle",
 
+            symbolSize: 6,
 
+            data: ["1100", "400", "608", "811", '358', '698', '125', '765'],
 
+            areaStyle: {
 
+              normal: {
 
+                color: new echarts.graphic.LinearGradient(
 
+                  0,
 
+                  0,
 
+                  0,
 
+                  1,
 
+                  [
 
+                    {
 
+                      offset: 0,
 
+                      color: "#40A9FF",
 
+                    },
 
+                    {
 
+                      offset: 1,
 
+                      color: "#051F41",
 
+                    },
 
+                  ],
 
+                  false
 
+                ),
 
+              },
 
+            },
 
+            itemStyle: {
 
+              normal: {
 
+                color: "#40A9FF",
 
+              },
 
+            },
 
+            lineStyle: {
 
+              normal: {
 
+                width: 2,
 
+              },
 
+            },
 
+          }
 
+        ],
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    },
 
+    salaryECharts () {
 
+      let chart = echarts.init(document.getElementById("salary"));
 
+      let option = {
 
+        grid: {
 
+          top: 35,
 
+          right: 40,
 
+          left: 60,
 
+          bottom: 50,
 
+        },
 
+        tooltip: {
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            lineStyle: {
 
+              color: "#ddd",
 
+            },
 
+          },
 
+        },
 
+        legend: {
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+        xAxis: {
 
+          type: "category",
 
+          data: ["集团公司", "山焦西山", "山焦汾西", "山焦霍州", '山焦山煤', '山焦华晋', '山焦焦化', '山焦民爆'],
 
+          boundaryGap: false,
 
+          splitLine: {
 
+            show: false,
 
+            interval: "auto",
 
+          },
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          axisLine: {
 
+            lineStyle: {
 
+              color: "#7ECEF4",
 
+            },
 
+          },
 
+          axisLabel: {
 
+            interval: 0,
 
+            rotate: 40,
 
+            margin: 10,
 
+            textStyle: {
 
+              // fontSize: 10,
 
+              color: "#fff",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          type: "value",
 
+          splitLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          axisLine: {
 
+            lineStyle: {
 
+              color: "#7ECEF4",
 
+            },
 
+          },
 
+          axisLabel: {
 
+            margin: 10,
 
+            textStyle: {
 
+              fontSize: 10,
 
+              color: "#fff",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "",
 
+            type: "line",
 
+            smooth: false,
 
+            showSymbol: false,
 
+            symbol: "circle",
 
+            symbolSize: 6,
 
+            data: ['8000', '5000', '3500', '9000', '6000', '18000', '7500', '4500'],
 
+            areaStyle: {
 
+              normal: {
 
+                color: new echarts.graphic.LinearGradient(
 
+                  0,
 
+                  0,
 
+                  0,
 
+                  1,
 
+                  [
 
+                    {
 
+                      offset: 0,
 
+                      color: "#45DAD1",
 
+                    },
 
+                    {
 
+                      offset: 1,
 
+                      color: "#051F41",
 
+                    },
 
+                  ],
 
+                  false
 
+                ),
 
+              },
 
+            },
 
+            itemStyle: {
 
+              normal: {
 
+                color: "#45DAD1",
 
+              },
 
+            },
 
+            lineStyle: {
 
+              normal: {
 
+                width: 2,
 
+              },
 
+            },
 
+          }
 
+        ],
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    },
 
+  },
 
+})

+ 0 - 0
cokingCoal/styles/cokingCoalA.css → cokingCoal/styles/cokingCoalC.css
View File


+ 633 - 0
cokingCoal/styles/cokingCoalD.css
View File 

@@ -0,0 +1,633 @@
 
+*,
 
+*:before,
 
+*:after {
 
+  padding: 0;
 
+  margin: 0;
 
+  box-sizing: border-box;
 
+}
 
+html,
 
+body {
 
+  height: 100%;
 
+  font-size: 14px;
 
+  background-color: #ecffff;
 
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
 
+    'Hiragino Sans GB', Arial, sans-serif;
 
+}
 
+
 
+.flex {
 
+  display: flex;
 
+}
 
+.flex1 {
 
+  flex: 1;
 
+}
 
+.flex2 {
 
+  flex: 2;
 
+}
 
+.flex-around {
 
+  display: flex;
 
+  justify-content: space-around;
 
+}
 
+.flex-between {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+.flex-end {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+}
 
+.flex-align-center {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.font12 {
 
+  font-size: 12px;
 
+}
 
+.main-color {
 
+  color: #0bf1ff;
 
+}
 
+.danger-color {
 
+  color: #f15450 !important;
 
+}
 
+.error-color {
 
+  color: #ffc704 !important;
 
+}
 
+.btm10 {
 
+  margin-bottom: 10px;
 
+}
 
+.btm20 {
 
+  margin-bottom: 20px;
 
+}
 
+a {
 
+  text-decoration: none;
 
+  cursor: pointer;
 
+}
 
+
 
+[v-cloak] {
 
+  display: none;
 
+}
 
+#app {
 
+  background: url('../images/top-back.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  padding-top: 10px;
 
+  height: 100vh;
 
+  overflow: hidden;
 
+  color: #fff;
 
+}
 
+.my-header {
 
+  height: 70px;
 
+  line-height: 70px;
 
+  background: url('../images/title-back.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  color: #0bf1ff;
 
+  text-align: center;
 
+  font-size: 25px;
 
+  font-weight: 600;
 
+}
 
+.my-header span {
 
+  background-image: -webkit-linear-gradient(top, #fff, #99eeff);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+}
 
+.main {
 
+  padding: 15px;
 
+  height: calc(100% - 70px);
 
+  background-size: 80%;
 
+  padding-bottom: 65px;
 
+  display: grid;
 
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  gap: 20px;
 
+}
 
+.center-item {
 
+  background: url('../images/center-border.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.center-title {
 
+  height: 15%;
 
+  width: 90%;
 
+  margin-bottom: 4% !important;
 
+}
 
+.arrow {
 
+  width: 17px;
 
+  height: 34px;
 
+  margin-right: 5px;
 
+}
 
+.center1-footer {
 
+  width: 90%;
 
+  height: 70%;
 
+  padding: 0 2%;
 
+}
 
+.footer {
 
+  position: fixed;
 
+  bottom: 0;
 
+  padding: 10px;
 
+  display: flex;
 
+  background-color: rgba(0, 0, 0, 0.5);
 
+  width: 100%;
 
+  background: url('../images/foot-back.png') no-repeat center bottom;
 
+  background-size: 100% 100%;
 
+}
 
+.footer a {
 
+  height: 40px;
 
+  line-height: 40px;
 
+  text-align: center;
 
+  color: #fff;
 
+  background: url('../images/footer-item.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  width: 200px;
 
+}
 
+.footer a:hover {
 
+  background: url('../images/footer-item-checked.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.header-item {
 
+  color: #69c0ff;
 
+}
 
+.row-item > .ceil:nth-child(2) {
 
+  color: rgb(180, 197, 29) !important;
 
+}
 
+.list {
 
+  list-style-type: none;
 
+}
 
+.center1-footer > .list {
 
+  width: 100%;
 
+  padding: 0 5%;
 
+}
 
+/* .center1-footer > .list span {
 
+  font-size: 20px;
 
+  color: #69c0ff;
 
+  font-style: italic;
 
+  font-weight: bold;
 
+  margin: 0 10px;
 
+} */
 
+.list {
 
+  height: 80%;
 
+}
 
+.list-item {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.list-item i.num {
 
+  font-size: 20px;
 
+  margin-right: 10px;
 
+}
 
+.list > .list-item:nth-child(1) .el-progress-bar__inner {
 
+  background: linear-gradient(to right, #092854, #40a8fe);
 
+}
 
+.list > .list-item:nth-child(2) .el-progress-bar__inner {
 
+  background: linear-gradient(to right, #0b2855, #5d78e3);
 
+}
 
+.list > .list-item:nth-child(3) .el-progress-bar__inner {
 
+  background: linear-gradient(to right, #0a2a54, #3fc9c1);
 
+}
 
+.list > .list-item:nth-child(4) .el-progress-bar__inner {
 
+  background: linear-gradient(to right, #0a2a54, #ca8317);
 
+}
 
+.list > .list-item:nth-child(5) .el-progress-bar__inner {
 
+  background: linear-gradient(to right, #0a2a54, #9c1765);
 
+}
 
+.el-progress {
 
+  width: 250px;
 
+}
 
+.serial {
 
+  width: 40px;
 
+  height: 40px;
 
+  line-height: 40px;
 
+  background-color: #163a5d;
 
+  color: #69c0ff;
 
+  font-style: italic;
 
+  font-weight: bold;
 
+  text-align: center;
 
+  margin-right: 10px;
 
+  border-radius: 5px;
 
+}
 
+.el-progress__text {
 
+  color: #69c0ff;
 
+}
 
+.aiQuality {
 
+  width: 90%;
 
+  height: 70%;
 
+  padding-top: 0.2%;
 
+  margin: 0 auto;
 
+}
 
+.top-title1,
 
+.top-title2,
 
+.top-title3 {
 
+  width: 270px;
 
+  height: 50px;
 
+  line-height: 50px;
 
+  left: 180px;
 
+  top: 65px;
 
+  background: url('../images/title.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  padding-left: 50px;
 
+}
 
+/* zhb */
 
+/* 宽高纵横比 */
 
+.aspect-auto {
 
+  aspect-ratio: auto;
 
+}
 
+.aspect-square {
 
+  aspect-ratio: 1 / 1;
 
+}
 
+.aspect-video {
 
+  aspect-ratio: 16 / 9;
 
+}
 
+/* aspect-[4/3] */
 
+
 
+/* 居中 */
 
+.mx-auto {
 
+  margin: 0 auto;
 
+}
 
+
 
+/* 设置容器内的列数/每列距离 */
 
+.columns-1 {
 
+  columns: 1;
 
+}
 
+/* columns-[20px] */
 
+
 
+/* 盒子模型 */
 
+.box-border {
 
+  box-sizing: border-box;
 
+}
 
+.box-content {
 
+  box-sizing: content-box;
 
+}
 
+/* 消失 */
 
+.hidden {
 
+  display: none;
 
+}
 
+
 
+/* 块级元素 */
 
+.block {
 
+  display: block;
 
+}
 
+/* 行内块 */
 
+.inline-block {
 
+  display: inline-block;
 
+}
 
+/* 行内元素 */
 
+.inline {
 
+  display: inline;
 
+}
 
+
 
+/* 弹性布局 */
 
+.flex {
 
+  display: flex;
 
+}
 
+/* 主轴起点在左边 */
 
+.flex-row {
 
+  flex-direction: row;
 
+}
 
+/* 主轴起点在右边 */
 
+.flex-row-reverse {
 
+  flex-direction: row-reverse;
 
+}
 
+/* 主轴竖向排列，在上面 */
 
+.flex-col {
 
+  flex-direction: column;
 
+}
 
+/* 主轴竖向排列，在下面 */
 
+.flex-col-reverse {
 
+  flex-direction: column-reverse;
 
+}
 
+/* 自动换行 */
 
+.flex-wrap {
 
+  flex-wrap: wrap;
 
+}
 
+/* 自动换行下起点 */
 
+.flex-wrap-reverse {
 
+  flex-wrap: wrap-reverse;
 
+}
 
+/* 不换行 */
 
+.flex-nowrap {
 
+  flex-wrap: nowrap;
 
+}
 
+/* 弹性成长 */
 
+.grow {
 
+  flex-grow: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.grow-0 {
 
+  flex-grow: 0;
 
+}
 
+/* 主轴从左开始 */
 
+.justify-start {
 
+  justify-content: flex-start;
 
+}
 
+/* 主轴从右开始 */
 
+.justify-end {
 
+  justify-content: flex-end;
 
+}
 
+/* 主轴剧中 */
 
+.justify-center {
 
+  justify-content: center;
 
+}
 
+/* 主轴两端无间隔 */
 
+.justify-between {
 
+  justify-content: space-between;
 
+}
 
+/* 主轴两端有间隔 */
 
+.justify-around {
 
+  justify-content: space-around;
 
+}
 
+/* 所有间隔相等 */
 
+.justify-evenly {
 
+  justify-content: space-evenly;
 
+}
 
+/* 纵向起点最上方 */
 
+.items-start {
 
+  align-items: flex-start;
 
+}
 
+/* 纵向起点最下方 */
 
+.items-end {
 
+  align-items: flex-end;
 
+}
 
+.items-center {
 
+  align-items: center;
 
+}
 
+/* 网格布局 */
 
+.grid {
 
+  display: grid;
 
+}
 
+/* 有几列 */
 
+.grid-cols-4 {
 
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 
+}
 
+/* 有几行 */
 
+.grid-rows-3 {
 
+  grid-template-rows: repeat(3, minmax(0, 1fr));
 
+}
 
+
 
+/* 间距 */
 
+.gap-7 {
 
+  gap: 1.75rem;
 
+}
 
+/* 允许弹性成长 */
 
+.shrink {
 
+  flex-shrink: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.shrink-0 {
 
+  flex-shrink: 0;
 
+}
 
+/* 不允许成长也不允许收缩 */
 
+.flex-none {
 
+  flex: none;
 
+}
 
+/* 浮动布局 */
 
+.float-right {
 
+  float: right;
 
+}
 
+.float-left {
 
+  float: left;
 
+}
 
+.clear-both {
 
+  clear: both;
 
+}
 
+
 
+/* 溢出 */
 
+.overflow-auto {
 
+  overflow: auto;
 
+}
 
+.overflow-hidden {
 
+  overflow: hidden;
 
+}
 
+.overflow-scroll {
 
+  overflow: scroll;
 
+}
 
+.overflow-x-auto {
 
+  overflow-x: auto;
 
+}
 
+.overflow-y-auto {
 
+  overflow-y: auto;
 
+}
 
+
 
+/* 定位 */
 
+.fixed {
 
+  position: fixed;
 
+}
 
+.absolute {
 
+  position: absolute;
 
+}
 
+.relative {
 
+  position: relative;
 
+}
 
+.top-0 {
 
+  top: 0px;
 
+}
 
+.right-0 {
 
+  right: 0px;
 
+}
 
+.bottom-0 {
 
+  bottom: 0px;
 
+}
 
+.left-0 {
 
+  left: 0px;
 
+}
 
+/* top-[3px] */
 
+/* z-[100] */
 
+
 
+/* 显示隐藏未脱离文档流 */
 
+.visible {
 
+  visibility: visible;
 
+}
 
+.invisible {
 
+  visibility: hidden;
 
+}
 
+
 
+/* 内边距 */
 
+.p-0 {
 
+  padding: 0px;
 
+}
 
+.px-0 {
 
+  padding-left: 0px;
 
+  padding-right: 0px;
 
+}
 
+.py-0 {
 
+  padding-top: 0px;
 
+  padding-bottom: 0px;
 
+}
 
+.pt-0 {
 
+  padding-top: 0px;
 
+}
 
+.pr-0 {
 
+  padding-right: 0px;
 
+}
 
+.pb-0 {
 
+  padding-bottom: 0px;
 
+}
 
+.pl-0 {
 
+  padding-left: 0px;
 
+}
 
+/* p-[5px] */
 
+
 
+/* 外边距 */
 
+.m-0 {
 
+  margin: 0px;
 
+}
 
+.mx-0 {
 
+  margin-left: 0px;
 
+  margin-right: 0px;
 
+}
 
+.my-0 {
 
+  margin-top: 0px;
 
+  margin-bottom: 0px;
 
+}
 
+.mt-0 {
 
+  margin-top: 0px;
 
+}
 
+.mr-0 {
 
+  margin-right: 0px;
 
+}
 
+.mb-0 {
 
+  margin-bottom: 0px;
 
+}
 
+.ml-0 {
 
+  margin-left: 0px;
 
+}
 
+/* m-[5px] */
 
+
 
+/* 宽度 */
 
+.w-full {
 
+  width: 100%;
 
+}
 
+.w-screen {
 
+  width: 100vw;
 
+}
 
+/* w-[32rem] */
 
+/* min-w-[50%] */
 
+/* max-w-[50%] */
 
+
 
+/* 高度 */
 
+.h-full {
 
+  height: 100%;
 
+}
 
+.h-screen {
 
+  height: 100vh;
 
+}
 
+/* h-[32rem] */
 
+/* min-h-[50%] */
 
+/* max-h-[32rem] */
 
+
 
+/* 字体 */
 
+.text-xs {
 
+  font-size: 0.75rem; /* 12px */
 
+  line-height: 1rem; /* 16px */
 
+}
 
+.text-sm {
 
+  font-size: 0.875rem; /* 14px */
 
+  line-height: 1.25rem; /* 20px */
 
+}
 
+.text-base {
 
+  font-size: 1rem; /* 16px */
 
+  line-height: 1.5rem; /* 24px */
 
+}
 
+.text-lg {
 
+  font-size: 1.125rem; /* 18px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-xl {
 
+  font-size: 1.25rem; /* 20px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-2xl {
 
+  font-size: 1.5rem; /* 24px */
 
+  line-height: 2rem; /* 32px */
 
+}
 
+.text-3xl {
 
+  font-size: 1.875rem; /* 30px */
 
+  line-height: 2.25rem; /* 36px */
 
+}
 
+.text-4xl {
 
+  font-size: 2.25rem; /* 36px */
 
+  line-height: 2.5rem; /* 40px */
 
+}
 
+.text-5xl {
 
+  font-size: 3rem; /* 48px */
 
+  line-height: 1;
 
+}
 
+.text-6xl {
 
+  font-size: 3.75rem; /* 60px */
 
+  line-height: 1;
 
+}
 
+.text-7xl {
 
+  font-size: 4.5rem; /* 72px */
 
+  line-height: 1;
 
+}
 
+.text-8xl {
 
+  font-size: 6rem; /* 96px */
 
+  line-height: 1;
 
+}
 
+.text-9xl {
 
+  font-size: 8rem; /* 128px */
 
+  line-height: 1;
 
+}
 
+/* text-[14px] */
 
+/* 字体粗细font-weight */
 
+/* font-[1100] */
 
+/* https://tailwindcss.com/docs/font-weight */
 
+/* 字体间距letter-spacing */
 
+/* tracking-[.25em] */
 
+/* 行高line-height */
 
+/* leading-[3rem] */
 
+/* 无列表样式 */
 
+.list-none {
 
+  list-style-type: none;
 
+}
 
+/* 小圆点 */
 
+.list-disc {
 
+  list-style-type: disc;
 
+}
 
+/* 数字列表 */
 
+.list-decimal {
 
+  list-style-type: decimal;
 
+}
 
+.text-left {
 
+  text-align: left;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.text-right {
 
+  text-align: right;
 
+}
 
+/* 所有文本头尾对齐 */
 
+.text-justify {
 
+  text-align: justify;
 
+}
 
+/* 文本颜色 */
 
+/* text-[#50d71e] */
 
+/* https://tailwindcss.com/docs/text-color */
 
+/* 下划线 */
 
+.underline {
 
+  text-decoration-line: underline;
 
+}
 
+/* 上划线 */
 
+.overline {
 
+  text-decoration-line: overline;
 
+}
 
+/* 中划线 */
 
+.line-through {
 
+  text-decoration-line: line-through;
 
+}
 
+/* 无划线 */
 
+.no-underline {
 
+  text-decoration-line: none;
 
+}
 
+/* 全小写 */
 
+.lowercase {
 
+  text-transform: lowercase;
 
+}
 
+/* 全大写 */
 
+.uppercase {
 
+  text-transform: uppercase;
 
+}
 
+/* 首字母大写 */
 
+.capitalize {
 
+  text-transform: capitalize;
 
+}