zhb新增页面

cokingCoal/styles/cokingCoalB.css

@@ -155,10 +155,10 @@ a {
 .right-bottom-content {
   height: calc(100% - 50px);
 }
-.loopBack {
-  /* background: url('../images/gold.png') no-repeat center;
-  background-size: 60% auto; */
-}
+/* .loopBack {
+  background: url('../images/gold.png') no-repeat center;
+  background-size: 60% auto;
+} */
 .center {
   padding: 10px;
 }

investment/investHome4.html

@@ -39,7 +39,7 @@
                 <div class=" w-full h-full flex justify-center items-center">管理数智化</div>
                 <div class=" w-full h-full flex justify-center items-center">资产证券化</div>
               </div>
-              <div class="lt-bottom-right lt-bottom overflow-hidden w-full h-full">
+              <div class="lt-bottom-right overflow-hidden w-full h-full commonBack">
                 <div class="flex items-center justify-center w-full h-full overflow-hidden">
                   <img class="lt-img" src="./images4/lt-1.png" alt="">
                   <div class="flex flex-col " style="width:calc( 100% - 76px )">
@@ -87,24 +87,164 @@
           </div>
         </dv-border-box-8>
         <dv-border-box-8>
-          <div class="overflow-hidden w-full h-full tr">
+          <div class="overflow-hidden w-full h-full bl">
             <div class="panel-title">
               <span class="text">煤炭保供/转型</span>
             </div>
+            <div class="rt-bottom overflow-hidden w-full">
+              <div class="rt-bottom-top overflow-hidden w-full h-full commonBack">
+                <div class="overflow-hidden w-full h-full flex items-center justify-center">
+                  <img class="tr-img" src="./images4/tr-1.png" alt="">
+                  <div class="flex flex-col " style="width:calc( 100% - 50px )">
+                    <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">13.07</span>亿吨</span>
+                    <span>全年产量</span>
+                  </div>
+                </div>
+                <div class="overflow-hidden w-full h-full flex items-center justify-center">
+                  <img class="tr-img" src="./images4/tr-1.png" alt="">
+                  <div class="flex flex-col " style="width:calc( 100% - 50px )">
+                    <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">8.7</span>%</span>
+                    <span>增长比例</span>
+                  </div>
+                </div>
+                <div class="overflow-hidden w-full h-full flex items-center justify-center">
+                  <img class="tr-img" src="./images4/tr-1.png" alt="">
+                  <div class="flex flex-col " style="width:calc( 100% - 50px )">
+                    <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">6.2</span>亿吨</span>
+                    <span>保供产能</span>
+                  </div>
+                </div>
+                <div class="overflow-hidden w-full h-full flex items-center justify-center">
+                  <img class="tr-img" src="./images4/tr-1.png" alt="">
+                  <div class="flex flex-col " style="width:calc( 100% - 50px )">
+                    <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">4000</span>户</span>
+                    <span>总范围总户数</span>
+                  </div>
+                </div>
+              </div>
+              <div class="rt-bottom-bottom overflow-hidden w-full h-full">
+                <div class="overflow-hidden w-full h-full commonBack">
+                  <div ref="echart1" class="w-full h-full"></div>
+                </div>
+                <div class="rt-bottom-bottom-c overflow-hidden w-full h-full commonBack">
+                  <div class="flex items-center justify-center overflow-hidden w-full h-full relative">
+                    <img class="tr-img" src="./images4/tr-1.png" alt="">
+                    <div class="flex flex-col " style="width:calc( 100% - 50px )">
+                      <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">37</span>座</span>
+                      <span>智能化煤矿累计值</span>
+                      <div class="arrow absolute flex items-center justify-center">
+                        <img src="./images4/arrow-g.png" alt="">
+                        <span>17.2%</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex items-center justify-center overflow-hidden w-full h-full relative">
+                    <img class="tr-img" src="./images4/tr-1.png" alt="">
+                    <div class="flex flex-col " style="width:calc( 100% - 50px )">
+                      <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">993</span>处</span>
+                      <span>智能化采掘工作面</span>
+                      <div class="arrow absolute flex items-center justify-center">
+                        <img src="./images4/arrow-r.png" alt="">
+                        <span>5.78%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="overflow-hidden w-full h-full commonBack">
+                  <div ref="echart2" class="w-full h-full" style="width:100%;height: 100%;"></div>
+                </div>
+              </div>
+            </div>
           </div>
         </dv-border-box-8>
         <dv-border-box-8>
-          <div class="overflow-hidden w-full h-full tr">
-            <div class="panel-title">
+          <div class="overflow-hidden w-full h-full bl">
+            <div class="panel-title relative">
               <span class="text">两个转型</span>
+              <div class="right-title absolute">2023年度投资计划</div>
+            </div>
+            <div class="bl-bottom overflow-hidden w-full">
+              <div class="bl-bottom-top overflow-hidden w-full w-full">
+                <div class="commonBack flex items-center justify-center">
+                  <div class="flex flex-col " style="width:30%;margin-right: 10%;">
+                    <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">680.29</span>亿</span>
+                    <span>产业转型总投资额</span>
+                  </div>
+                  <div class="flex flex-col " style="width:15%">
+                    <span style="color: #69C0FF;"><span style="font-size:22px;font-weight: bold;">260</span>个</span>
+                    <span>项目数量</span>
+                  </div>
+                </div>
+                <div class="commonBack flex items-center justify-center">
+                  <div class="flex flex-col " style="width:30%;margin-right: 10%;">
+                    <span style="color: #45DAD1;"><span style="font-size:22px;font-weight: bold;">28.11</span>亿</span>
+                    <span>数字化转型总投资额</span>
+                  </div>
+                  <div class="flex flex-col " style="width:15%">
+                    <span style="color: #45DAD1;"><span style="font-size:22px;font-weight: bold;">57</span>个</span>
+                    <span>项目数量</span>
+                  </div>
+                </div>
+              </div>
+              <div class="commonBack bl-bottom-bottom">
+                <div ref="echart4" class="w-full h-full" style="width:100%;height: 100%;"></div>
+                <div ref="echart5" class="w-full h-full" style="width:100%;height: 100%;"></div>
+              </div>
             </div>
           </div>
         </dv-border-box-8>
         <dv-border-box-8>
-          <div class="overflow-hidden w-full h-full tr">
+          <div class="overflow-hidden w-full h-full br">
             <div class="panel-title">
               <span class="text">五个一体化</span>
             </div>
+            <div class=" overflow-hidden w-full rb-bottom">
+              <div class="overflow-hidden w-full h-full commonBack">
+                <div ref="echart3" class="w-full h-full"></div>
+              </div>
+              <div class="overflow-hidden w-full h-full commonBack">
+                <div class="rank text-right">
+                  <span>按进度排序</span>
+                </div>
+                <div class="schedule overflow-hidden w-full">
+                  <div class="flex justify-center flex-col">
+                    <div class="flex justify-between item" style="padding-right: 20px;">
+                      <span>煤炭和煤电一体化</span>
+                      <span>项目数：27个</span>
+                    </div>
+                    <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
+                  </div>
+                  <div class="flex justify-center flex-col">
+                    <div class="flex justify-between item" style="padding-right: 20px;">
+                      <span>煤炭和煤电一体化</span>
+                      <span>项目数：27个</span>
+                    </div>
+                    <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
+                  </div>
+                  <div class="flex justify-center flex-col">
+                    <div class="flex justify-between item" style="padding-right: 20px;">
+                      <span>煤炭和煤电一体化</span>
+                      <span>项目数：27个</span>
+                    </div>
+                    <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
+                  </div>
+                  <div class="flex justify-center flex-col">
+                    <div class="flex justify-between item" style="padding-right: 20px;">
+                      <span>煤炭和煤电一体化</span>
+                      <span>项目数：27个</span>
+                    </div>
+                    <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
+                  </div>
+                  <div class="flex justify-center flex-col">
+                    <div class="flex justify-between item" style="padding-right: 20px;">
+                      <span>煤炭和煤电一体化</span>
+                      <span>项目数：27个</span>
+                    </div>
+                    <el-progress percentage="80" color="#FBE139" :format="format"></el-progress>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </dv-border-box-8>
       </div>

investment/js/investHome4.js

@@ -10,7 +10,7 @@ let app = new Vue({
     this.time = formatDate()
     this.timer = setInterval(() => {
       this.time = formatDate()
-    }, 1000)
+    })
   },
   beforeDestroy () {
     if (this.timer) {
@@ -18,8 +18,346 @@ let app = new Vue({
     }
   },
   mounted () {
+    setTimeout(() => {
+      this.initChart1()
+      this.initChart2()
+      this.initChart3()
+      this.initChart4()
+      this.initChart5()
+    })
   },
   methods: {
+    format (percentage) {
+      return '230.10亿'
+    },
+    initChart1 () {
+      let myChart = echarts.init(this.$refs['echart1'])
+      let option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          bottom: '5%',
+          orient: 'vertical',
 
+          textStyle: {
+            color: '#9DB9EB',
+          },
+          data: ['先进产能', '传统产能']
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '50%'],
+            center: ['50%', '40%'],
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  width: 1,
+                },
+              },
+            },
+            data: [
+              { value: 1048, name: '先进产能' },
+              { value: 735, name: '传统产能' }
+            ],
+            itemStyle: {
+              normal: {
+                color: function (colors) {
+                  var colorList = ['#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'];
+                  return colorList[colors.dataIndex];
+                }
+              },
+            },
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 10000,
+        loopSeries: true,
+      })
+    },
+    initChart2 () {
+      let myChart = echarts.init(this.$refs['echart2'])
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        grid: {
+          top: '15%',
+          right: '10',
+          left: '30',
+          bottom: '10%',
+        },
+        xAxis: {
+          data: ['2020', '2021', '2022'],
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#005094',
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: true, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            rotate: 15,
+            textStyle: {
+              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
+              fontSize: 12,
+            },
+          },
+        },
+        yAxis: [
+          {
+            name: '单位亿吨',
+            type: 'value',
+            nameTextStyle: {//y轴上方单位的颜色
+              color: '#fff',
+              fontSize: '10px'
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#68b4dd66',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              formatter: '{value}',
+              textStyle: {
+                color: 'rgba(250,250,250,0.6)',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '实际值',
+            type: 'bar',
+            barWidth: 15,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#69c0ff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: [70, 52, 33],
+          }
+        ],
+      }
+      myChart.setOption(option);
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      });
+    },
+    initChart3 () {
+      let myChart = echarts.init(this.$refs['echart3'])
+      let option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          bottom: '5%',
+          orient: 'vertical',
+
+          textStyle: {
+            color: '#9DB9EB',
+          },
+          data: ['先进产能', '传统产能']
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '50%'],
+            center: ['50%', '40%'],
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  width: 1,
+                },
+              },
+            },
+            data: [
+              { value: 1048, name: '先进产能' },
+              { value: 735, name: '传统产能' }
+            ],
+            itemStyle: {
+              normal: {
+                color: function (colors) {
+                  var colorList = ['#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'];
+                  return colorList[colors.dataIndex];
+                }
+              },
+            },
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 10000,
+        loopSeries: true,
+      })
+    },
+    initChart4 () {
+      let myChart = echarts.init(this.$refs['echart4'])
+      let option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          bottom: '5%',
+          orient: 'horizontal',
+
+          textStyle: {
+            color: '#9DB9EB',
+          },
+          data: ['产业转型', '数字化转型', '其他项目']
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '50%'],
+            center: ['50%', '40%'],
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  width: 1,
+                },
+              },
+            },
+            data: [
+              { value: 1048, name: '产业转型' },
+              { value: 735, name: '数字化转型' },
+              { value: 735, name: '其他项目' }
+            ],
+            itemStyle: {
+              normal: {
+                color: function (colors) {
+                  var colorList = ['#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'];
+                  return colorList[colors.dataIndex];
+                }
+              },
+            },
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 10000,
+        loopSeries: true,
+      })
+    },
+    initChart5 () {
+      let myChart = echarts.init(this.$refs['echart5'])
+      let option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          bottom: '5%',
+          orient: 'horizontal',
+
+          textStyle: {
+            color: '#9DB9EB',
+          },
+          data: ['传统产业改造提升', '战略性新兴产业发展壮大']
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '50%'],
+            center: ['50%', '40%'],
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  width: 1,
+                },
+              },
+            },
+            data: [
+              { value: 1048, name: '传统产业改造提升' },
+              { value: 735, name: '战略性新兴产业发展壮大' }
+            ],
+            itemStyle: {
+              normal: {
+                color: function (colors) {
+                  var colorList = ['#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'];
+                  return colorList[colors.dataIndex];
+                }
+              },
+            },
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 10000,
+        loopSeries: true,
+      })
+    },
   },
 })

