Home Esplora Aiuto
Accedi
kingdee_large_screen
/
pc_kingdee_large_screen
2
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

焦煤第三个图

zhbyyy 1 anno fa
parent
51dfda3c2b
commit
ab14a481d4
57 ha cambiato i file con 3388 aggiunte e 0 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 3 0
      cokingCoal/.vscode/settings.json
  2. 197 0
      cokingCoal/cokingCoalA.html
  3. BIN
      cokingCoal/fonts/element-icons.woff
  4. BIN
      cokingCoal/images/annular.png
  5. BIN
      cokingCoal/images/arrow.png
  6. BIN
      cokingCoal/images/bottom-right.png
  7. BIN
      cokingCoal/images/bottom-right1.png
  8. BIN
      cokingCoal/images/bottom-right2.png
  9. BIN
      cokingCoal/images/bottom-right3.png
  10. BIN
      cokingCoal/images/bottom-right4.png
  11. BIN
      cokingCoal/images/center-border.png
  12. BIN
      cokingCoal/images/center-left1.png
  13. BIN
      cokingCoal/images/center-left2.png
  14. BIN
      cokingCoal/images/center-left3.png
  15. BIN
      cokingCoal/images/center-right1.png
  16. BIN
      cokingCoal/images/center-right2.png
  17. BIN
      cokingCoal/images/center-right3.png
  18. BIN
      cokingCoal/images/center2-back.png
  19. BIN
      cokingCoal/images/content-bg.png
  20. BIN
      cokingCoal/images/foot-back.png
  21. BIN
      cokingCoal/images/foot-border.png
  22. BIN
      cokingCoal/images/footer-item-checked.png
  23. BIN
      cokingCoal/images/footer-item.png
  24. BIN
      cokingCoal/images/header-bg.png
  25. BIN
      cokingCoal/images/header-bg2.png
  26. BIN
      cokingCoal/images/home-bg.png
  27. BIN
      cokingCoal/images/line.png
  28. BIN
      cokingCoal/images/page-bg.png
  29. BIN
      cokingCoal/images/title-back.png
  30. BIN
      cokingCoal/images/top-1.png
  31. BIN
      cokingCoal/images/top-2.png
  32. BIN
      cokingCoal/images/top-3.png
  33. BIN
      cokingCoal/images/top-4.png
  34. BIN
      cokingCoal/images/top-back.png
  35. BIN
      cokingCoal/images/top-card.png
  36. BIN
      cokingCoal/images/下拉按钮.png
  37. BIN
      cokingCoal/images/下拉框.png
  38. BIN
      cokingCoal/images/入池人数.png
  39. BIN
      cokingCoal/images/出池人数.png
  40. BIN
      cokingCoal/images/形状 19 拷贝 18.png
  41. BIN
      cokingCoal/images/标题线.png
  42. BIN
      cokingCoal/images/紫色.png
  43. BIN
      cokingCoal/images/绿色.png
  44. BIN
      cokingCoal/images/蓝色.png
  45. 451 0
      cokingCoal/js/cokingCoalA.js
  46. 330 0
      cokingCoal/js/investHome.js
  47. 179 0
      cokingCoal/js/request.js
  48. 1 0
      cokingCoal/libs/axios.min.js
  49. 227 0
      cokingCoal/libs/echarts-tooltip-carousel.js
  50. 21 0
      cokingCoal/libs/echarts.min.js
  51. 0 0
      cokingCoal/libs/element-ui@2.15.9.js
  52. 10 0
      cokingCoal/libs/vue@2.7.10.js
  53. 694 0
      cokingCoal/styles/cokingCoalA.css
  54. 751 0
      cokingCoal/styles/common.css
  55. 0 0
      cokingCoal/styles/element-ui@2.15.9.css
  56. 260 0
      cokingCoal/styles/investHome.css
  57. 264 0
      cokingCoal/styles/normalize.css

+ 3 - 0
cokingCoal/.vscode/settings.json
Vedi File 

@@ -0,0 +1,3 @@
 
+{
 
+  "liveServer.settings.port": 5501
 
+}

+ 197 - 0
cokingCoal/cokingCoalA.html
Vedi File 

@@ -0,0 +1,197 @@
 
+<!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/cokingCoalA.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">
 
+        <div class="top flex justify-between">
 
+          <div class="flex items-center justify-center">
 
+            <img class="top-img" src="./images/top-1.png" alt="">
 
+            <div>优化<span class="top-text">1308</span>人</div>
 
+          </div>
 
+          <div class="flex items-center justify-center">
 
+            <img class="top-img" src="./images/top-2.png" alt="">
 
+            <div>共享<span class="top-text">2000</span>人</div>
 
+          </div>
 
+          <div class="flex items-center justify-center">
 
+            <img class="top-img" src="./images/top-3.png" alt="">
 
+            <div>缓存<span class="top-text">1460</span>人</div>
 
+          </div>
 
+          <div class="flex items-center justify-center">
 
+            <img class="top-img" src="./images/top-4.png" alt="">
 
+            <div>待岗<span class="top-text">4080</span>人</div>
 
+          </div>
 
+        </div>
 
+        <div class="center flex justify-between">
 
+          <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 class="annular text-center"><span style="position: absolute;left: 40%;top: 0;">80%</span>
 
+                <img src="./images/annular.png" style="width: 100%;height:100%;" alt="">
 
+              </div>
 
+              <div class="list  flex flex-col justify-around ">
 
+                <div class="flex items-center ">
 
+                  <img src="./images/center-left1.png" alt="">
 
+                  <div>流程中人数<span>1068</span>人</div>
 
+                </div>
 
+                <div class="flex items-center ">
 
+                  <img src="./images/center-left2.png" alt="">
 
+                  <div>已出池人数<span>2000</span>人</div>
 
+                </div>
 
+                <div class="flex items-center ">
 
+                  <img src="./images/center-left3.png" alt="">
 
+                  <div>流程中人数<span>3116</span>人</div>
 
+                </div>
 
+              </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="center2-footer mx-auto">
 
+              <div class="flex items-center justify-around">
 
+                <div class="flex flex-col justify-center items-center text-center">
 
+                  <div class="center2-footer-back">106</div>
 
+                  <span>未共享</span>
 
+                </div>
 
+                <div class="flex flex-col justify-center items-center text-center">
 
+                  <div class="center2-footer-back">220</div>
 
+                  <span>共享中</span>
 
+                </div>
 
+                <div class="flex flex-col justify-center items-center text-center">
 
+                  <div class="center2-footer-back">300</div>
 
+                  <span>已出池</span>
 
+                </div>
 
+              </div>
 
+              <div class="flex items-center justify-around">
 
+                <div class="flex flex-col justify-center items-center text-center">
 
+                  <div class="center2-footer-back">106</div>
 
+                  <span>共享次数</span>
 
+                </div>
 
+                <div class="flex flex-col justify-center items-center text-center">
 
+                  <div class="center2-footer-back">220</div>
 
+                  <span>共享人次</span>
 
+                </div>
 
+              </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="flex center3-footer mx-auto">
 
+              <ul class="list">
 
+                <li class="list-item">
 
+                  <img src="./images/center-right1.png" alt="">
 
+                  <span>山西焦煤</span>
 
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"
 
+                    :show-text="false"></el-progress>
 
+                  <span><i class="num" style="color: #40A9FF;">106</i>人</span>
 
+                </li>
 
+                <li class="list-item">
 
+                  <img src="./images/center-right2.png" alt="">
 
+                  <p>晋能控股</p>
 
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="70" color="#45DAD1"
 
+                    :show-text="false"></el-progress>
 
+                  <span><i class="num" style="color: #627EEE;">100</i>人</span>
 
+                </li>
 
+                <li class="list-item">
 
+                  <img src="./images/center-right3.png" alt="">
 
+                  <p>潞安化工</p>
 
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="60" color="#6682F5"
 
+                    :show-text="false"></el-progress>
 
+                  <span><i class="num" style="color: #41CEC6;">120</i>人</span>
 
+                </li>
 
+              </ul>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+        <div class="bottom flex justify-between">
 
+          <dv-border-box-8 class="bottom-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="aiQuality" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 class="bottom-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="center4-footer flex items-center justify-around mx-auto">
 
+              <div>
 
+                <div style="background: url('./images/bottom-right1.png') no-repeat center bottom;color:#6682F5;">2800
 
+                </div>
 
+                <span>终止合同人员</span>
 
+              </div>
 
+              <div>
 
+                <div style="background: url('./images/bottom-right2.png') no-repeat center bottom;color:#40A9FF;">1308
 
+                </div>
 
+                <span>双创人员</span>
 
+              </div>
 
+              <div>
 
+                <div style="background: url('./images/bottom-right3.png') no-repeat center bottom;color:#45DAD1;">1600
 
+                </div>
 
+                <span>待岗闲置人员</span>
 
+              </div>
 
+              <div>
 
+                <div style="background: url('./images/bottom-right4.png') no-repeat center bottom;color:#B889EA;">1220
 
+                </div>
 
+                <span>解除合同人员</span>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+      </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/cokingCoalA.js"></script>
 
+</body>
 
+
 
+</html>

BIN
cokingCoal/fonts/element-icons.woff
Vedi File


BIN
cokingCoal/images/annular.png
Vedi File


BIN
cokingCoal/images/arrow.png
Vedi File


BIN
cokingCoal/images/bottom-right.png
Vedi File


BIN
cokingCoal/images/bottom-right1.png
Vedi File


BIN
cokingCoal/images/bottom-right2.png
Vedi File


BIN
cokingCoal/images/bottom-right3.png
Vedi File


BIN
cokingCoal/images/bottom-right4.png
Vedi File


BIN
cokingCoal/images/center-border.png
Vedi File


BIN
cokingCoal/images/center-left1.png
Vedi File


BIN
cokingCoal/images/center-left2.png
Vedi File


BIN
cokingCoal/images/center-left3.png
Vedi File


BIN
cokingCoal/images/center-right1.png
Vedi File


BIN
cokingCoal/images/center-right2.png
Vedi File


BIN
cokingCoal/images/center-right3.png
Vedi File


BIN
cokingCoal/images/center2-back.png
Vedi File


BIN
cokingCoal/images/content-bg.png
Vedi File


BIN
cokingCoal/images/foot-back.png
Vedi File


BIN
cokingCoal/images/foot-border.png
Vedi File


BIN
cokingCoal/images/footer-item-checked.png
Vedi File


BIN
cokingCoal/images/footer-item.png
Vedi File


BIN
cokingCoal/images/header-bg.png
Vedi File


BIN
cokingCoal/images/header-bg2.png
Vedi File


BIN
cokingCoal/images/home-bg.png
Vedi File


BIN
cokingCoal/images/line.png
Vedi File


BIN
cokingCoal/images/page-bg.png
Vedi File


BIN
cokingCoal/images/title-back.png
Vedi File


BIN
cokingCoal/images/top-1.png
Vedi File


BIN
cokingCoal/images/top-2.png
Vedi File


BIN
cokingCoal/images/top-3.png
Vedi File


BIN
cokingCoal/images/top-4.png
Vedi File


BIN
cokingCoal/images/top-back.png
Vedi File


BIN
cokingCoal/images/top-card.png
Vedi File


BIN
cokingCoal/images/下拉按钮.png
Vedi File


BIN
cokingCoal/images/下拉框.png
Vedi File


BIN
cokingCoal/images/入池人数.png
Vedi File


BIN
cokingCoal/images/出池人数.png
Vedi File


BIN
cokingCoal/images/形状 19 拷贝 18.png
Vedi File


BIN
cokingCoal/images/标题线.png
Vedi File


BIN
cokingCoal/images/紫色.png
Vedi File


BIN
cokingCoal/images/绿色.png
Vedi File


BIN
cokingCoal/images/蓝色.png
Vedi File


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

@@ -0,0 +1,451 @@
 
+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)
 
+    },
 
+  },
 
+})

+ 330 - 0
cokingCoal/js/investHome.js
Vedi File 

@@ -0,0 +1,330 @@
 
+let app = new Vue({
 
+  el: '#app',
 
+  data() {
 
+    return {
 
+      year: '2022',
 
+      config1: {
 
+        number: [100],
 
+        content: '{nt}个',
 
+      },
 
+      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: '山西焦煤' },
 
+        { name: '晋能控股' },
 
+        { name: '华新燃气' },
 
+        { name: '山西建投' },
 
+        { name: '潞安化工' },
 
+        { name: '华远陆港' },
 
+        { name: '航产集团' },
 
+        { name: '大地控股' },
 
+        { name: '国新能源' },
 
+        { name: '汾酒集团' },
 
+        { name: '云时代' },
 
+        { name: '神农科技' },
 
+        { name: '华阳新材' },
 
+        { name: '华舰体育' },
 
+        { name: '交控集团' },
 
+        { name: '文旅集团' },
 
+        { name: '水控集团' },
 
+        { name: '太重集团' },
 
+      ],
 
+    }
 
+  },
 
+  mounted() {
 
+    // 左侧图表
 
+    this.initChartL1()
 
+    this.initChartL2()
 
+    this.initChartR1()
 
+  },
 
+  methods: {
 
+    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)
 
+    },
 
+  },
 
+})

+ 179 - 0
cokingCoal/js/request.js
Vedi File 

@@ -0,0 +1,179 @@
 
+//如果部署在同域名的话可以直接取cookie,后端需 HttpOnly 设置成否
 
+// var cookie_name = 'wolfking.jeesharp.session.id'
 
+// getCookie(cookie_name)
 
+
 
+// 是否本地环境
 
+function isLocalEnv() {
 
+  let domain = window.location.origin
 
+  if (['http://127.0.0.1:5500', 'file://'].includes(domain)) {
 
+    return true
 
+  } else {
 
+    return false
 
+  }
 
+}
 
+
 
+// api 前缀
 
+function getApiUrl() {
 
+  // 为线上时
 
+  if (!isLocalEnv()) {
 
+    return window.location.origin
 
+  } else {
 
+    // 本地时
 
+    // return 'http://sxtc.com:10002'        // 内网环境
 
+    // return 'http://10.8.8.100:10002'   // 内网环境
 
+    // return 'http://1.71.170.214:18080' // 线上环境
 
+    // return 'http://szxm.sxcig.com:8012' // 线上环境
 
+    // return 'http://10.0.0.27:8080'     // 超哥环境
 
+    // return 'http://10.0.0.22:8080'     // 闫敏的环境
 
+    // return 'http://10.0.0.8:8080' // 祥慧的环境
 
+    // return 'http://10.0.0.115:8080'    // 王蒙的环境
 
+	return 'http://10.0.0.82:8080'
 
+  }
 
+}
 
+// websocket 前缀
 
+function getWsUrl() {
 
+  let prefix = location.protocol === 'https:' ? 'wss://' : 'ws://'
 
+  // 为线上时
 
+  if (!isLocalEnv()) {
 
+    return prefix + window.location.host
 
+  } else {
 
+    return prefix + 'sxtc.com:10002'
 
+    // return prefix + '10.0.0.115:8080'
 
+  }
 
+}
 
+
 
+// minio 前缀
 
+function getMinioUrl() {
 
+  let isProduction = location.origin.indexOf('1.71.170.214') != -1
 
+  if (isProduction) {
 
+    return 'http://1.71.170.214:19000/constr-documents/'
 
+  } else {
 
+    return 'http://10.8.8.191:9000/constr-documents-test/'
 
+  }
 
+}
 
