跳转

zhsq_qk-ui/src/router/index.js

@@ -84,6 +84,7 @@ export const constantRoutes = [
     component: () => import('@/views/error/401'),
     hidden: true
   },
+
   {
     path: '',
     component: Layout,
@@ -97,6 +98,19 @@ export const constantRoutes = [
       }
     ]
   },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   redirect: 'index',
+  //   children: [
+  //     {
+  //       path: 'weather',
+  //       component: () => import('@/views/fusion/index'),
+  //       name: 'weather',
+  //       meta: {title: '首页', icon: 'dashboard', affix: true}
+  //     }
+  //   ]
+  // },
   {
     path: '/user',
     component: Layout,

zhsq_qk-ui/src/views/fusion/index.vue

@@ -552,23 +552,17 @@ export default {
       });
 
       let dataList = [{
-        name: '前程街道',
+        name: '第一季度',
         value: '20'
       }, {
-        name: '富民街道',
+        name: '第二季度',
         value: '10'
       }, {
-        name: '广兴街道',
+        name: '第三季度',
         value: '12'
       }, {
-        name: '东风街道',
+        name: '第四季度',
         value: '15'
-      }, {
-        name: '锦绣街道',
-        value: '20'
-      }, {
-        name: '锦城街道',
-        value: '30'
       }]
 
       var option = {
@@ -691,25 +685,25 @@ export default {
             barGap: '-70%',
             barCategoryGap: '70%',
             itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(39,116,212,1)'
-              }, {
-                offset: 1,
-                color: 'rgba(1,23,60,1)'
-              }])
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(39,116,212,1)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(1,23,60,1)'
+                }])
+              },
+              emphasis: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(39,116,212,1)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(1,23,60,1)'
+                }])
+              }
             },
-            emphasis: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(39,116,212,1)'
-              }, {
-                offset: 1,
-                color: 'rgba(1,23,60,1)'
-              }])
-            }
-          },
           },
           // 计划产值中间正方形
           {
@@ -884,10 +878,25 @@ export default {
 
       var option = {
         grid: {
-          left: "10%", //距离左边的距离
-          right: "2%", //距离右边的距离
-          bottom: "10%", //距离下边的距离
-          top: "8%" //距离上边的距离
+          left: "2%",
+          right: "4%",
+          bottom: "5%",
+          top: "10%",
+          containLabel: true,
+        },
+        legend: {
+          data: ["2023年度", "2024年度"],
+
+          top: 1,
+          textStyle: {
+            color: "#deebff",
+            fontSize: 12,
+          },
+          itemWidth: 12,
+          itemHeight: 10,
+          itemGap: 35,
+          color: "#242424",
+          selectedMode: false,
         },
         title: {
           text: '',
@@ -912,7 +921,12 @@ export default {
         },
         xAxis: [{
           type: "category",
-          data: ['前程街道', '富民街道', '广兴街道', '东风街道', '锦绣街道', '锦城街道'],
+          data: [
+            "第一季度",
+            "第二季度",
+            "第三季度",
+            "第四季度",
+                ],
           axisLabel: {
             textStyle: {
               color: "#ffffff",
@@ -983,7 +997,7 @@ export default {
               }])
             }
           },
-        },{
+        }, {
           name: "2024",
           type: "bar",
           data: dataList,
@@ -1014,10 +1028,10 @@ export default {
         ]
       }
 
-// 初始数据
+      // 初始数据
 
       function updateData() {
-        var data = [0, 0, 0, 0, 0,0];
+        var data = [0, 0, 0, 0, 0, 0];
         // 更新数据数组
         for (var i = 0; i < data.length; i++) {
           data[i] += Math.floor(Math.random() * 10); // 可以根据需要调整增长速度
@@ -1027,7 +1041,8 @@ export default {
         }
         return data
       }
-      setInterval(function() {
+
+      setInterval(function () {
         option.series[0].data = updateData();
         option.series[1].data = updateData();
         myChart.setOption(option);

zhsq_qk-ui/src/views/fusion/sprh.vue

@@ -127,7 +127,7 @@
           <div class="nav-li-right">
             <span>营商环境</span>
           </div>
-          <div class="nav-li-right" @click="handleNavigation('yshj')">
+          <div class="nav-li-right " @click="handleNavigation('yshj')">
             <span>政务运行</span>
           </div>
           <div class="nav-li-right on" @click="handleNavigation('sprh')">
@@ -260,10 +260,15 @@ export default {
             position: 'right',
             color: '#00d5e1',
             fontSize: 12,
+            rich: {
+              value: {
+                color: '#00e1ce'
+              }
+            },
             formatter({
                         value
                       }) {
-              return `${value}人`;
+              return `{value|${value}个}`;
             }
           },
           itemStyle: {

zhsq_qk-ui/src/views/fusion/yshj.vue

@@ -117,7 +117,7 @@
           <div class="nav-li-left">
             <span>城市管理</span>
           </div>
-          <div class="nav-li-left" @click="serviceFAW('sprh')">
+          <div class="nav-li-left on" @click="serviceFAW('sprh')">
             <span>交通治理</span>
           </div>
           <div class="nav-li-left">
@@ -135,7 +135,7 @@
           <div class="nav-li-right on">
             <span>政务运行</span>
           </div>
-          <div class="nav-li-right" @click="serviceFAW('sprh')">
+          <div class="nav-li-right " @click="serviceFAW('sprh')">
             <span>安全应急</span>
           </div>
           <div class="nav-li-right">
@@ -251,8 +251,15 @@ export default {
               position: 'right',
               color: '#00d5e1',
               fontSize: 12,
-              formatter({ value }) {
-                return `${value}人`;
+              rich: {
+                value: {
+                  color: '#00e1ce'
+                }
+              },
+              formatter({
+                          value
+                        }) {
+                return `{value|${value}个}`;
               }
             },
             itemStyle: {
@@ -278,10 +285,10 @@ export default {
       };
 
       let updateInterval = 1000; // 更新间隔，单位：毫秒
-      let updateData = () => {
+      let updateRegionTop = () => {
         data.forEach((item) => {
           item.value += Math.floor(Math.random() * 10); // 模拟逐渐增加的数据
-          if (item.value >= 1000) {
+          if (item.value >= 100) {
             item.value = 0; // 当增加到1000时重新开始
           }
         });
@@ -305,9 +312,9 @@ export default {
         myChart.setOption(option);
       };
 
-      updateData(); // 首次更新数据
+      updateRegionTop(); // 首次更新数据
 
-      let timer = setInterval(updateData, updateInterval);
+      let timer = setInterval(updateRegionTop, updateInterval);
 
     },
 
@@ -472,192 +479,203 @@ export default {
         myChart.setOption(option);
       }
     },
-    matterUpTop() {
-      var myChart = echarts.init(document.getElementById('sprh-sxbjl10'));
-      var datas = [{
-        "value": 0,
-        "name": "特种设备安全管.."
+matterUpTop() {
+  var myChart = echarts.init(document.getElementById('sprh-sxbjl10'));
+  var datas = [{
+    "value": 30,
+    "name": "特种设备安全管.."
+  },
+    {
+      "value": 20,
+      "name": "特种设备使用登.."
+    },
+    {
+      "value": 10,
+      "name": "特种设备安全管2.."
+    },
+    {
+      "value": 40,
+      "name": "一孩、二孩、三孩.."
+    },
+    {
+      "value": 50,
+      "name": "失业登记"
+    },
+    {
+      "value": 60,
+      "name": "医师执业注册（.."
+    },
+    {
+      "value": 70,
+      "name": "残疾人证新办"
+    },
+    {
+      "value": 80,
+      "name": "护士执业注册(.."
+    },
+    {
+      "value": 90,
+      "name": "失业登记2"
+    },
+    {
+      "value": 100,
+      "name": "一孩、二孩、三孩1.. "
+    }
+  ]
+  var maxArr = (new Array(datas.length)).fill(100);
+  let option = {
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'item',
+      axisPointer: {
+        type: 'none'
       },
-        {
-          "value": 0,
-          "name": "特种设备使用登.."
-        },
-        {
-          "value": 0,
-          "name": "特种设备安全管.."
-        },
-        {
-          "value": 0,
-          "name": "一孩、二孩、三孩.."
-        },
-        {
-          "value": 0,
-          "name": "失业登记"
-        },
-        {
-          "value": 0,
-          "name": "医师执业注册（.."
-        },
-        {
-          "value": 0,
-          "name": "残疾人证新办"
-        },
-        {
-          "value": 0,
-          "name": "护士执业注册(.."
-        },
-        {
-          "value": 0,
-          "name": "失业登记"
-        },
-        {
-          "value": 0,
-          "name": "一孩、二孩、三孩.. "
-        },
-
-      ]
-      var maxArr = (new Array(datas.length)).fill(100);
-      let option = {
-        grid: {
-          left: 0,
-          right: 0,
-          bottom: 0,
-          top: 0,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'item',
-          axisPointer: {
-            type: 'none'
-          },
-          formatter: function (params) {
-            return params[0].name + ' : ' + params[0].value
-          }
-        },
-        xAxis: {
-          show: false,
-          type: 'value'
-        },
-        yAxis: [{
-          type: 'category',
-          inverse: true,
-          axisLabel: {
-            show: true,
-            align: 'right',
-            textStyle: {
-              fontSize: 14,
-              color: '#ffffff',
-              rich: {
-                index: {
-                  color: '#9d9d9d',
-                  fontWeight: 'bold',
-                  fontStyle: 'italic'
-                },
-                index1: {
-                  color: '#f8777b',
-                  fontWeight: 'bold',
-                  fontStyle: 'italic'
-                },
-                index2: {
-                  color: '#ffa145',
-                  fontWeight: 'bold',
-                  fontStyle: 'italic'
-                },
-                index3: {
-                  color: '#6ade8d',
-                  fontWeight: 'bold',
-                  fontStyle: 'italic'
-                },
-                name: {
-                  width: 7 * 14,
-                  align: 'left',
-                  textAlign: 'left'
-                }
-              }
+      formatter: function(params) {
+        return params[0].name + ' : ' + params[0].value
+      }
+    },
+    xAxis: {
+      show: false,
+      type: 'value'
+    },
+    yAxis: [{
+      type: 'category',
+      inverse: true,
+      axisLabel: {
+        show: true,
+        align: 'right',
+        textStyle: {
+          fontSize: 14,
+          color: '#ffffff',
+          rich: {
+            index: {
+              color: '#9d9d9d',
+              fontWeight: 'bold',
+              fontStyle: 'italic'
             },
-            formatter: (name) => {
-              var index = (datas.map(item => item.name)).indexOf(name) + 1;
-              return [
-                '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
-                '{name|' + name + '}'
-              ].join(' ')
-            }
-          },
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          data: datas.map(item => item.name)
-        }, {
-          type: 'category',
-          inverse: true,
-          axisTick: 'none',
-          axisLine: 'none',
-          show: true,
-          axisLabel: {
-            textStyle: {
-              color: '#3196fa',
-              fontSize: '12'
+            index1: {
+              color: '#f8777b',
+              fontWeight: 'bold',
+              fontStyle: 'italic'
             },
-            formatter: '{value}'
-          },
-          data: datas.map(item => item.value)
-        }],
-        series: [{
-          name: '值',
-          type: 'bar',
-          zlevel: 1,
-          itemStyle: {
-            normal: {
-              barBorderRadius: 5,
-              color: '#3196fa',
+            index2: {
+              color: '#ffa145',
+              fontWeight: 'bold',
+              fontStyle: 'italic'
             },
-          },
-          barWidth: 10,
-          data: datas
-        },
-          {
-            name: '背景',
-            type: 'bar',
-            barWidth: 10,
-            barGap: '-100%',
-            data: maxArr,
-            itemStyle: {
-              normal: {
-                color: '#042039',
-                barBorderRadius: 5,
-              }
+            index3: {
+              color: '#6ade8d',
+              fontWeight: 'bold',
+              fontStyle: 'italic'
             },
-          },
-        ]
-      };
-
-      if (option) {
-        myChart.setOption(option);
-      }
-      // 设置定时器，每隔一段时间更新数据并重绘图表
-      setInterval(function() {
-        datas.forEach(function(item) {
-          item.value += Math.floor(Math.random() * 10); // 每次随机增加一个0-9的数
-          if (item.value > 1000) {
-            item.value = 0; // 当超过1000时，重置为0
+            name: {
+              width: 7 * 14,
+              align: 'left',
+              textAlign: 'left'
+            }
           }
-        });
-        myChart.setOption({
-          series: [{
-            data: datas
+        },
+        formatter: (name) => {
+          var index = (datas.map(item => item.name)).indexOf(name) + 1;
+          return [
+            '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
+            '{name|' + name + '}'
+          ].join(' ')
+        }
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      data: datas.map(item => item.name)
+    },
+      {
+        type: 'category',
+        inverse: true,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#3196fa',
+            fontSize: '12'
           },
-            {
-              data: maxArr
-            }]
-        });
-      }, 1000); // 每隔1秒更新一次
+          formatter: '{value}'
+        },
+        data: datas.map(item => item.value)
+      }
+    ],
+    series: [{
+      name: '值',
+      type: 'bar',
+      zlevel: 1,
+      itemStyle: {
+        normal: {
+          barBorderRadius: 5,
+          color: '#3196fa',
+        },
+        emphasis: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      barWidth: 10,
+      data: datas
     },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: 10,
+        barGap: '-100%',
+        data: maxArr,
+        itemStyle: {
+          normal: {
+            color: '#042039',
+            barBorderRadius: 5,
+          }
+        },
+      }
+    ]
+  };
+
+  setInterval(function() {
+    // 更新数据和名字，并重新渲染图表
+    datas.forEach(function(item) {
+      item.value = Math.floor(Math.random() * 100); // 随机生成新的值
+    });
+
+    myChart.setOption({
+      yAxis: [{
+        data: datas.map(item => item.name)
+      }, {
+        data: datas.map(item => item.value)
+      }],
+      series: [{
+        data: datas
+      },
+        {
+          data: maxArr
+        }
+      ]
+    });
+  }, 1000); // 每隔3秒钟更新一次数据
+
+  // 初次渲染图表
+  if (option) {
+    myChart.setOption(option);
+  }
+},
     matterTop() {
       var myChart = echarts.init(document.getElementById('sprh-sxbjl-top'));
       var datas = [{
@@ -828,21 +846,26 @@ export default {
       }
       // 设置定时器，每隔一段时间更新数据并重绘图表
       setInterval(function() {
+        // 更新数据和名字，并重新渲染图表
         datas.forEach(function(item) {
-          item.value += Math.floor(Math.random() * 10); // 每次随机增加一个0-9的数
-          if (item.value > 1000) {
-            item.value = 0; // 当超过1000时，重置为0
-          }
+          item.value = Math.floor(Math.random() * 100); // 随机生成新的值
         });
+
         myChart.setOption({
+          yAxis: [{
+            data: datas.map(item => item.name)
+          }, {
+            data: datas.map(item => item.value)
+          }],
           series: [{
             data: datas
           },
             {
               data: maxArr
-            }]
+            }
+          ]
         });
-      }, 1000); // 每隔1秒更新一次
+      }, 1000); // 每隔3秒钟更新一次数据
     },
   },
 };