ソースを参照

Merge branch 'main' of https://git.sxidc.com/kingdee_large_screen/pc_kingdee_large_screen

l1448442195@163.com 1 年間 前
コミット
bc842ae321

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


+ 20 - 38
investment/investHome.html

@@ -15,6 +15,8 @@
     <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/vue-seamless-scroll.min.js"></script>
+    <script src="./libs/echarts-tooltip-carousel.js"></script>
   </head>
   <body>
     <div id="app">
@@ -50,7 +52,7 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">1324.08</span>亿</i>
+                        <i><span class="num">{{numFormat(1324.08)}}</span>亿</i>
                         <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                       </p>
                     </div>
@@ -60,7 +62,7 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">442</span>个</i>
+                        <i><span class="num">{{numFormat(442)}}</span>个</i>
                         <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                       </p>
                     </div>
@@ -70,7 +72,7 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">1169.91</span>亿</i>
+                        <i><span class="num">{{numFormat(1169.91)}}</span>亿</i>
                         <!-- <span class="change up"><img src="./images/up.png" /> 12.1%</span> -->
                       </p>
                     </div>
@@ -80,7 +82,7 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">154.17</span>亿</i>
+                        <i><span class="num">{{numFormat(154.17)}}</span>亿</i>
                         <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                       </p>
                     </div>
@@ -169,40 +171,20 @@
                 <div class="panel-title">
                   <span class="text">投资额度分析</span>
                 </div>
-                <ul class="list content">
-                  <li class="list-item">
-                    <i>NO.1</i>
-                    <div class="flex1">
-                      <p>山西焦煤</p>
-                      <el-progress percentage="80" stroke-width="10" :show-text="false"></el-progress>
-                    </div>
-                    <span class="value">234亿</span>
-                  </li>
-                  <li class="list-item">
-                    <i>NO.2</i>
-                    <div class="flex1">
-                      <p>晋能控股</p>
-                      <el-progress percentage="70" stroke-width="10" :show-text="false"></el-progress>
-                    </div>
-                    <span class="value">234亿</span>
-                  </li>
-                  <li class="list-item">
-                    <i>NO.3</i>
-                    <div class="flex1">
-                      <p>华阳新材</p>
-                      <el-progress percentage="60" stroke-width="10" :show-text="false"></el-progress>
-                    </div>
-                    <span class="value">234亿</span>
-                  </li>
-                  <li class="list-item">
-                    <i>NO.4</i>
-                    <div class="flex1">
-                      <p>陆港国际</p>
-                      <el-progress percentage="50" stroke-width="10" :show-text="false"></el-progress>
-                    </div>
-                    <span class="value">234亿</span>
-                  </li>
-                </ul>
+                <div class="content">
+                  <vue-seamless-scroll :data="amountList" :class-option="classOption" class="warp">
+                    <ul class="list">
+                      <li class="list-item" v-for="(item,index) in amountList" ::key="index">
+                        <i>NO.{{index+1}}</i>
+                        <div class="flex1">
+                          <p>{{item.name}}</p>
+                          <el-progress :percentage="item.value / amountTotal * 100" stroke-width="10" :show-text="false"></el-progress>
+                        </div>
+                        <span class="value">{{item.value}}亿</span>
+                      </li>
+                    </ul>
+                  </vue-seamless-scroll>
+                </div>
               </div>
             </dv-border-box-8>
             <dv-border-box-8 :dur="12"

+ 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>

+ 72 - 4
investment/js/investHome.js