+
 
+/** axios封装
 
+ * 请求拦截、相应拦截、错误统一处理
 
+ */
 
+const httpRequest = axios.create({
 
+  baseURL: 'http://10.0.0.82:8080', // 测试环境
 
+  timeout: 3 * 60 * 1000, // 3分钟等待
 
+  withCredentials: true // 携带cookie
 
+})
 
+
 
+// 请求拦截器
 
+// httpRequest.interceptors.request.use(
 
+//   function (config) {
 
+//     if (!isLocalEnv()) {
 
+//       if (getQueryVariable('token')) {
 
+//         config.headers['access_token'] = getQueryVariable('token')
 
+//       }
 
+//     } else {
 
+//       config.headers['access_token'] = localStorage.getItem('token')
 
+//       // config.headers['access_token'] = '4b3ed521-f509-48d9-b907-ab127479df41'
 
+//     }
 
+//     // 上传文件
 
+//     if (config.url == '/apiSys/oss/upload') {
 
+//       config.headers['Content-Type'] = 'multipart/form-data'
 
+//     } else {
 
+//       config.headers['Content-Type'] = 'application/json'
 
+//     }
 
+//     return config
 
+//   },
 
+//   function (error) {
 
+//     return Promise.reject(error)
 
+//   }
 
+// )
 
+
 
+//响应拦截
 
+httpRequest.interceptors.response.use(
 
+  function (response) {
 
+    const res = response.data
 
+    // if (res.code == 201) {
 
+    //   this.ELEMENT.Message.error(res.msg)
 
+    //   if (!isLocalEnv()) {
 
+    //     // 跳登录页
 
+    //     window.location = window.location.origin
 
+    //   } else {
 
+    //     localEnvLogin()
 
+    //   }
 
+    // }
 
+    return response
 
+  },
 
+  function (error) {
 
+    this.ELEMENT.Message.error(error.message)
 
+    return Promise.reject(error)
 
+  }
 
+)
 
+
 
+function get(url, params) {
 
+  return new Promise((resolve, reject) => {
 
+    httpRequest
 
+      .get(url, { params: params })
 
+      .then(res => {
 
+        resolve(res.data)
 
+      })
 
+      .catch(err => {
 
+        reject(err.data)
 
+      })
 
+  })
 
+}
 
+// qs.stringify(data)
 
+function post(url, data, config) {
 
+  return new Promise((resolve, reject) => {
 
+    httpRequest
 
+      .post(url, data, config)
 
+      .then(res => {
 
+        resolve(res.data)
 
+      })
 
+      .catch(err => {
 
+        reject(err)
 
+      })
 
+  })
 
+}
 
+
 
+function postFile(url, blob) {
 
+  return new Promise((resolve, reject) => {
 
+    let formdata = new FormData()
 
+    formdata.append('multipartFile', blob)
 
+    httpRequest
 
+      .post(url, formdata)
 
+      .then(res => {
 
+        resolve(res.data)
 
+      })
 
+      .catch(err => {
 
+        reject(err)
 
+      })
 
+  })
 
+}
 
+
 
+function localEnvLogin() {
 
+  post(
 
+    '/apiSys/login',
 
+    {
 
+      username: 'admin',
 
+      password: '1q2w3e4r5t'
 
+    },
 
+    {
 
+      transformRequest: [
 
+        function (data, headers) {
 
+          // 将请求数据转换成功 formdata 接收格式
 
+          headers['Content-Type'] = 'application/x-www-form-urlencoded'
 
+          return stringify(data)
 
+        }
 
+      ]
 
+    }
 
+  ).then(res => {
 
+    localStorage.setItem('token', res.data.token || getQueryVariable('token'))
 
+  })
 
+}
 
+
 
+// 将参数转换成功 formdata 接收格式
 
+function stringify(data) {
 
+  let ret = ''
 
+  for (const it in data) {
 
+    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
 
+  }
 
+  ret = ret.substring(0, ret.lastIndexOf('&'))
 
+  return ret
 
+}

File diff suppressed because it is too large
+ 1 - 0
cokingCoal/libs/axios.min.js


+ 227 - 0
cokingCoal/libs/echarts-tooltip-carousel.js
Vedi File 

@@ -0,0 +1,227 @@
 
+/**
 
+ * Created by chengwb on 2016/9/3.
 
+ */
 
