Начало Каталог Помощ
Вход
kingdee_large_screen
/
pc_kingdee_large_screen
2
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

zhb大屏3

zhbyyy преди 2 години
родител
57c99b6288
ревизия
f210889973
променени са 12 файла, в които са добавени 1973 реда и са изтрити 0 реда
Обединен изглед Покажи статистика за разликите
  1. BIN
      investment/images3/back-big.png
  2. BIN
      investment/images3/big.png
  3. BIN
      investment/images3/down-back.png
  4. BIN
      investment/images3/down.png
  5. BIN
      investment/images3/group.png
  6. BIN
      investment/images3/light.png
  7. BIN
      investment/images3/small.png
  8. 192 0
      investment/investHome3.html
  9. 777 0
      investment/js/investHome3.js
  10. 0 0
      investment/libs/datav.min2.js
  11. 227 0
      investment/libs/echarts-tooltip-carousel.js
  12. 777 0
      investment/styles/investHome3.css

BIN
investment/images3/back-big.png
Целия файл


BIN
investment/images3/big.png
Целия файл


BIN
investment/images3/down-back.png
Целия файл


BIN
investment/images3/down.png
Целия файл


BIN
investment/images3/group.png
Целия файл


BIN
investment/images3/light.png
Целия файл


BIN
investment/images3/small.png
Целия файл


+ 192 - 0
investment/investHome3.html
Целия файл 

@@ -0,0 +1,192 @@
 
+<!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/normalize.css" /> -->
 
+  <link rel="stylesheet" href="./styles/investHome3.css" />
 
+  <!-- 引入js -->
 
+  <script src="./libs/vue@2.7.10.js"></script>
 
+  <script src="./libs/datav.min2.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>
 
+        <span class="right">{{time}}</span>
 
+      </header>
 
+      <div class="main">
 
+        <div class="top">
 
+          <div class="top-left">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">投资关键指标</span>
 
+              </div>
 
+              <div class="top-left-bottom flex items-center justify-between">
 
+                <div class="top-left-bottom-left flex items-center justify-center">
 
+                  <img src="./images3/light.png" alt="">
 
+                  <div class="num">651<span style="font-size: 14px;font-weight: normal;">个</span></div>
 
+                </div>
 
+                <div class="top-left-bottom-right flex items-center">
 
+                  <div ref="tl1" style="height:100%;width: 25%;"></div>
 
+                  <div ref="tl2" style="height:100%;width: 25%;"></div>
 
+                  <div ref="tl3" style="height:100%;width: 25%;"></div>
 
+                  <div ref="tl4" style="height:100%;width: 25%;"></div>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="top-right">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">投资额完成分析</span>
 
+              </div>
 
+              <div class="top-right-bottom">
 
+                <div id="aiQuality" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+              </div>
 
+              <div class="downList  flex items-center justify-center">
 
+                <span>2023</span>
 
+                <img src="./images3/down.png" alt="">
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+        </div>
 
+        <div class="center">
 
+          <div class="center-right">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">两个转型</span>
 
+              </div>
 
+              <div class="center-right-bottom">
 
+                <div ref="cl1" style="height:100%;width: 100%;"></div>
 
+                <div class="center-right-bottom-right flex items-center justify-center flex-col">
 
+                  <img src="./images3/group.png" alt="">
 
+                  <div class="center-right-bottom-right-text">24.12<span style="font-size: 14px;">亿</span></div>
 
+                  <div style="height:20px;line-height: 20px">数字转型实际投资</div>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="center-center">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">重点项目进度</span>
 
+              </div>
 
+              <div class="center-center-bottom">
 
+                <div>
 
+                  <div><span style="color:#3AF7FE;margin-right: 10px;">按进度排序</span><span
 
+                      style="color:#B889EA">偏差率排序</span></div>
 
+                  <div class="center-center-bottom-list">
 
+                    <p>煤焦化矿井升级改造项目</p>
 
+                    <el-progress percentage="80" color="#FBE139" :show-text="true"></el-progress>
 
+                    <p>煤焦化矿井升级改造项目</p>
 
+                    <el-progress percentage="30" color="#FBE139" :show-text="true"></el-progress>
 