investment/styles/investHome4.css

@@ -102,13 +102,11 @@ a {
 .main {
   padding: 15px;
   height: calc(100vh - 25px);
-  background: url('../images/back-big.png') no-repeat center bottom;
+  background: url('../images3/back-big.png') no-repeat center bottom;
   padding-bottom: 65px;
   display: grid;
-  /* grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-template-rows: repeat(2, minmax(0, 1fr)); */
-  grid-template-columns: repeat(2, 50%);
-  grid-template-rows: repeat(2, 50%);
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
   gap: 10px;
 }
 .panel-title {
@@ -145,25 +143,41 @@ a {
   height: 10px;
   background: url('../images/title-right.png') no-repeat;
 }
-.lt-bottom {
+.lt-bottom,
+.rt-bottom,
+.bl-bottom,
+.rb-bottom {
   display: grid;
   height: calc(100% - 50px);
-  grid-template-columns: 1fr 2fr;
   gap: 10px;
   padding: 10px;
 }
+.rt-bottom {
+  grid-template-rows: 1fr 2fr;
+}
+.bl-bottom {
+  grid-template-rows: 1fr 2fr;
+}
+.lt-bottom {
+  grid-template-columns: 1fr 2fr;
+}
 .lt-bottom-left {
   display: grid;
   grid-template-rows: repeat(4, 1fr);
   gap: 10px;
 }
+.rb-bottom {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
 .lt-bottom-left > div {
   background: url('../images4/button-back.png') no-repeat;
   background-size: 100% 100%;
   font-size: 18px;
   font-weight: bold;
 }
-.lt-bottom-right {
+.commonBack {
   background-color: rgb(156, 210, 255, 0.1);
 }
 .tl,
@@ -185,6 +199,94 @@ a {
   height: 64px;
   margin: 30px;
 }
+.rt-bottom-top {
+  padding: 10px;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+}
+.tr-img {
+  width: 50px;
+  height: 50px;
+  margin: 30px;
+}
+.rt-bottom-bottom {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+.rt-bottom-bottom-c {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  gap: 10px;
+  padding: 10px;
+}
+.rt-bottom-bottom-c > div {
+  border: 1px solid #69c1ff25;
+  border-radius: 5px;
+}
+.arrow {
+  width: 80px;
+  height: 20px;
+  top: 20px;
+  right: 20px;
+}
+.arrow img {
+  width: 15px;
+  height: 14px;
+}
+.bl-bottom-top {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+.right-title {
+  right: 20px;
+  top: 0;
+  color: #69c0ff;
+}
+.rank {
+  height: 40px;
+  line-height: 40px;
+  padding-right: 20px;
+}
+.schedule {
+  height: calc(100% - 40px);
+  display: grid;
+  grid-template-rows: repeat(5, 1fr);
+  gap: 5px;
+  padding: 10px;
+  padding-right: 0px;
+  padding-left: 15px;
+}
+.el-progress-bar__inner {
+  background: linear-gradient(to right, #0b2855, #00aeff);
+}
+.el-progress-bar__outer {
+  background-color: #183d66;
+}
+.el-progress-bar {
+  width: 90% !important;
+}
+.el-progress {
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid #4e8fcc;
+  align-items: center;
+  padding: 1px;
+  margin-top: 5px;
+}
+.el-progress__text {
+  width: 100px !important;
+  text-align: center;
+  color: #69c0ff;
+}
+.bl-bottom-bottom {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  padding: 10px;
+  gap: 10px;
+}
 /* zhb */
 /* 宽高纵横比 */
 .aspect-auto {