+(function (global) {
 
+  global.tools = global.tools || {};
 
+
 
+  /**
 
+   * echarts tooltip轮播
 
+   * @param chart ECharts实例
 
+   * @param chartOption echarts的配置信息
 
+   * @param options object 选项
 
+   * {
 
+   *  interval    轮播时间间隔，单位毫秒，默认为2000
 
+   *  loopSeries  boolean类型，默认为false。
 
+   *              true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
 
+   * 	seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
 
+   * 	            当loopSeries为true时，从seriesIndex系列开始执行。
 
+   *  updateData  自定义更新数据的函数，默认为null；
 
+   *              用于类似于分页的效果，比如总数据有20条，chart一次只显示5条，全部数据可以分4次显示。
 
+   * }
 
+   * @returns {{clearLoop: clearLoop}}
 
+   */
 
+  tools.loopShowTooltip = function (chart, chartOption, options) {
 
+    let defaultOptions = {
 
+      interval: 2000,
 
+      loopSeries: false,
 
+      seriesIndex: 0,
 
+      updateData: null
 
+    };
 
+
 
+    if (!chart || !chartOption) {
 
+      return;
 
+    }
 
+
 
+    let dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行
 
+    let seriesIndex = 0; // 系列索引
 
+    let timeTicket = 0;
 
+    let seriesLen = chartOption.series.length; // 系列个数
 
+    let dataLen = 0; // 某个系列数据个数
 
+    let chartType; // 系列类型
 
+    let first = true;
 
+    let lastShowSeriesIndex = 0;
 
+    let lastShowDataIndex = 0;
 
+    if (seriesLen === 0) {
 
+      return;
 
+    }
 
+
 
+    //待处理列表
 
+    //不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个
 
+    //循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个
 
+    //要不要添加开始series索引和开始的data索引？
 
+
 
+    if (options) {
 
+      options.interval = options.interval || defaultOptions.interval;
 
+      options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
 
+      options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
 
+      options.updateData = options.updateData || defaultOptions.updateData;
 
+    } else {
 
+      options = defaultOptions;
 
+    }
 
+
 
+    //如果设置的seriesIndex无效，则默认为0
 
+    if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
 
+      seriesIndex = 0;
 
+    } else {
 
+      seriesIndex = options.seriesIndex;
 
+    }
 
+
 
+    /**
 
+     * 清除定时器
 
+     */
 
+    function clearLoop() {
 
+      if (timeTicket) {
 
+        clearInterval(timeTicket);
 
+        timeTicket = 0;
 
+      }
 
+      chart.off('mousemove', stopAutoShow);
 
+      zRender.off('mousemove', zRenderMouseMove);
 
+      zRender.off('globalout', zRenderGlobalOut);
 
+    }
 
+
 
+    /**
 
+     * 取消高亮
 
+     */
 
+    function cancelHighlight() {
 
+      /**
 
+       * 如果dataIndex为0表示上次系列完成显示，如果是循环系列，且系列索引为0则上次是seriesLen-1，否则为seriesIndex-1；
 
+       * 如果不是循环系列，则就是当前系列；
 
+       * 如果dataIndex>0则就是当前系列。
 
+       */
 
+      let tempSeriesIndex = dataIndex === 0 ?
 
+        (options.loopSeries ?
 
+          (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1)
 
+          : seriesIndex)
 
+        : seriesIndex;
 
+      let tempType = chartOption.series[tempSeriesIndex].type;
 
+
 
+      if (tempType === 'pie' || tempType === 'radar') {
 
+        chart.dispatchAction({
 
+          type: 'downplay',
 
+          seriesIndex: lastShowSeriesIndex,
 
+          dataIndex: lastShowDataIndex
 
+        });//wait 系列序号为0且循环系列，则要判断上次的系列类型是否是pie、radar
 
+      }
 
+    }
 
+
 
+    /**
 
+     * 自动轮播tooltip
 
+     */
 
+    function autoShowTip() {
 
+      let invalidSeries = 0;
 
+      let invalidData = 0;
 
+
 
+      function showTip() {
 
+        //判断是否更新数据
 
+        if (dataIndex === 0 && !first && typeof options.updateData === "function") {
 
+          options.updateData();
 
+          chart.setOption(chartOption);
 
+        }
 
+
 
+        let series = chartOption.series;
 
+        let currSeries = series[seriesIndex];
 
+        if (!series || series.length === 0 ||
 
+          !currSeries || !currSeries.type || !currSeries.data ||
 
+          !currSeries.data.length) {
 
+          return;
 
+        }
 
+        chartType = currSeries.type; // 系列类型
 
+        dataLen = currSeries.data.length; // 某个系列的数据个数
 
+
 
+        let tipParams = {seriesIndex: seriesIndex};
 
+        switch (chartType) {
 
+          case 'pie':
 
+          case 'map':
 
+          case 'chord':
 
+            tipParams.name = currSeries.data[dataIndex].name;
 
+            break;
 
+          case 'radar': // 雷达图
 
+            tipParams.seriesIndex = seriesIndex;
 
+            tipParams.dataIndex = dataIndex;
 
+            break;
 
+          default:
 
+            tipParams.dataIndex = dataIndex;
 
+            break;
 
+        }
 
+
 
+        if (chartType === 'pie' || chartType === 'radar') {
 
+          if (!first) {
 
+            cancelHighlight();
 
+          }
 
+
 
+          // 高亮当前图形
 
+          chart.dispatchAction({
 
+            type: 'highlight',
 
+            seriesIndex: seriesIndex,
 
+            dataIndex: dataIndex
 
+          });
 
+        }
 
+
 
+        // 显示 tooltip
 
+        tipParams.type = 'showTip';
 
+
 
+        // 防止updateData时先处理tooltip后刷新数据导出tooltip显示不正确
 
+        setTimeout(() => {
 
+          chart.dispatchAction(tipParams);
 
+        }, 0);
 
+
 
+        lastShowSeriesIndex = seriesIndex;
 
+        lastShowDataIndex = dataIndex;
 
+        dataIndex = (dataIndex + 1) % dataLen;
 
+        if (options.loopSeries && dataIndex === 0) { // 数据索引归0表示当前系列数据已经循环完
 
+          invalidData = 0;
 
+          seriesIndex = (seriesIndex + 1) % seriesLen;
 
+          if (seriesIndex === options.seriesIndex) {
 
+            invalidSeries = 0;
 
+          }
 
+        }
 
+
 
+        first = false;
 
+      }
 
+
 
+      showTip();
 
+      timeTicket = setInterval(showTip, options.interval);
 
+    }
 
+
 
+    // 关闭轮播
 
+    function stopAutoShow() {
 
+      if (timeTicket) {
 
+        clearInterval(timeTicket);
 
+        timeTicket = 0;
 
+
 
+        if (chartType === 'pie' || chartType === 'radar') {
 
+          cancelHighlight();
 
+        }
 
+      }
 
+    }
 
+
 
+    let zRender = chart.getZr();
 
+
 
+    function zRenderMouseMove(param) {
 
+      if (param.event) {
 
+        //阻止canvas上的鼠标移动事件冒泡
 
+        param.event.cancelBubble = true;
 
+      }
 
+
 
+      stopAutoShow();
 
+    }
 
+
 
+    // 离开echarts图时恢复自动轮播
 
+    function zRenderGlobalOut() {
 
+      if (!timeTicket) {
 
+        autoShowTip();
 
+      }
 
+    }
 
+
 
+    // 鼠标在echarts图上时停止轮播
 
+    chart.on('mousemove', stopAutoShow);
 
+    zRender.on('mousemove', zRenderMouseMove);
 
+    zRender.on('globalout', zRenderGlobalOut);
 
+
 
+    autoShowTip();
 
+
 
+    return {
 
+      clearLoop: clearLoop
 
+    };
 
+  };
 
+})(window);

File diff suppressed because it is too large
+ 21 - 0
cokingCoal/libs/echarts.min.js


File diff suppressed because it is too large
+ 0 - 0
cokingCoal/libs/element-ui@2.15.9.js


File diff suppressed because it is too large
+ 10 - 0
cokingCoal/libs/vue@2.7.10.js


+ 694 - 0
cokingCoal/styles/cokingCoalA.css
Vedi File 

@@ -0,0 +1,694 @@
 
+*,
 
+*: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;
 
+  display: flex;
 
+  height: calc(100% - 70px);
 
+  /* background: url('../images/content-bg.png') no-repeat center bottom; */
 
+  background-size: 80%;
 
+  display: flex;
 
+  padding-bottom: 65px;
 
+  flex-direction: column;
 
+}
 
+.top {
 
+  width: 100%;
 
+  height: 140px;
 
+}
 
+.top > div {
 
+  width: 455px;
 
+  background: url('../images/top-card.png') no-repeat center bottom;
 
+}
 
+.top > div span {
 
+  margin: 0 10px;
 
+}
 
+.top-img {
 
+  width: 127px;
 
+  height: 127px;
 
+  margin-right: 15px;
 
+}
 
+.top-text {
 
+  font-size: 40px;
 
+  color: #69c0ff;
 
+  font-style: italic;
 
+  font-weight: bold;
 
+}
 
+.center,
 
+.bottom {
 
+  margin-top: 15px;
 
+}
 
+.center-item {
 
+  width: 32.7% !important;
 
+  height: 350px !important;
 
+  background: url('../images/center-border.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.bottom-item {
 
+  width: 49.5% !important;
 
+  height: 400px !important;
 
+  background: url('../images/foot-border.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.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%;
 
+}
 
+.center-title {
 
+  height: 15%;
 
+  width: 90%;
 
+  margin-bottom: 4% !important;
 
+}
 
+.center1-footer,
 
+.center3-footer,
 
+.center2-footer,
 
+.center4-footer {
 
+  width: 90%;
 
+  height: 70%;
 
+  padding: 0 2%;
 
+}
 
+.center1-footer > .list {
 
+  padding: 0 5%;
 
+}
 
+.center1-footer > .list span {
 
+  font-size: 20px;
 
+  color: #69c0ff;
 
+  font-style: italic;
 
+  font-weight: bold;
 
+  margin: 0 10px;
 
+}
 
+.arrow {
 
+  width: 17px;
 
+  height: 34px;
 
+  margin-right: 5px;
 
+}
 
+.center1-footer > img {
 
+  width: auto;
 
+  height: 100%;
 
+}
 
+.annular {
 
+  width: 250px !important;
 
+  height: 250px !important;
 
+  line-height: 250px !important;
 
+  font-size: 25px;
 
+  font-weight: bold;
 
+  position: relative;
 
+  flex-shrink: 0;
 
+}
 
+.annular > img {
 
+  animation: fadenum 8s infinite linear;
 
+}
 
+@keyframes fadenum {
 
+  100% {
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+.center1-footer > div {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.center2-footer-back {
 
+  width: 100px;
 
+  height: 100px;
 
+  line-height: 100px;
 
+  font-weight: bold;
 
+  font-size: 30px;
 
+  background: url('../images/center2-back.png') no-repeat;
 
+  background: url('../images/center2-back.gif') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.list {
 
+  flex: 1;
 
+  padding: 15px;
 
+  justify-content: space-between;
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+.list .list-item {
 
+  display: flex;
 
+  align-items: center;
 
+  padding: 10px;
 
+}
 
+.list .list-item > img {
 
+  margin-right: 10px;
 
+  width: 35px;
 
+  height: 35px;
 
+  border-radius: 4px;
 
+}
 
+.list-item i.num {
 
+  font-size: 20px;
 
+  margin-right: 10px;
 
+}
 
+.unit-label {
 
+  display: none !important;
 
+}
 
+.aiQuality {
 
+  width: 90%;
 
+  height: 70%;
 
+  padding-top: 0.2%;
 
+  margin: 0 auto;
 
+}
 
+.center4-footer > div {
 
+  width: 23.5%;
 
+  height: 100%;
 
+  background: url('../images/bottom-right.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  padding: 2% 4%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
+.center4-footer > div > div {
 
+  text-align: center;
 
+  font-size: 20px;
 
+  font-style: italic;
 
+  font-weight: bold;
 
+  width: 100%;
 
+  height: 70%;
 
+  padding-top: 30%;
 
+  background-size: 100% 100%;
 
+}
 
+.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);
 
+}
 
+/* 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;
 
+}

+ 751 - 0
cokingCoal/styles/common.css
Vedi File 

@@ -0,0 +1,751 @@
 
+*,
 
+*:before,
 
+*:after {
 
+  padding: 0;
 
+  margin: 0;
 
+  box-sizing: border-box;
 
+}
 
+html,
 
+body {
 
+  height: 100%;
 
+  font-size: 13px;
 
+  background-color: #f3f3f3;
 
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
 
+    'Hiragino Sans GB', Arial, sans-serif;
 
+  /* overflow: hidden; */
 
+}
 
+
 
+.flex {
 
+  display: flex;
 
+}
 
+.flex1 {
 
+  flex: 1;
 
+}
 
+.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: #228af5;
 
+}
 
+.danger-color {
 
+  color: #f56c6c;
 
+}
 
+.btm10 {
 
+  margin-bottom: 10px;
 
+}
 
+.btm20 {
 
+  margin-bottom: 20px;
 
+}
 
+a {
 
+  text-decoration: none;
 
+  cursor: pointer;
 
+}
 
+.dialog-full-icon {
 
+  padding: 5px;
 
+  color: #fff;
 
+  position: absolute;
 
+  right: 50px;
 
+  top: 18px;
 
+  font-size: 16px;
 
+  cursor: pointer;
 
+}
 
+
 
+[v-cloak] {
 
+  display: none;
 
+}
 
+#app {
 
+  height: 100vh;
 
+}
 
+/* 头部 */
 
+.header {
 
+  height: 77px;
 
+  flex: 0 0 auto;
 
+  background-color: #fff;
 
+  display: flex;
 
+}
 
+.header-item {
 
+  padding: 15px;
 
+  text-align: center;
 
+  color: #333;
 
+  cursor: pointer;
 
+  position: relative;
 
+}
 
+.header-item p {
 
+  width: 150%;
 
+  margin-left: -25%;
 
+}
 
+.header-item:hover {
 
+  background-color: #cae5fb;
 
+  color: #228af5;
 
+}
 
+.header-item.active {
 
+  background-color: #cae5fb;
 
+  color: #228af5;
 
+}
 
+.nav-dropdown {
 
+  display: block;
 
+  font-size: 13px;
 
+  color: #333;
 
+}
 
+
 
+#designer {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.main-wrap {
 
+  height: calc(100vh - 77px);
 
+  padding: 10px 0;
 
+  flex: 1;
 
+}
 
+.main {
 
+  display: flex;
 
+  padding: 0px;
 
+  height: 100%;
 
+  margin: 0 10px;
 
+  background: #fff;
 
+  border: 1px solid #e5e5e5;
 
+}
 
+/* 左侧 */
 
+.aside {
 
+  height: 100%;
 
+  background-color: #fff;
 
+  border: 1px solid #e5e5e5;
 
+}
 
+.el-tree > .el-tree-node {
 
+  display: inline-block;
 
+  min-width: 100%;
 
+}
 
+
 
+/* el-tree 操作弹出 */
 
+.contextmenu__item {
 
+  display: block;
 
+  line-height: 34px;
 
+  text-align: left;
 
+  padding: 0 20px;
 
+}
 
+.contextmenu__item:not(:last-child) {
 
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
+}
 
+.menu {
 
+  position: fixed;
 
+  background-color: #fff;
 
+  font-size: 14px;
 
+  color: #444040;
 
+  border-radius: 4px;
 
+  border: 1px solid rgba(0, 0, 0, 0.15);
 
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 
+  white-space: nowrap;
 
+  z-index: 1000;
 
+}
 
+.contextmenu__item:hover {
 
+  cursor: pointer;
 
+  background: #66b1ff;
 
+  border-color: #66b1ff;
 
+  color: #fff;
 
+}
 
+.main > div.left {
 
+  flex: 1;
 
+  overflow: hidden;
 
+  padding: 5px;
 
+}
 
+.main > div.right {
 
+  flex: 1;
 
+  overflow: hidden;
 
+  padding: 5px;
 
+  border-left: 1px solid #ccc;
 
+}
 
+
 
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
 
+  background-color: #e8f3fe;
 
+}
 
+/* 公共弹框样式 */
 
+.el-dialog {
 
+  border-radius: 8px;
 
+  overflow: hidden;
 
+}
 
+.el-dialog__header {
 
+  padding: 15px;
 
+  background-color: #228af5;
 
+}
 
+
 
+.el-dialog__header .el-dialog__title {
 
+  color: #fff;
 
+  font-size: 16px;
 
+}
 
+.el-dialog__headerbtn .el-dialog__close {
 
+  color: #fff;
 
+  font-size: 20px;
 
+}
 
+.el-dialog__body {
 
+  padding: 15px;
 
+  border-top: 1px solid #f1f1f1;
 
+}
 
+.el-form-item--mini.el-form-item,
 
+.el-form-item--small.el-form-item {
 
+  margin-bottom: 15px;
 
+}
 
+.build-modal .el-dialog__body {
 
+  padding: 0;
 
+}
 
+.build-modal .el-card {
 
+  margin-bottom: 10px;
 
+}
 
+.build-modal .el-card p {
 
+  line-height: 1.6;
 
+}
 
+.build-modal .el-form {
 
+  flex: 0 0 300px;
 
+  margin-right: 30px;
 
+}
 
+.build-modal .el-card__header {
 
+  padding: 10px;
 
+  background-color: whitesmoke;
 
+}
 
+.build-modal .el-card__body {
 
+  padding: 15px;
 
+}
 
+.inline-inputs .el-form-item__content {
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+.inline-inputs .el-form-item__content span {
 
+  margin: 0 20px;
 
+}
 
+
 
+.select-box .el-radio-group {
 
+  display: flex;
 
+  flex-direction: column;
 
+  margin-top: 15px;
 
+}
 
+.select-box .el-checkbox-group {
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+.select-box .el-radio-group label {
 
+  margin-bottom: 20px;
 
+}
 
+.select-box .el-checkbox-group label {
 
+  margin-bottom: 15px;
 
+}
 
+.nav-icon {
 
+  display: inline-block;
 
+  width: 35px;
 
+  height: 35px;
 
+  margin-bottom: 3px;
 
+}
 
+.nav-icon1 {
 
+  background: url(../images/navs/1.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon2 {
 
+  background: url(../images/navs/2.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon3 {
 
+  background: url(../images/navs/3.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon4 {
 
+  background: url(../images/navs/4.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon5 {
 
+  background: url(../images/navs/5.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon6 {
 
+  background: url(../images/navs/6.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon7 {
 
+  background: url(../images/navs/7.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon8 {
 
+  background: url(../images/navs/8.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon9 {
 
+  background: url(../images/navs/9.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon10 {
 
+  background: url(../images/navs/10.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+
 
+.nav-icon11 {
 
+  background: url(../images/navs/11.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon12 {
 
+  background: url(../images/navs/12.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon13 {
 
+  background: url(../images/navs/13.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon14 {
 
+  background: url(../images/navs/14.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon15 {
 
+  background: url(../images/navs/15.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon16 {
 
+  background: url(../images/navs/16.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon17 {
 
+  background: url(../images/navs/17.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon18 {
 
+  background: url(../images/navs/18.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.nav-icon19 {
 
+  background: url(../images/navs/19.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+
 
+.tree-icon {
 
+  display: inline-block;
 
+  width: 14px;
 
+  height: 14px;
 
+  margin-right: 5px;
 
+  vertical-align: -2px;
 
+}
 
+.tree-icon01 {
 
+  background: url(../images/tree/project-1@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon02 {
 
+  background: url(../images/tree/project-2@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon03 {
 
+  background: url(../images/tree/project-3@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon1,
 
+.tree-icon18,
 
+.tree-icon20,
 
+.tree-icon22 {
 
+  background: url(../images/tree/project@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon2 {
 
+  background: url(../images/tree/class@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon3 {
 
+  background: url(../images/tree/sub-class@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon4 {
 
+  background: url(../images/tree/sub-class-child@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon5 {
 
+  background: url(../images/tree/form@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon6,
 
+.tree-icon17,
 
+.tree-icon19,
 
+.tree-icon21 {
 
+  background: url(../images/tree/floor@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon7 {
 
+  background: url(../images/tree/build@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon8 {
 
+  background: url(../images/tree/form8@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon9 {
 
+  background: url(../images/tree/floor@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon10 {
 
+  background: url(../images/tree/project@2x.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon11 {
 
+  background: url(../images/tree/tong1.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon12 {
 
+  background: url(../images/tree/tong2.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon13 {
 
+  background: url(../images/tree/tong3.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon14 {
 
+  background: url(../images/tree/tong4.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon15 {
 
+  background: url(../images/tree/tong5.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon16 {
 
+  background: url(../images/tree/tong6.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon100 {
 
+  background: url(../images/tree/tong7.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon101 {
 
+  background: url(../images/tree/tong8.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon102 {
 
+  background: url(../images/tree/tong9.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon103 {
 
+  background: url(../images/tree/tong10.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon104 {
 
+  background: url(../images/tree/tong1.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.tree-icon105 {
 
+  background: url(../images/tree/tong2.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+
 
+.tree-icon-company {
 
+  background: url(../images/icons/company.png) no-repeat;
 
+  background-size: 110% 110%;
 
+}
 
+
 
+.home-content {
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  align-items: center;
 
+  flex: 1;
 
+}
 
+.home-content h1 {
 
+  margin-bottom: 50px;
 
+}
 
+.home-content img {
 
+  width: 80%;
 
+  height: 50%;
 
+}
 
+.dialog-nowrap {
 
+  pointer-events: none;
 
+}
 
+.dialog-nowrap .el-dialog {
 
+  pointer-events: auto;
 
+}
 
+.el-drawer__wrapper {
 
+  pointer-events: none;
 
+}
 
+.el-drawer__wrapper .el-drawer {
 
+  pointer-events: auto;
 
+}
 
+/* 新建表格tab ...限制宽度 */
 
+.sheet-modal .el-tabs__item {
 
+  max-width: 400px;
 
+  overflow: hidden;
 
+  padding: 0 15px 0 10px;
 
+  text-overflow: ellipsis;
 
+}
 
+/* 使用element 滚动条样式 */
 
+::-webkit-scrollbar {
 
+  z-index: 11;
 
+  width: 6px;
 
+  height: 6px;
 
+}
 
+::-webkit-scrollbar-thumb {
 
+  border-radius: 5px;
 
+  width: 6px;
 
+  background: #b4bccc;
 
+}
 
+::-webkit-scrollbar-corner {
 
+  background: #fff;
 
+}
 
+::-webkit-scrollbar-track {
 
+  background: #fff;
 
+}
 
+::-webkit-scrollbar-track-piece {
 
+  background: #fff;
 
+  width: 6px;
 
+}
 
+.ribbon-button-lock {
 
+  background-image: url('../images/icons/lock.png');
 
+  background-size: 100% 100% !important;
 
+}
 
+.ribbon-button-unlock {
 
+  background-image: url('../images/icons/unlock.png');
 
+  background-size: 100% 100% !important;
 
+}
 
+.ribbon-button-tags {
 
+  background-image: url('../images/icons/tags.png');
 
+  background-size: 100% 100% !important;
 
+}
 
+.ribbon-button-check {
 
+  background-image: url('../images/icons/check.png');
 
+  background-size: 100% 100% !important;
 
+}
 
+.ribbon-button-clear-source {
 
+  background-image: url('../images/icons/clear.png');
 
+  background-size: 100% 100% !important;
 
+}
 
+.ribbon-button-select {
 
+  background-image: url('../images/icons/select.png');
 
+  background-size: 100% 100% !important;
 
+}
 
+
 
+.gc-ribbon-bar .ribbon-button-item.ribbon-bigbutton {
 
+  min-width: 40px;
 
+  max-width: 60px;
 
+  min-height: 0;
 
+}
 
+.grid-box {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  border-left: 1px solid #ccc;
 
+}
 
+.grid-box > div {
 
+  width: 30px;
 
+  height: 35px;
 
+  text-align: center;
 
+  line-height: 35px;
 
+  color: #000;
 
+  border-bottom: 1px solid #ccc;
 
+  border-right: 1px solid #ccc;
 
+  border-top: 1px solid #ccc;
 
+  cursor: pointer;
 
+  font-size: 18px;
 
+}
 
+.grid-box > div:nth-child(n + 21) {
 
+  border-top: none;
 
+}
 
+.grid-box > div.checked {
 
+  background-color: #409eff;
 
+  color: #f1f1f1;
 
+}
 
+
 
+.char-tab .el-tabs__nav,
 
+.char-tab .el-tabs__content {
 
+  max-height: 300px;
 
+  overflow: auto;
 
+}
 
+.char-tab .el-tabs__item {
 
+  height: 25px;
 
+  line-height: 25px;
 
+  font-family: 'chars';
 
+}
 
+.char-input .el-input__inner {
 
+  font-family: 'chars';
 
+}
 
+.fonts {
 
+  font-family: 'chars';
 
+}
 
+.char-pop {
 
+  text-align: center;
 
+  height: 80px;
 
+  line-height: 60px;
 
+  width: 80px;
 
+  font-size: 60px;
 
+  font-family: 'chars';
 
+}
 
+
 
+/* 拖拽的线 */
 
+#box {
 
+  width: 100%;
 
+  height: 100%;
 
+  overflow: hidden;
 
+  /* background-color:royalblue; */
 
+}
 
+#resize {
 
+  width: 2px;
 
+  height: 100%;
 
+  cursor: w-resize;
 
+  background-color: #ccc;
 
+  float: left;
 
+  position: relative;
 
+}
 
+#resize2 {
 
+  height: 5px;
 
+  width: 100%;
 
+  background-color: #ccc;
 
+  cursor: n-resize;
 
+  position: relative;
 
+}
 
+#left {
 
+  width: 350px;
 
+  height: 100%;
 
+  /* background:skyblue; */
 
+  float: left;
 
+  overflow: auto;
 
+}
 
+#right {
 
+  float: right;
 
+  width: calc(100% - 352px);
 
+  height: 100%;
 
+  /* background:tomato; */
 
+  overflow: auto;
 
+}
 
+#top {
 
+  height: 300px;
 
+  width: 100%;
 
+  /* background:skyblue; */
 
+  overflow: auto;
 
+}
 
+
 
+#bottom {
 
+  height: calc(100% - 305px);
 
+  width: 100%;
 
+  /* background:tomato; */
 
+  overflow: auto;
 
+}
 
+.resImg {
 
+  position: absolute;
 
+  top: 0;
 
+  bottom: 0;
 
+  margin: auto;
 
+  width: 12px;
 
+  height: 60px;
 
+  cursor: pointer;
 
+}
 
+#resize2 .resImg {
 
+  position: absolute;
 
+  left: 0;
 
+  right: 0;
 
+  margin: auto;
 
+  height: 12px;
 
+  width: 60px;
 
+  cursor: pointer;
 
+}
 
+.left-tree {
 
+  flex: 0 0 300px;
 
+  padding: 10px 10px 10px 0;
 
+  border: 1px solid #ccc;
 
+  min-height: 400px;
 
+  height: 100%;
 
+  /* margin-right: 15px;
 
+  border-radius: 5px; */
 
+  overflow: auto;
 
+}
 
+.el-table tbody tr:hover > td {
 
+  background-color: unset !important;
 
+}
 
+.el-table .cell {
 
+  line-height: 1.2;
 
+}
 
+.capacity-cell {
 
+  background-color: rgb(212, 243, 255);
 
+  position: relative;
 
+}
 
+.capacity-cell:hover .xuan-btn {
 
+  display: block;
 
+}
 
+.xuan-btn {
 
+  position: absolute;
 
+  top: 0;
 
+  bottom: 0;
 
+  margin: auto;
 
+  right: 0;
 
+  padding: 4px;
 
+  display: none;
 
+}
 
+.bottom-cell {
 
+  position: relative;
 
+  padding-top: 20px !important;
 
+}
 
+.inline-input .el-input__inner {
 
+  padding: 0 4px;
 
+}
 
+.scheme-table.el-table .cell {
 
+  padding: 0 5px;
 
+  line-height: 1.3;
 
+}
 
+.bottom-cell:hover .opration {
 
+  display: block;
 
+}
 
+.opration {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  display: block;
 
+  border: 1px solid #ccc;
 
+  line-height: 1;
 
+  display: none;
 
+}
 
+.opration i {
 
+  cursor: pointer;
 
+  font-size: 14px;
 
+  color: #409eff;
 
+  border: 1px solid #409eff;
 
+}
 
+.branch-list .el-radio-group {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+}
 
+.branch-list .el-radio-group label {
 
+  flex: 0 0 50%;
 
+  margin-right: 0px;
 
+  margin: 6px 0;
 
+}
 
+.input-number input::-webkit-outer-spin-button {
 
+  -webkit-appearance: none;
 
+}
 
+.input-number input::-webkit-inner-spin-button {
 
+  -webkit-appearance: none;
 
+}
 
+.input-number input[type='number'] {
 
+  -moz-appearance: textfield;
 
+}
 
+/* table 行内编辑使用 */
 
+.item_input {
 
+  display: none;
 
+}
 
+.item_input .el-input__inner {
 
+  padding: 0px 2px;
 
+  height: 18px;
 
+  line-height: 18px;
 
+}
 
+.text-overflow {
 
+  overflow: hidden;
 
+  text-overflow: ellipsis;
 
+  white-space: nowrap;
 
+}
 
+.is-tooltipStyle {
 
+  max-width: 20%;
 
+  color: #fff;
 
+  background-color: #444040;
 
+}

File diff suppressed because it is too large
+ 0 - 0
cokingCoal/styles/element-ui@2.15.9.css


+ 260 - 0
cokingCoal/styles/investHome.css
Vedi File 

@@ -0,0 +1,260 @@
 
+*,
 
+*: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/page-bg.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/header-bg.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  color: #0bf1ff;
 
+  text-align: center;
 
+  font-size: 25px;
 
+  font-weight: 600;
 
+}
 
+.main {
 
+  padding: 15px;
 
+  display: flex;
 
+  height: calc(100% - 70px);
 
+  background: url('../images/content-bg.png') no-repeat center bottom;
 
+  background-size: 80%;
 
+  display: flex;
 
+  padding-bottom: 65px;
 
+}
 
+.left,
 
+.right {
 
+  flex: 3;
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+.left .my-panel,
 
+.right .my-panel {
 
+  background-color: #0050943f;
 
+  height: 100%;
 
+  overflow: hidden;
 
+}
 
+.dv-border-box-8 {
 
+  margin-bottom: 10px;
 
+}
 
+.center {
 
+  flex: 4;
 
+}
 
+.center .top {
 
+  height: 90px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+.center .top .box {
 
+  flex: 1;
 
+  margin: 0 10px;
 
+  background-color: #0050943f;
 
+  display: flex;
 
+  align-items: center;
 
+  padding-left: 15px;
 
+}
 
+.box > div {
 
+  margin-left: 10px;
 
+}
 
+.box > img {
 
+  width: 70px;
 
+}
 
+.box > div p {
 
+  font-size: 16px;
 
+  color: #e1e3ef;
 
+}
 
+.box > div span {
 
+  display: inline-block;
 
+  font-size: 28px;
 
+  margin-right: 5px;
 
+  font-weight: 600;
 
+  margin-top: 5px;
 
+}
 
+.footer {
 
+  position: fixed;
 
+  bottom: 0;
 
+  padding: 10px;
 
+  display: flex;
 
+  background-color: rgba(0, 0, 0, 0.5);
 
+  width: 100%;
 
+}
 
+.footer a {
 
+  flex: 1;
 
+  height: 40px;
 
+  line-height: 40px;
 
+  text-align: center;
 
+  color: #fff;
 
+  background: url('../images/footer-item.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.footer a:hover {
 
+  background: url('../images/footer-item-checked.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.my-panel .content {
 
+  height: calc(100% - 60px);
 
+}
 
+.panel-title {
 
+  position: relative;
 
+  text-align: center;
 
+  height: 50px;
 
+  line-height: 50px;
 
+}
 
+.panel-title .text {
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+  color: #05fbfe;
 
+  text-shadow: 0px 2px 10px rgba(10, 30, 52, 0.48);
 
+  background: linear-gradient(0deg, #ffffff 0%, #63dcff 0%, #e0f3ff 100%);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+  position: relative;
 
+}
 
+.panel-title .text::before {
 
+  position: absolute;
 
+  content: ' ';
 
+  top: 10px;
 
+  left: -40px;
 
+  width: 30px;
 
+  height: 10px;
 
+  background: url('../images/title-left.png') no-repeat;
 
+}
 
+.panel-title .text::after {
 
+  position: absolute;
 
+  content: ' ';
 
+  top: 10px;
 
+  right: -40px;
 
+  width: 30px;
 
+  height: 10px;
 
+  background: url('../images/title-right.png') no-repeat;
 
+}
 
+.panel-title .right-opr {
 
+  position: absolute;
 
+  right: 0;
 
+  width: 80px;
 
+}
 
+.boxs {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  padding: 10px;
 
+  color: #05fbfe;
 
+}
 
+.boxs > div {
 
+  flex: 0 0 50%;
 
+  background: url('../images/left1-bg.png') no-repeat center;
 
+  background-size: 106% 124%;
 
+  padding: 20px 30px;
 
+}
 
+.boxs > div > p {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: flex-end;
 
+}
 
+.boxs > div > p:nth-child(2) {
 
+  margin-top: 10px;
 
+}
 
+.boxs .name {
 
+  color: #f3f3f3;
 
+}
 
+.boxs .change {
 
+  color: #32EDAA;
 
+}
 
+.boxs .change.up {
 
+  color: #ED3248;
 
+}
 
+.boxs .num {
 
+  font-size: 30px;
 
+  font-weight: 600;
 
+  margin-right: 5px;
 
+}
 
+.boxs .el-icon-more {
 
+  font-size: 25px;
 
+}
 
+
 
+.list {
 
+  padding: 15px;
 
+}
 
+.list .list-item {
 
+  display: flex;
 
+  margin-bottom: 15px;
 
+}
 
+.list .list-item i {
 
+  padding: 5px 10px;
 
+  color: #ffc704;
 
+  border: 1px solid #ffc704;
 
+  border-radius: 8px;
 
+  margin-right: 15px;
 
+}

+ 264 - 0
cokingCoal/styles/normalize.css
Vedi File 

@@ -0,0 +1,264 @@
 
+/* Document
 
+ * ========================================================================== */
 
+
 
+/**
 
+ * 1. Correct the line height in all browsers.
 
+ */
 
+
 
+:where(html) {
 
+  line-height: 1.15; /* 1 */
 
+}
 
+
 
+/* Sections
 
+ * ========================================================================== */
 
+
 
+/**
 
+ * Correct the font size and margin on `h1` elements within `section` and
 
+ * `article` contexts in Chrome, Edge, Firefox, and Safari.
 
+ */
 
+
 
+:where(h1) {
 
+  font-size: 2em;
 
+  margin-block-end: 0.67em;
 
+  margin-block-start: 0.67em;
 
+}
 
+
 
+/* Grouping content
 
+ * ========================================================================== */
 
+
 
+/**
 
+ * Remove the margin on nested lists in Chrome, Edge, and Safari.
 
+ */
 
+
 
+:where(dl, ol, ul) :where(dl, ol, ul) {
 
+  margin-block-end: 0;
 
+  margin-block-start: 0;
 
+}
 
+
 
+/**
 
+ * 1. Add the correct box sizing in Firefox.
 
+ * 2. Correct the inheritance of border color in Firefox.
 
+ */
 
+
 
+:where(hr) {
 
+  box-sizing: content-box; /* 1 */
 
+  color: inherit; /* 2 */
 
+  height: 0; /* 1 */
 
+}
 
+
 
+/**
 
+ * 1. Correct the inheritance and scaling of font size in all browsers.
 
+ * 2. Correct the odd `em` font sizing in all browsers.
 
+ */
 
+
 
+:where(pre) {
 
+  font-family: monospace, monospace; /* 1 */
 
+  font-size: 1em; /* 2 */
 
+}
 
+
 
+/* Text-level semantics
 
+ * ========================================================================== */
 
+
 
+/**
 
+ * Add the correct text decoration in Safari.
 
+ */
 
+
 
+:where(abbr[title]) {
 
+  text-decoration: underline;
 
+  text-decoration: underline dotted;
 
+}
 
+
 
+/**
 
+ * Add the correct font weight in Chrome, Edge, and Safari.
 
+ */
 
+
 
+:where(b, strong) {
 
+  font-weight: bolder;
 
+}
 
+
 
+/**
 
+ * 1. Correct the inheritance and scaling of font size in all browsers.
 
+ * 2. Correct the odd `em` font sizing in all browsers.
 
+ */
 
+
 
+:where(code, kbd, samp) {
 
+  font-family: monospace, monospace; /* 1 */
 
+  font-size: 1em; /* 2 */
 
+}
 
+
 
+/**
 
+ * Add the correct font size in all browsers.
 
+ */
 
+
 
+:where(small) {
 
+  font-size: 80%;
 
+}
 
+
 
+/* Tabular data
 
+ * ========================================================================== */
 
+
 
+/**
 
+ * 1. Correct table border color in Chrome, Edge, and Safari.
 
+ * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 
+ */
 
+
 
+:where(table) {
 
+  border-color: currentColor; /* 1 */
 
+  text-indent: 0; /* 2 */
 
+}
 
+
 
+/* Forms
 
+ * ========================================================================== */
 
+
 
+/**
 
+ * Remove the margin on controls in Safari.
 
+ */
 
+
 
+:where(button, input, select) {
 
+  margin: 0;
 
+}
 
+
 
+/**
 
+ * Remove the inheritance of text transform in Firefox.
 
+ */
 
+
 
+:where(button) {
 
+  text-transform: none;
 
+}
 
+
 
+/**
 
+ * Correct the inability to style buttons in iOS and Safari.
 
+ */
 
+
 
+:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
 
+  -webkit-appearance: button;
 
+}
 
+
 
+/**
 
+ * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 
+ */
 
+
 
+:where(progress) {
 
+  vertical-align: baseline;
 
+}
 
+
 
+/**
 
+ * Remove the inheritance of text transform in Firefox.
 
+ */
 
+
 
+:where(select) {
 
+  text-transform: none;
 
+}
 
+
 
+/**
 
+ * Remove the margin in Firefox and Safari.
 
+ */
 
+
 
+:where(textarea) {
 
+  margin: 0;
 
+}
 
+
 
+/**
 
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 
+ * 2. Correct the outline style in Safari.
 
+ */
 
+
 
+:where(input[type="search" i]) {
 
+  -webkit-appearance: textfield; /* 1 */
 
+  outline-offset: -2px; /* 2 */
 
+}
 
+
 
+/**
 
+ * Correct the cursor style of increment and decrement buttons in Safari.
 
+ */
 
+
 
+::-webkit-inner-spin-button,
 
+::-webkit-outer-spin-button {
 
+  height: auto;
 
+}
 
+
 
+/**
 
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
 
+ */
 
+
 
+::-webkit-input-placeholder {
 
+  color: inherit;
 
+  opacity: 0.54;
 
+}
 
+
 
+/**
 
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 
+ */
 
+
 
+::-webkit-search-decoration {
 
+  -webkit-appearance: none;
 
+}
 
+
 
+/**
 
+ * 1. Correct the inability to style upload buttons in iOS and Safari.
 
+ * 2. Change font properties to `inherit` in Safari.
 
+ */
 
+
 
+::-webkit-file-upload-button {
 
+  -webkit-appearance: button; /* 1 */
 
+  font: inherit; /* 2 */
 
+}
 
+
 
+/**
 
+ * Remove the inner border and padding of focus outlines in Firefox.
 
+ */
 
+
 
+:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
 
+  border-style: none;
 
+  padding: 0;
 
+}
 
+
 
+/**
 
+ * Restore the focus outline styles unset by the previous rule in Firefox.
 
+ */
 
+
 
+:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
 
+  outline: 1px dotted ButtonText;
 
+}
 
+
 
+/**
 
+ * Remove the additional :invalid styles in Firefox.
 
+ */
 
+
 
+:where(:-moz-ui-invalid) {
 
+  box-shadow: none;
 
+}
 
+
 
+/* Interactive
 
+ * ========================================================================== */
 
+
 
+/*
 
+ * Add the correct styles in Safari.
 
+ */
 
+
 
+:where(dialog) {
 
+  background-color: white;
 
+  border: solid;
 
+  color: black;
 
+  height: -moz-fit-content;
 
+  height: fit-content;
 
+  left: 0;
 
+  margin: auto;
 
+  padding: 1em;
 
+  position: absolute;
 
+  right: 0;
 
+  width: -moz-fit-content;
 
+  width: fit-content;
 
+}
 
+
 
+:where(dialog:not([open])) {
 
+  display: none;
 
+}
 
+
 
+/*
 
+ * Add the correct display in all browsers.
 
+ */
 
+
 
+:where(summary) {
 
+  display: list-item;
 
+}

Some files were not shown because too many files changed in this diff