+                    <p>煤焦化矿井升级改造项目</p>
 
+                    <el-progress percentage="60" color="#FBE139" :show-text="true"></el-progress>
 
+                  </div>
 
+                </div>
 
+                <div class="center-center-bottom-right" style="margin-right: 10px;">
 
+                  <div></div>
 
+                  <div>总体偏离度</div>
 
+                  <div>+12%</div>
 
+                  <div>-5%</div>
 
+                  <div>+18%</div>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="center-left">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">项目风险画像</span>
 
+              </div>
 
+              <div class="center-left-bottom">
 
+                <div ref="cr1" style="height:100%;width: 100%;"></div>
 
+                <div class="flex justify-center items-center">
 
+                  <div class="center-left-bottom-list flex justify-center items-center flex-col">
 
+                    <span>维度</span>
 
+                    <span>进度</span>
 
+                    <span>质量</span>
 
+                    <span>预算</span>
 
+                    <span>证照</span>
 
+                    <span>合同</span>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+        </div>
 
+        <div class="footer">
 
+          <div class="footer-right">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">五个一体化</span>
 
+              </div>
 
+              <div class="footer-right-bottom flex justify-around flex-col">
 
+                <p>煤焦化矿井升级改造项目</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="80" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">230.10亿</span>
 
+                </div>
 
+                <p>煤炭和新能源一体化</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="50" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">200.1亿</span>
 
+                </div>
 
+                <p>煤炭和新能源一体化</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="20" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">160亿</span>
 
+                </div>
 
+                <p>煤炭和数字技术一体化</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="40" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">143亿</span>
 
+                </div>
 
+                <p>煤炭和降碳一体化</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="10" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">140亿</span>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="footer-center">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">项目成本分析</span>
 
+              </div>
 
+              <div class="footer-center-bottom">
 
+                <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="footer-left">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">风险事项列表</span>
 
+              </div>
 
+              <div class="footer-left-bottom">
 
+                <dv-scroll-board :config="config5" style="width: 100%; height: 80%" />
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </dv-full-screen-container>
 
+  </div>
 
+  <script src="./js/investHome3.js"></script>
 
+</body>
 
+
 
+</html>

+ 777 - 0
investment/js/investHome3.js
Целия файл 

@@ -0,0 +1,777 @@
 
+let app = new Vue({
 
+  el: '#app',
 
+  data () {
 
+    return {
 
+      time: '',
 
+      timer: '',
 
+      config5: {
 
+        waitTime: 2000,
 
+        header: ["风险类型", "风险说明", '提出人', '时间', '风险等级'],
 
+        data: [
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="blue">一级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="yellow">二级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="pink">三级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="blue">一级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="yellow">二级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="pink">三级</span></span>']
 
+        ],
 
+        align: ["center", "center", "center", "center", "center"],
 
+        headerBGC: "#1C537D",
 
+        oddRowBGC: "#09335C"
 
+      },
 
+    }
 
+  },
 
+  created () {
 
+    this.time = formatDate()
 
+    this.timer = setInterval(() => {
 
+      this.time = formatDate()
 
+    }, 1000)
 
+  },
 
+  beforeDestroy () {
 
+    if (this.timer) {
 
+      clearInterval(this.timer);
 
+    }
 
+  },
 
+  mounted () {
 
+    setTimeout(() => {
 
+      this.initChartL1()
 
+      this.initChartL2()
 
+      this.initChartL3()
 
+      this.initChartL4()
 
+      this.initChartL5()
 
+      this.initChartL6()
 
+      this.aiQualityECharts();
 
+      this.aiQualityECharts2();
 
+    })
 
+  },
 
+  methods: {
 
+    initChartL1 () {
 
+      let myChart = echarts.init(this.$refs['tl1'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#6682f5', '#40A9FF'],
 
+        legend: {
 
+          // icon: 'circle',
 
+          bottom: 0,
 
+          left: 'center',
 
+          // itemHeight: 10,
 
+          // itemWidth: 10,
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "投资类别",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL2 () {
 
+      let myChart = echarts.init(this.$refs['tl2'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#40A9FF', '#45DAD1'],
 
+        legend: {
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "投资阶段",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 2500,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL3 () {
 
+      let myChart = echarts.init(this.$refs['tl3'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#40A9FF', '#8BA2FF'],
 
+        legend: {
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "管理类别",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 3000,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL4 () {
 
+      let myChart = echarts.init(this.$refs['tl4'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#45DAD1', '#40A9FF'],
 
+        legend: {
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "投资领域",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 3500,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL5 () {
 
+      let myChart = echarts.init(this.$refs['cl1'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#45DAD1', '#40A9FF'],
 
+        legend: {
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "投资情况",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 4000,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL6 () {
 
+      let myChart = echarts.init(this.$refs['cr1'])
 
+      option = {
 
+        title: {
 
+          text: ''
 
+        },
 
+        legend: {
 
+          data: ['类型1', '类型2', '类型3', '类型4', '类型5'],
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
 
+          show: true,
 
+          areaStyle: { // 分隔区域的样式设置。
 
+            color: ['yellow'],
 
+            // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
 
+          }
 
+        },
 
+        radar: {
 
+          // shape: 'circle',
 
+          center: ['50%', '50%'],
 
+          radius: 60,
 
+          indicator: [
 
+            { name: '类型1', max: 100000 },
 
+            { name: '类型2', max: 100000 },
 
+            { name: '类型3', max: 100000 },
 
+            { name: '类型4', max: 100000 },
 
+            { name: '类型5', max: 100000 },
 
+          ],
 
+          axisLine: {  // 设置雷达图中间射线的颜色
 
+            lineStyle: {
 
+              color: '#c0c0c0',
 
+            },
 
+          },
 
+          splitLine: { //网格颜色设置
 
+            show: true,
 
+            lineStyle: {
 
+              width: 1,
 
+              color: '#1e83e4',
 
+            },
 
+          },
 
+          splitArea: {  //设置图表颜色，show的值为true
 
+            show: false,
 
+            areaStyle: {
 
+              // color:"#c1ddf8", //一般设置方式
 
+              //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
 
+              //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
 
+              //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                { offset: 0, color: '#c1ddf8' }, // 0% 处的颜色 
+                { offset: 1, color: '#1e83e4' }// 100% 处的颜色
 
+              ], false)
 
+            }
 
+          }
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'radar',
 
+            symbol: 'circle', // 单个数值点的样式，还可以取值'rect','angle'等
 
+            symbolSize: 0, // 数值点的大小
 
+            data: [
 
+              {
 
+                value: [4200, 3000, 20000, 35000, 50000, 18000],
 
+                name: '类型1',
 
+                itemStyle: { //该数值区域样式设置
 
+                  normal: {
 
+                    color: '#2CC6FF', //背景颜色，还需设置areaStyle
 
+                    lineStyle: {
 
+                      color: '#2CC6FF', //边框颜色
 
+                    },
 
+                  },
 
+                },
 
+                label: {  //显示value中具体的数值
 
+                  normal: {
 
+                    show: false,
 
+                    textStyle: {  //更改数值样式
 
+                      color: '#43EDE3'
 
+                    }
 
+                  },
 
+                },
 
+                areaStyle: { //设置区域背景颜色透明度
 
+                  normal: {
 
+                    width: 1,
 
+                    opacity: 0.8,
 
+                  },
 
+                },
 
+              },
 
+              {
 
+                value: [8000, 3000, 38000, 76000, 32000, 71000],
 
+                name: '类型2',
 
+                itemStyle: { //该数值区域样式设置
 
+                  normal: {
 
+                    color: '#D87AFF', //背景颜色，还需设置areaStyle
 
+                    lineStyle: {
 
+                      color: '#2CC6FF', //边框颜色
 
+                    },
 
+                  },
 
+                },
 
+                label: {  //显示value中具体的数值
 
+                  normal: {
 
+                    show: false,
 
+                    textStyle: {  //更改数值样式
 
+                      color: '#43EDE3'
 
+                    }
 
+                  },
 
+                },
 
+                areaStyle: { //设置区域背景颜色透明度
 
+                  normal: {
 
+                    width: 1,
 
+                    opacity: 0.8,
 
+                  },
 
+                },
 
+              }
 
+            ]
 
+          }
 
+        ]
 
+      };
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    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: {
 
+          name: '亿元',
 
+          nameTextStyle: {//y轴上方单位的颜色
 
+            color: '#fff',
 
+          },
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: false,
 
+            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: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#897DFF",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+          {
 
+            name: "实际投资额",
 
+            type: "bar",
 
+            data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#FED95B",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+        ],
 
+        legend: {
 
+          data: ["计划投资额", "实际投资额"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    },
 
+    aiQualityECharts2 () {
 
+      let chart = echarts.init(document.getElementById("aiQuality2"));
 
+      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: {
 
+          name: '亿元',
 
+          nameTextStyle: {//y轴上方单位的颜色
 
+            color: '#fff',
 
+          },
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: false,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "预算金额",
 
+            type: "bar",
 
+            data: [843, 987, 126, 723, 569],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#40A9FF",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+          {
 
+            name: "实际金额",
 
+            type: "bar",
 
+            data: [675, 743, 724, 733, 725],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#45DAD1",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+        ],
 
+        legend: {
 
+          data: ["预算金额", "实际金额"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    }
 
+  },
 
+})

Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
investment/libs/datav.min2.js


+ 227 - 0
investment/libs/echarts-tooltip-carousel.js
Целия файл 

@@ -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);

+ 777 - 0
investment/styles/investHome3.css
Целия файл 

@@ -0,0 +1,777 @@
 
+*,
 
+*: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 {
 
+  position: relative;
 
+  height: 70px;
 
+  line-height: 70px;
 
+  background: url('../images/header-bg.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  text-align: center;
 
+  font-weight: bold;
 
+  font-size: 32px;
 
+  font-weight: 600;
 
+}
 
+.my-header span {
 
+  background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+}
 
+.my-header span.right {
 
+  position: absolute;
 
+  right: 60px;
 
+  top: 0px;
 
+  font-size: 16px;
 
+}
 
+.main {
 
+  padding: 15px;
 
+  height: calc(100vh - 25px);
 
+  background: url('../images/back-big.png') no-repeat center bottom;
 
+  padding-bottom: 65px;
 
+  display: grid;
 
+  grid-template-rows: repeat(3, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.top {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.center,
 
+.footer {
 
+  display: grid;
 
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.top-left,
 
+.top-right {
 
+  height: 100%;
 
+  background: url('../images3/big.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  position: relative;
 
+}
 
+.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;
 
+}
 
+.top-left-bottom,
 
+.top-right-bottom,
 
+.center-right-bottom,
 
+.center-center-bottom,
 
+.center-left-bottom,
 
+.footer-right-bottom,
 
+.footer-center-bottom {
 
+  height: calc(100% - 50px);
 
+  width: 100%;
 
+  padding: 10px;
 
+}
 
+.top-left-bottom-left {
 
+  height: 100%;
 
+  width: 20%;
 
+  background: url('../images3/big.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  position: relative;
 
+}
 
+.top-left-bottom-right {
 
+  height: 100%;
 
+  width: calc(80% - 10px);
 
+  background: url('../images3/big.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.light {
 
+  width: 120px;
 
+  height: 100px;
 
+}
 
+.top-left-bottom-left > .num {
 
+  color: #69c0ff;
 
+  font-size: 20px;
 
+  font-weight: bold;
 
+  position: absolute;
 
+  top: 50px;
 
+}
 
+.downList {
 
+  background: url('../images3/down-back.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  width: 85px;
 
+  height: 30px;
 
+  position: absolute;
 
+  right: 10px;
 
+  top: 10px;
 
+}
 
+.downList > img {
 
+  width: 11px;
 
+  height: 7px;
 
+  margin-left: 10px;
 
+}
 
+.center-right,
 
+.center-center,
 
+.center-left,
 
+.footer-right,
 
+.footer-center,
 
+.footer-left {
 
+  background: url('../images3/small.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.center-right-bottom {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.center-right-bottom > div,
 
+.center-center-bottom > div {
 
+  background: url('../images3/small.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.center-right-bottom-right {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: relative;
 
+}
 
+.center-right-bottom-right-text {
 
+  color: #40a9ff;
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+  position: absolute;
 
+  width: 100px;
 
+  height: 40px;
 
+  line-height: 40px;
 
+  text-align: center;
 
+  left: calc(50% - 50px);
 
+  top: calc(50% - 30px);
 
+}
 
+.center-center-bottom,
 
+.center-left-bottom {
 
+  width: 100%;
 
+  display: grid;
 
+  grid-template-columns: 60% 40%;
 
+  gap: 10px;
 
+}
 
+.center-center-bottom > div:nth-child(1) > div:nth-child(1) {
 
+  height: 20%;
 
+  padding-bottom: 10px;
 
+}
 
+.center-center-bottom-list {
 
+  height: 80%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: space-between;
 
+}
 
+.center-center-bottom-list .el-progress-bar__inner {
 
+  background: linear-gradient(to right, #092854, #00aeff);
 
+}
 
+.center-center-bottom-list .el-progress__text {
 
+  color: #fff;
 
+}
 
+.el-progress {
 
+  border: 1px solid #115079;
 
+}
 
+.center-center-bottom > div {
 
+  padding: 10px;
 
+}
 
+.center-center-bottom-right {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  position: relative;
 
+}
 
+.center-center-bottom-right > div:nth-child(1) {
 
+  border: 1px dashed #00ffff;
 
+  width: 1px;
 
+  height: 80%;
 
+}
 
+.center-center-bottom-right > div:nth-child(2) {
 
+  position: absolute;
 
+  top: calc(20% - 30px);
 
+  left: calc(50% - 95px);
 
+  background-color: #166592;
 
+  color: #2cc6ff;
 
+  width: 190px;
 
+  height: 20px;
 
+  line-height: 20px;
 
+  text-align: center;
 
+}
 
+.center-center-bottom-right > div:nth-child(3) {
 
+  position: absolute;
 
+  top: 60px;
 
+  left: 117px;
 
+  background-color: #166592;
 
+  color: #2cc6ff;
 
+  width: 60px;
 
+  height: 20px;
 
+  line-height: 20px;
 
+  text-align: center;
 
+}
 
+.center-center-bottom-right > div:nth-child(4) {
 
+  position: absolute;
 
+  top: 100px;
 
+  left: 55px;
 
+  background-color: #416d63;
 
+  color: #ffd802;
 
+  width: 60px;
 
+  height: 20px;
 
+  line-height: 20px;
 
+  text-align: center;
 
+}
 
+.center-center-bottom-right > div:nth-child(5) {
 
+  position: absolute;
 
+  top: 140px;
 
+  left: 117px;
 
+  background-color: #166592;
 
+  color: #2cc6ff;
 
+  width: 60px;
 
+  height: 20px;
 
+  line-height: 20px;
 
+  text-align: center;
 
+}
 
+.center-left-bottom-list {
 
+  border: 1px solid #06345e;
 
+}
 
+.center-left-bottom-list > span {
 
+  display: inline-block;
 
+  padding: 5px 30px;
 
+  cursor: pointer;
 
+}
 
+.center-left-bottom-list > span:hover {
 
+  color: #2abbff;
 
+}
 
+.center-left-bottom-list > span:nth-child(odd) {
 
+  background-color: #1a426c;
 
+}
 
+.footer-right-bottom {
 
+  padding: 0 50px !important;
 
+  padding-bottom: 20px !important;
 
+}
 
+.footer-right-bottom .el-progress-bar__inner {
 
+  background: linear-gradient(to right, #092854, #00aeff);
 
+}
 
+.footer-right-bottom .el-progress {
 
+  width: 85%;
 
+}
 
+.el-progress-bar__outer {
 
+  background-color: #6fa0ce;
 
+}
 
+.blue {
 
+  color: #3af7fe;
 
+}
 
+.yellow {
 
+  color: #ffd200;
 
+}
 
+.pink {
 
+  color: #d87aff;
 
+}
 
+.footer-left-bottom {
 
+  height: 100%;
 
+  padding: 10px;
 
+  font-size: 14px;
 
+}
 
+/* 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;
 
+}

Някои файлове не бяха показани, защото твърде много файлове са промени