@@ -49,9 +49,46 @@ let app = new Vue({
         { name: '水控集团' },
         { name: '太重集团' },
       ],
+      amountList: [
+        {
+          name: '山西焦煤',
+          value: '283.42'
+        },
+        {
+          name: '晋能控股',
+          value: '622.15'
+        },
+        {
+          name: '华阳新材',
+          value: '251.91'
+        },
+        {
+          name: '潞安化工',
+          value: '163.19'
+        },
+        {
+          name: '华新燃气',
+          value: '46.44'
+        },
+        {
+          name: '华远陆港',
+          value: '32.07'
+        },
+        {
+          name: '汾酒集团',
+          value: '49.99'
+        },
+      ],
+      amountTotal: 0,
+      classOption: {
+        step: 0.5
+      }
     }
   },
   created () {
+    this.amountList.map(item=> {
+      this.amountTotal += Number(item.value)
+    })
     this.time = formatDate()
     this.timer = setInterval(() => {
       this.time = formatDate()
@@ -70,6 +107,25 @@ let app = new Vue({
     this.initChinaChart()
   },
   methods: {
+    numFormat (value) {
+      if (!value) return '0'
+      var intPart = Number(value).toFixed(0) // 获取整数部分
+      var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
+      var floatPart = '.00' // 预定义小数部分
+      var value2Array = value.toString().split('.')
+      // =2表示数据有小数位
+      if (value2Array.length === 2) {
+        floatPart = value2Array[1].toString() // 拿到小数部分
+        if (floatPart.length === 1) {
+          // 补0
+          return intPartFormat + '.' + floatPart + '0'
+        } else {
+          return intPartFormat + '.' + floatPart
+        }
+      } else {
+        return intPartFormat
+      }
+    },
     convertData (data) {
       var res = []
       for (var i = 0; i < data.length; i++) {
@@ -331,8 +387,7 @@ let app = new Vue({
       })
       // <p>当前阶段:<span>可论证阶段</span></p>
       // <p>时间节点:<span>2021.10-2022.10</span></p>
-
-      myChart.setOption({
+      let option = {
         tooltip: {
           padding: 15,
           enterable: true,
@@ -429,7 +484,7 @@ let app = new Vue({
             type: 'map',
             map: this.mapName,
             geoIndex: 0,
-            aspectScale: 0.75, //长宽比
+            aspectScale: 1.5, //长宽比
             showLegendSymbol: true, // 存在legend时显示
             label: {
               normal: {
@@ -519,7 +574,8 @@ let app = new Vue({
             data: moveLine.normal,
           },
         ],
-      })
+      }
+      myChart.setOption(option)
     },
     initChartL1 () {
       let myChart = echarts.init(this.$refs['echartL1'])
@@ -558,6 +614,10 @@ let app = new Vue({
         ],
       }
       myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
     },
     initChartL2 () {
       let myChart = echarts.init(this.$refs['echartL2'])
@@ -730,6 +790,10 @@ let app = new Vue({
         ],
       }
       myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
     },
     initChartR1 () {
       let myChart = echarts.init(this.$refs['echartR1'])
@@ -857,6 +921,10 @@ let app = new Vue({
         ],
       }
       myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
     },
   },
 })

+ 19 - 19
investment/js/investHome2.js

@@ -1,6 +1,6 @@
 let app = new Vue({
   el: '#app',
-  data() {
+  data () {
     return {
       year: '2022',
       time: '',
@@ -49,18 +49,18 @@ let app = new Vue({
       ],
     }
   },
-  created() {
+  created () {
     this.time = formatDate()
     this.timer = setInterval(() => {
       this.time = formatDate()
     }, 1000)
   },
-  beforeDestroy() {
+  beforeDestroy () {
     if (this.timer) {
       clearInterval(this.timer);
     }
   },
-  mounted() {
+  mounted () {
     // 左侧图表
     setTimeout(() => {
       this.initChartL1()
@@ -74,7 +74,7 @@ let app = new Vue({
     }, 0)
   },
   methods: {
-    convertData(data) {
+    convertData (data) {
       var res = []
       for (var i = 0; i < data.length; i++) {
         var geoCoord = this.geoCoordMap[data[i].name]
@@ -87,7 +87,7 @@ let app = new Vue({
       }
       return res
     },
-    initChinaChart() {
+    initChinaChart () {
       var data = [
         { name: '吕梁市', value: 150 },
         { name: '大同市', value: 190 },
@@ -523,7 +523,7 @@ let app = new Vue({
         ],
       })
     },
-    initChartL1() {
+    initChartL1 () {
       let myChart = echarts.init(this.$refs['echartL1'])
       let option = {
         title: {
@@ -552,7 +552,7 @@ let app = new Vue({
           {
             name: '',
             type: 'pie',
-            radius: ['50%','70%',],
+            radius: ['50%', '70%',],
             center: ['50%', '45%'],
             itemStyle: {
               normal: {
@@ -582,7 +582,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartL2() {
+    initChartL2 () {
       let myChart = echarts.init(this.$refs['echartL2'])
       var value = 0.45;
       var data = [value];
@@ -653,7 +653,7 @@ let app = new Vue({
       }
       myChart.setOption(option)
     },
-    initChartL3() {
+    initChartL3 () {
       let myChart = echarts.init(this.$refs['echartL3'])
       let option = {
         tooltip: {
@@ -778,7 +778,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartL4() {
+    initChartL4 () {
       let myChart = echarts.init(this.$refs['echartL4'])
       let option = {
         title: {
@@ -834,7 +834,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR1() {
+    initChartR1 () {
       let myChart = echarts.init(this.$refs['echartR1'])
       let option = {
         title: {
@@ -890,7 +890,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR2() {
+    initChartR2 () {
       let myChart = echarts.init(this.$refs['echartR2'])
       let option = {
         title: {
@@ -946,7 +946,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR3() {
+    initChartR3 () {
       let myChart = echarts.init(this.$refs['echartR3'])
       let option = {
         title: {
@@ -1037,7 +1037,7 @@ let app = new Vue({
             },
             itemStyle: {
               normal: {
-                color: 'red'
+                color: '#45DAD1'
               }
             },
             data: [
@@ -1066,7 +1066,7 @@ let app = new Vue({
             },
             itemStyle: {
               normal: {
-                color: '#C94C15'
+                color: '#40A9FF'
               }
             },
             data: [
@@ -1084,7 +1084,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR4() {
+    initChartR4 () {
       let myChart = echarts.init(this.$refs['echartR4'])
       let option = {
         title: {
@@ -1175,7 +1175,7 @@ let app = new Vue({
             },
             itemStyle: {
               normal: {
-                color: 'red'
+                color: '#45DAD1'
               }
             },
             data: [
@@ -1204,7 +1204,7 @@ let app = new Vue({
             },
             itemStyle: {
               normal: {
-                color: '#C94C15'
+                color: '#40A9FF'
               }
             },
             data: [

+ 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


ファイルの差分が大きいため隠しています
+ 0 - 0
investment/libs/vue-seamless-scroll.min.js


+ 4 - 0
investment/styles/investHome.css

@@ -415,3 +415,7 @@ a {
   font-weight: 600 !important;
   color: #2ABBFF;
 }
+.warp {
+  height: 190px;
+  overflow: hidden;
+}

+ 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;
+}

+ 8 - 8
manpower/index.html

@@ -26,7 +26,7 @@
 </head>
 
 <body>
-  <div id="app" v-cloak>
+  <div id="app" v-cloak @click="showTip = false">
     <header class="my-header">
       <span>国有资本数智化平台人力资源系统</span>
       <span class="right">{{time}}</span>
@@ -37,7 +37,7 @@
           <div class="my-panel">
             <div class="panel-title flex-between ">
               <span class="text">定机构</span>
-              <span class="tip-window" @click="handleShowTip(0)">智能分析</span>
+              <span class="tip-window" @click.stop="handleShowTip(0)">智能分析</span>
             </div>
             <div class="content flex">
               <div ref="echartL1" style="flex: 1;height: 100%;"></div>
@@ -49,7 +49,7 @@
           <div class="my-panel">
             <div class="panel-title flex-between">
               <span class="text">定职数</span>
-              <span class="tip-window" @click="handleShowTip(1)">智能分析</span>
+              <span class="tip-window" @click.stop="handleShowTip(1)">智能分析</span>
             </div>
             <div class="content flex">
               <div ref="echartL3" style="flex: 1;height: 100%;"></div>
@@ -64,7 +64,7 @@
           <div class="my-panel">
             <div class="panel-title flex-between">
               <span class="text">定员额</span>
-              <span class="tip-window" @click="handleShowTip(2)">智能分析</span>
+              <span class="tip-window" @click.stop="handleShowTip(2)">智能分析</span>
             </div>
             <div class="content flex flex-wrap">
               <div ref="echartL5" style="flex: 0 0 49.9%;height: 50%;"></div>
@@ -161,7 +161,7 @@
           <div class="my-panel">
             <div class="panel-title flex-between">
               <span class="text">核心指标监测</span>
-              <span class="tip-window" @click="handleShowTip(3)">智能分析</span>
+              <span class="tip-window" @click.stop="handleShowTip(3)">智能分析</span>
             </div>
             <div class="content flex">
               <div style="flex: 1;height: 100%; position: relative;">
@@ -196,7 +196,7 @@
           <div class="my-panel">
             <div class="panel-title flex-between">
               <span class="text">定机制</span>
-              <span class="tip-window" @click="handleShowTip(4)">智能分析</span>
+              <span class="tip-window" @click.stop="handleShowTip(4)">智能分析</span>
             </div>
             <div class="content flex flex-wrap">
               <div ref="echartR1" style="flex: 0 0 49.9%;height: 50%;"></div>
@@ -210,7 +210,7 @@
           <div class="my-panel">
             <div class="panel-title flex-between">
               <span class="text">定薪酬</span>
-              <span class="tip-window" @click="handleShowTip(5)">智能分析</span>
+              <span class="tip-window" @click.stop="handleShowTip(5)">智能分析</span>
             </div>
             <div class="content flex">
               <div ref="echartR5" style="flex: 1;height: 100%;"></div>
@@ -222,7 +222,7 @@
           <div class="my-panel">
             <div class="panel-title flex-between">
               <span class="text">定任期</span>
-              <span class="tip-window" @click="handleShowTip(6)">智能分析</span>
+              <span class="tip-window" @click.stop="handleShowTip(6)">智能分析</span>
             </div>
             <div class="content flex">
               <div ref="echartR7" style="flex: 1;height: 100%;"></div>

+ 1 - 1
manpower/index2.html

@@ -161,7 +161,7 @@
               <span class="tip-window" @click="handleShowTip(2)">智能分析</span>
             </div>
             <div class="content flex">
-              <div ref="echartC1" style="flex: 1;height: 100%;"></div>
+              <div ref="echartC1" style="flex: 1;height: 90%;"></div>
               <div ref="echartC2" style="flex: 1;height: 100%;"></div>
             </div>
           </div>

+ 1 - 1
manpower/js/data2.js

@@ -102,7 +102,7 @@ const dataR5 = [
 ]
 const dataR6 = [
   [183, 372, 221, 268, 51, -25, 676, -31, 62],
-  [-34, 0, 9, 0, 39, 0, 12, -4, -35]
+  [-25, 0, 10, 0, 63, 0, 13, -4, -26]
 ]
 const dataR7 = [
   [100, 100, 100, 100, 100, 100, 100, 100, 100]

+ 2 - 2
manpower/js/data3.js

@@ -99,12 +99,12 @@ const dataR4 = [
   [2, 4, 10, 2, 7, 6, 6, 7, 5, 2]
 ]
 const dataR5 = [
-  [34409.3, 22500.0, 15100.0, 27930.8, 19637.2, 16528.1, 26904.4, 35046.6, 22500.0, 4072.1],
+  [43240, 8019.8, 15874.4, 29026.3, 19815.07, 8486.45, 7865.4, 14039.6, 8894.4, 7326.7],
   [32620, 21120.75, 14255.91, 26785, 18356, 15658, 25738, 33585, 21078, 3683]
 ]
 const dataR6 = [
   [359, 141, -26, -8, -23, 90, 20, -68, 1769, -221],
-  [-36, 11, 30, 11, 16, 45, 2, 23, -45, -10]
+  [-25, -6, -6, -8, -7, 85, 227, 139, -6, -50]
 ]
 const dataR7 = [
   [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]

+ 2 - 2
manpower/js/data4.js

@@ -88,12 +88,12 @@ const dataR4 = [
   [0, 0, 0, 1, 2, 0, 0, 0]
 ]
 const dataR5 = [
-  [16000.00, 0.00, 9589.04, 11260.80, 13360.00, 10853.00, 4680.80, 0.00],
+  [11000, 0.00, 6666.66, 9492.75, 41783.7, 0, 3387.97, 8333.33],
   [15323.20, 0.00, 9084.66, 10674.11, 12694.67, 10281.05, 4433.65, 0.00]
 ]
 const dataR6 = [
   [0, -100, -920, -239, 38, 27, 30, -2727],
-  [4, 5, 5.26, 5.21, 4.98, 5.27, 5.28, 5.26]
+  [45.45, 0, 43.84, 18.63, -68.03, 0, 38.16, 0]
 ]
 const dataR7 = [
   [100, 100, 100, 100, 100, 100, 100, 100, 100]

+ 49 - 51
manpower/js/fjx.js

@@ -1,55 +1,53 @@
 const fjxdataL1 = [
-    [10399.32, 7126.2, 8643.4, 15964.2, 9733.9, 8070.8, 11564.4, 4233.6, 7927.05, 5298.9, 6001.3, 9010.1, 11370.3, 10170.1, 15123.3, 6103.5, 18555.5, 7293.3],
-    [10765.11, 9926.11, 8004.83, 17927.84, 8175.60, 8564.49, 14752.41, 4198.19, 7769.08, 5675.25, 6930.32, 8930.43, 11308.43, 10595.55, 8713.58, 6006.82, 17387.07, 5532.42],
-  ]
-  
-  const fjxdataL2 = [
-    [172, 89, 80, 117, 23, 38, 99, 30, 34, -524, 64, -160,31, 53, 2, 27, -20, 109],
-    [3.40, 28.21, -7.98, 10.95, -19.06, 5.76, 21.61, -0.84, -2.03, 6.63, 13.41, -0.89, -0.55, 4.02, -73.56, -1.61, -6.72, -31.83],
-  ]
-  
-  const fjxdataL3 = [
-    [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,100],
-  ]
-  const fjxdataL4 = [
-    [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,100],
-  ]
+  [10399.32, 7126.2, 8643.4, 15964.2, 9733.9, 8070.8, 11564.4, 4233.6, 7927.05, 5298.9, 6001.3, 9010.1, 11370.3, 10170.1, 15123.3, 6103.5, 18555.5, 7293.3],
+  [10765.11, 9926.11, 8004.83, 17927.84, 8175.60, 8564.49, 14752.41, 4198.19, 7769.08, 5675.25, 6930.32, 8930.43, 11308.43, 10595.55, 8713.58, 6006.82, 17387.07, 5532.42],
+]
+
+const fjxdataL2 = [
+  [172, 89, 80, 117, 23, 38, 99, 30, 34, -524, 64, -160, 31, 53, 2, 27, -20, 109],
+  [3.52, 39.29, -7.39, 12.30, -16.01, 6.12, 27.57, -0.84, -1.99, 7.10, 15.48, -0.88, -0.54, 4.18, -42.38, -1.58, -6.30, -24.14],
+]
+
+const fjxdataL3 = [
+  [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
+]
+const fjxdataL4 = [
+  [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
+]
 
-  const tipData = [
-    [
-      '华阳新材12月总部设立的共享服务中心及事业部数共12个,“六定”常态机制核定上限为6个,未严格执行机构配置限额有关规定'
-    ],
-    [
-      '云时代中层管理人员对比六定前有所增长,是因为在此期间发生了组织兼并。'
-    ],
-    [
-      '1.	华舰体育总人数比去年同期增长490%,主要原因是业务发展需要;',
-      '2.	华阳新材人数下降了24%,主要是自然减员结果;',
-      '3.	文旅集团全员劳动生产率同比下降33%,人工成本利润率同比下降470%,企业总人数增长2%;',
-      '4.	大地控股的全员劳动生产率同比下降7%,人工成本利润率同比下降4%,企业总人数增长14%;',
-      '5.	华舰体育全员劳动生产率同比增长56%,同时企业总人数增长490%,明显高于全员劳动率增长幅度,值得关注;',
-    ],
-    [
-      '1.	国际能源全员劳动生产率较高,因为扭亏减亏成效显著;',
-      '2.	汾酒集团全员劳动生产率较高,因为企业效益好人均产值较高;',
-      '3.	文旅集团、航产集团人工成本利润率为负,且与去年同期比有所下降,需重点关注;',
-      '4.	国际能源、华舰体育人工成本利润率为负,但相比去年有所改善;',
-      '5.	山西焦煤、晋能控股、华阳新材、太重集团、国际能源、华远陆港、交控集团等8家企业人工成本利润率增长且总人数下降;',
-    ],
-    [
-      '1.	文旅集团2022年利润为负,同时累计招聘46人;',
-      '2.	航产集团2022年利润为负,同时累计招聘199人;',
-      '3.	国际能源2022年利润为负,同时累计招聘190人',
-      '4.	华舰体育2022年利润为负,同时累计招聘12人;',
-    ],
-    [
-      '1.	文旅集团2022年利润同比降低524%,同时薪酬总额增长5.27%;',
-      '2.	航产集团2022年利润同比降低160%,同时薪酬总额增长5.27%;',
-      '3.	华舰体育2022年利润同比降低20%,同时薪酬总额增长5.28%',
-    ]
+const tipData = [
+  [
+    '华阳新材12月总部设立的共享服务中心及事业部数共12个,“六定”常态机制核定上限为6个,未严格执行机构配置限额有关规定'
+  ],
+  [
+    '云时代中层管理人员对比六定前有所增长,是因为在此期间发生了组织兼并。'
+  ],
+  [
+    '1.	华舰体育总人数比去年同期增长490%,主要原因是业务发展需要;',
+    '2.	华阳新材人数下降了24%,主要是自然减员结果;',
+    '3.	文旅集团全员劳动生产率同比下降33%,人工成本利润率同比下降470%,企业总人数增长2%;',
+    '4.	大地控股的全员劳动生产率同比下降7%,人工成本利润率同比下降4%,企业总人数增长14%;',
+    '5.	华舰体育全员劳动生产率同比增长56%,同时企业总人数增长490%,明显高于全员劳动率增长幅度,值得关注;',
+  ],
+  [
+    '1.	国际能源全员劳动生产率较高,因为扭亏减亏成效显著;',
+    '2.	汾酒集团全员劳动生产率较高,因为企业效益好人均产值较高;',
+    '3.	文旅集团、航产集团人工成本利润率为负,且与去年同期比有所下降,需重点关注;',
+    '4.	国际能源、华舰体育人工成本利润率为负,但相比去年有所改善;',
+    '5.	山西焦煤、晋能控股、华阳新材、太重集团、国际能源、华远陆港、交控集团等8家企业人工成本利润率增长且总人数下降;',
+  ],
+  [
+    '1. 国际能源2022年利润为负,同年累计招聘190人;',
+    '2.	文旅集团2022年利润为负,同年累计招聘46人;',
+    '3.	航产集团2022年利润为负,同年累计招聘199人;',
+    '4.	华舰体育2022年利润为负,同年累计招聘12人;',
+  ],
+  [
+    '文旅集团2022年利润同比降低524%,同时在岗职工平均薪酬增长7.1%;',
   ]
+]
 
-  const tipData2 = [
-    ['管理人员是指有直接下属、具有人员管理职责的人员,不包括财务人员、人力资源等管理部门中不负有人员管理职能的具体工作人员。'],
-    ['全员劳动生产率=劳动生产总值/平均在岗职工人数']
-  ]
+const tipData2 = [
+  ['管理人员是指有直接下属、具有人员管理职责的人员,不包括财务人员、人力资源等管理部门中不负有人员管理职能的具体工作人员。'],
+  ['全员劳动生产率=劳动生产总值/平均在岗职工人数']
+]

ファイルの差分が大きいため隠しています
+ 0 - 0
manpower/js/index.js


ファイルの差分が大きいため隠しています
+ 0 - 0
manpower/js/index2.js


ファイルの差分が大きいため隠しています
+ 0 - 0
manpower/js/index3.js


ファイルの差分が大きいため隠しています
+ 0 - 0
manpower/js/index4.js


+ 20 - 16
manpower/styles/index.css

@@ -10,8 +10,10 @@ body {
   min-width: 7640px;
   font-size: 20px;
   color: #fff;
-  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
-    'Hiragino Sans GB', Arial, sans-serif;
+  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, "PingFang SC",
+    "Hiragino Sans GB", Arial, sans-serif;
+    height: 100vh;
+    overflow-y: hidden;
 }
 [v-cloak] {
   display: none;
@@ -79,16 +81,18 @@ a {
   display: none;
 }
 #app {
-  background: url('../images/page-bg.png') center center no-repeat;
+  background: url("../images/page-bg.png") center center no-repeat;
   background-size: 100% 100%;
   padding-top: 10px;
   position: relative;
+  height:100vh;
+  overflow-y: hidden;
 }
 .my-header {
   position: relative;
   height: 140px;
   line-height: 140px;
-  background: url('../images/header-bg2.png') center center no-repeat;
+  background: url("../images/header-bg2.png") center center no-repeat;
   background-size: 100% 100%;
   text-align: center;
   font-weight: bold;
@@ -205,7 +209,7 @@ a {
   color: #fff;
   font-weight: 600;
   font-size: 22px;
-  background: url('../images/footer-item.png') no-repeat;
+  background: url("../images/footer-item.png") no-repeat;
   background-size: 100% 100%;
 }
 .footer a img {
@@ -214,7 +218,7 @@ a {
   margin-right: 15px;
 }
 .footer a:hover {
-  background: url('../images/footer-item-checked.png') no-repeat;
+  background: url("../images/footer-item-checked.png") no-repeat;
   background-size: 100% 100%;
   color: #15f7ff;
 }
@@ -226,7 +230,7 @@ a {
   height: 60px;
   line-height: 60px;
   padding-left: 6%;
-  background: url('../images/title-bg.png') no-repeat;
+  background: url("../images/title-bg.png") no-repeat;
   background-size: 100% 100%;
 }
 .panel-title .text {
@@ -292,7 +296,7 @@ a {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: url('../images/sex-bg.png') no-repeat center;
+  background: url("../images/sex-bg.png") no-repeat center;
   background-size: 100% 100%;
   padding: 1.5%;
   margin: 0 10px;
@@ -353,12 +357,12 @@ a {
   cursor: pointer;
 }
 .tip {
-  position: fixed;
+  /* position: fixed;
   background-color: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100%;
   top: 0;
-  left: 0;
+  left: 0; */
 }
 .tip-box {
   position: absolute;
@@ -370,8 +374,8 @@ a {
   height: 850px;
   top: calc(50% - 375px);
   left: calc(50% - 600px);
-  background: url('../images/alert.png') no-repeat center;
-  /* background-color: #133B65; */
+  background: url("../images/alert.png") no-repeat center;
+  background-color: #133b65;
   background-size: 100% 100%;
   padding: 100px 60px 50px;
 }
@@ -387,13 +391,13 @@ a {
   background-size: 100% 100%;
 }
 .red {
-  background: url('../images/red.png');
+  background: url("../images/red.png");
 }
 .green {
-  background: url('../images/green.png');
+  background: url("../images/green.png");
 }
 .yellow {
-  background: url('../images/yellow.png');
+  background: url("../images/yellow.png");
 }
 .lightOut {
   display: flex;
@@ -434,4 +438,4 @@ div::-webkit-scrollbar-track {
   cursor: pointer;
   border-radius: 50%;
   font-size: 24px;
-}
+}

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません