修改

zhsq_qk-ui/src/router/index.js

@@ -48,11 +48,11 @@ export const constantRoutes = [
   //     title: '城市运行一网统管指挥中心',
   //     icon: ['eye-open'] // 添加图标
   //   }
-  // },
-  {
-    path: '/jczl',
-    component: () => import('@/views/fusion/jczl'),
-    hidden: true
+  // },
+  {
+    path: '/jczl',
+    component: () => import('@/views/fusion/jczl'),
+    hidden: true
   },
   {
     path: '/sprh',
@@ -60,6 +60,11 @@ export const constantRoutes = [
     hidden: true
   },
   {
+    path: '/jtzl',
+    component: () => import('@/views/fusion/jtzl'),
+    hidden: true
+  },
+  {
     path: '/yshj',
     component: () => import('@/views/fusion/yshj'),
     hidden: true

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

@@ -162,8 +162,8 @@
           <span>服务一汽</span>
         </a>
         <a><i><img src="@/assets/images/qkq_icon2.png"/></i><span>城市管理</span></a>
-        <a @click="handleNavigation('sprh')"><i><img src="@/assets/images/qkq_icon3.png"/></i><span>交通治理</span></a>
-        <a><i><img src="@/assets/images/qkq_icon4.png"/></i><span>基层治理</span></a>
+        <a @click="handleNavigation('jtzl')"><i><img src="@/assets/images/qkq_icon3.png"/></i><span>交通治理</span></a>
+        <a @click="handleNavigation('jczl')"><i><img src="@/assets/images/qkq_icon4.png"/></i><span>基层治理</span></a>
         <a>
           <i><img src="@/assets/images/qkq_icon5.png"/></i>
           <span>营商环境</span>
@@ -201,11 +201,12 @@ export default {
   },
   methods: {
     handleNavigation(page) {
-      if (page === 'sprh') {
-        this.$router.push('/sprh'); // 跳转到 "交通治理" 页面
-      } else if (page === 'yshj') {
-        this.$router.push('/yshj'); // 跳转到 "政务运行" 页面
-      }
+      // if (page === 'sprh') {
+      //   this.$router.push('/sprh'); // 跳转到 "交通治理" 页面
+      // } else if (page === 'yshj') {
+      //   this.$router.push('/yshj'); // 跳转到 "政务运行" 页面
+      // }
+      this.$router.push({path: page});
     },
     doingBusiness() {
       //	营商环境

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

@@ -0,0 +1,703 @@
+<template>
+  <div>
+    <div class="map">
+      <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
+                :yxtSltProps="sltProps"></supermap>
+    </div>
+    <!-- 阴影背景 -->
+    <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
+    <div class="bj_right"><img src="@/assets/images/sprhbj-right.png"/></div>
+    <div class="bj_bottom"><img src="@/assets/images/sprhbj-bottom.png"/></div>
+    <!--头部开始-->
+    <div class="header">
+      <h1>城市运行一网统管指挥中心</h1>
+			<div class="map_tab">
+				<button @click="sltHandle" class="on">矢量图</button>
+				<button @click="yxtHandle">影像图</button>
+			</div>
+    </div>
+    <!--头部结束-->
+    <!--左侧开始-->
+    <div class="left_con sprh-left">
+      <div class="top_txt">
+        <b>汽开区</b>
+        <span>小雨</span>
+        <span>9~16℃</span>
+      </div>
+      <!-- 设备tab开始-->
+      <div class="facility_tab">
+        <div class="div_tab">
+          <a>单屏</a>
+          <a>电视墙</a>
+        </div>
+        <div class="clear"></div>
+        <div class="tab_cont">
+          <div class="qkq_tdzy">
+            <div class="qkq_tit ">设备列表</div>
+            <div class="selectDate">
+              <span class="_selectData">锦程街道</span>
+              <a class="icon_more" @click="toggleDropdown($event)"><img src="@/assets/images/down.png"/></a>
+              <div class="_moreMenu" v-if="dropdownVisible">
+                <ul>
+                  <li class="change">东风街道</li>
+                  <li>锦程街道</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <ul id="accordion" class="accordion">
+            <li v-for="(camera, index) in cameras" :key="index">
+              <div class="link">{{ camera.cameraName }}</div>
+            </li>
+          </ul>
+        </div>
+        <div class="tab_cont"></div>
+      </div>
+      <!-- 设备tab结束-->
+    </div>
+    <!--左侧结束-->
+    <!--右侧开始-->
+    <div class="right_con sprh-left">
+      <div class="top_txt">
+        <span>{{ currentTime }}</span>
+<!--        <span>星期六</span>-->
+<!--        <b>11:16:58</b>-->
+      </div>
+      <!-- 资源分布-->
+      <div class="qkq_tdzy">
+        <div class="qkq_tit ">资源分布</div>
+        <div class="selectDate">
+          <span class="_selectData">锦程街道</span>
+          <a class="icon_more" @click="toggleDropdown($event)"><img src="@/assets/images/down.png"/></a>
+          <div class="_moreMenu" v-if="dropdownVisible">
+            <ul>
+              <li class="change">东风街道</li>
+              <li>锦程街道</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div id="sprh-zyfb" style="margin:10px auto; width: 350px; height:240px;"></div>
+      <!-- 资源分布-->
+      <div class="qkq_tdzy">
+        <div class="qkq_tit ">设备实时在线情况</div>
+      </div>
+      <div class="sbzs">
+        <p>设备总数：</p>
+        <span>1</span>
+        <span>6</span>
+        <span>4</span>
+        <span>0</span>
+        <p>个</p>
+      </div>
+      <div class="sb_cont">
+        <div class="sb_in">
+          <div id="sprh-zxfb" style="width:130px; height:150px;margin: 0 auto;"></div>
+          <span class="zxsb">在线设备</span>
+          <h2 class="zxsb_sl">1234<i>个</i></h2>
+        </div>
+        <div class="sb_in">
+          <div id="sprh-lxfb" style="width:130px; height:150px;margin: 0 auto;"></div>
+          <span class="lxsb">离线设备</span>
+          <h2 class="lxsb_sl">234<i>个</i></h2>
+        </div>
+      </div>
+    </div>
+    <!--右侧结束-->
+    <!--底部开始-->
+    <div class="footer">
+      <div class="nav-bottom">
+        <div class="nav-bottom-left">
+          <div class="nav-li-left">
+            <span>经济运行</span>
+          </div>
+          <div class="nav-li-left">
+            <span>城市管理</span>
+          </div>
+          <div class="nav-li-left on">
+            <span>交通治理</span>
+          </div>
+          <div class="nav-li-left" @click="handleNavigation('jczl')">
+            <span>基层治理</span>
+          </div>
+        </div>
+        <div class="nav-home-middle" @click="homePage('weather')">
+          <img src="@/assets/images/home-btn.png"/>
+          <a>返回首页</a>
+        </div>
+        <div class="nav-bottom-right">
+          <div class="nav-li-right">
+            <span>营商环境</span>
+          </div>
+          <div class="nav-li-right" @click="handleNavigation('yshj')">
+            <span>政务运行</span>
+          </div>
+          <div class="nav-li-right" @click="handleNavigation('sprh')">
+            <span>安全应急</span>
+          </div>
+          <div class="nav-li-right">
+            <span>服务一汽</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--底部开始-->
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import $ from 'jquery'
+import jQuery from 'jquery'
+import "@/assets/images/qkq_body.css";
+import "@/assets/images/qkq_index.css";
+import "@/assets/images/qkq_sprh.css";
+import {getCameraList} from "@/api/system/camera";
+import supermap from "@/views/supermap/supermap";
+
+
+export default {
+  name: "jtzl",
+  components: {
+    supermap
+  },
+  data() {
+    return {
+      dropdownVisible: false,
+      cameras: [],
+      sltProps: null,
+      currentTime: ''
+    };
+    // 可根据实际情况添加更多设备列表
+  },
+  created() {
+  },
+  mounted() {
+    this.resourceDistribution();
+    this.deviceOnline();
+    this.deviceOffline();
+    this.cameraList();
+    // 每秒刷新时间
+    setInterval(() => {
+      this.getCurrentTime();
+    }, 1000);
+  },
+
+  methods: {
+    sltHandle() {
+      this.$refs.supermap.getSupermap(null,null,null,"slt",null,null)
+    },
+    yxtHandle() {
+      this.$refs.supermap.getSupermap(null,null,null,"yxt",null,null)
+    },
+    handleNavigation(route) {
+      this.$router.push({path: route});
+    },
+    homePage(route) {
+      this.$router.push({path: route});
+    },
+    cameraList() {
+      getCameraList().then(response => {
+        this.cameras = response.data;
+      })
+    },
+    toggleDropdown(event) {
+      this.dropdownVisible = !this.dropdownVisible;
+    },
+    resourceDistribution() {
+      //资源分布
+      var myChart = echarts.init(document.getElementById('sprh-zyfb'));
+      let data = [
+        { value: 0, label: '前程街道' },
+        { value: 0, label: '富民街道' },
+        { value: 0, label: '广兴街道' },
+        { value: 0, label: '东风街道' },
+        { value: 0, label: '锦绣街道' },
+        { value: 0, label: '锦程街道' }
+      ];
+      let option = {
+        grid: {
+          top: 10,
+          left: 33,
+          right: 20,
+          bottom: 5,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false
+        },
+        yAxis: {
+          show: true,
+          inverse: true,
+          type: 'category',
+          axisLine: {
+            show: false
+          }
+        },
+        series: [{
+          name: 'label',
+          type: 'bar',
+          barWidth: 10,
+          yAxisIndex: 0,
+          label: {
+            show: true,
+            position: 2,
+            color: '#fff',
+            fontSize: 12
+          },
+          data: data.map((item) => {
+            return {
+              value: 0,
+              label: {
+                formatter() {
+                  return item.label;
+                }
+              }
+            };
+          })
+        }, {
+          name: 'value',
+          type: 'bar',
+          barWidth: 10,
+          barMinHeight: 10, // 最小高度
+          yAxisIndex: 0,
+          label: {
+            show: true,
+            position: 'right',
+            color: '#00d5e1',
+            fontSize: 12,
+            rich: {
+              value: {
+                color: '#00e1ce'
+              }
+            },
+            formatter({
+                        value
+                      }) {
+              return `{value|${value}个}`;
+            }
+          },
+          itemStyle: {
+            barBorderRadius: 3
+          },
+          data: data.map(({
+                            value
+                          }, index) => {
+            let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
+              offset: 1,
+              color: '#004eaf' // 0% 处的颜色
+            }, {
+              offset: 0,
+              color: '#089aa2' // 100% 处的颜色
+            }], false)
+            return {
+              value,
+              label: {
+                color
+              },
+              itemStyle: {
+                color
+              }
+            };
+          })
+        }]
+      };
+
+      if (option) {
+        myChart.setOption(option);
+      }
+
+      let updateInterval = 1000; // 更新间隔，单位：毫秒
+      let updateData = () => {
+        data.forEach((item) => {
+          item.value += Math.floor(Math.random() * 10); // 模拟逐渐增加的数据
+          if (item.value >= 1000) {
+            item.value = 0; // 当增加到1000时重新开始
+          }
+        });
+
+        option.series[1].data = data.map(({ value }, index) => {
+          let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
+            offset: 1,
+            color: '#004eaf'
+          }, {
+            offset: 0,
+            color: '#089aa2'
+          }], false);
+
+          return {
+            value,
+            label: { color },
+            itemStyle: { color }
+          };
+        });
+
+        myChart.setOption(option);
+      };
+
+      updateData(); // 首次更新数据
+
+      let timer = setInterval(updateData, updateInterval);
+    },
+    deviceOnline() {
+      //在线设备
+      var myChart = echarts.init(document.getElementById('sprh-zxfb'));
+      const dataArr = [
+        {
+          value: 0,  // 初始值设为0
+          name: '在线',
+        },
+      ];
+
+      const updateData = () => {
+        let value = dataArr[0].value + 10;  // 每次增加的数值
+        if (value > 500) {
+          value = 0;  // 当数值达到1000时重置为0
+        }
+        dataArr[0].value = value;
+        myChart.setOption({
+          series: [{
+            data: dataArr,
+          }],
+        });
+      };
+
+      setInterval(updateData, 1000);  // 每隔一秒更新一次数据
+
+      let option = {
+        tooltip: {
+          formatter: '{a} <br/>{b} : {c}%',
+        },
+        series: [
+          {
+            type: 'gauge',
+            radius: '90%',
+            startAngle: '225',
+            endAngle: '-45',
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return '{bule|' + num + '}{white|%}';
+              },
+              rich: {
+                white: {
+                  fontSize: 10,
+                  color: '#0454bf',
+                  fontWeight: '500',
+                },
+                bule: {
+                  fontSize: 22,
+                  fontFamily: 'DINBold',
+                  color: '#0454bf',
+                  fontWeight: '700',
+                },
+              },
+              offsetCenter: ['0%', '0%'],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: '#0454bf',
+              offsetCenter: ['0', '75%'],
+              fontSize: 14
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: [
+                  [0.61, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                    { offset: 0, color: '#0d4470' },
+                    { offset: 1, color: '#0659c9' }
+                  ])],
+                  [1, '#15337C'],
+                ],
+                width: 20,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: '#051c48',
+                width: 2,
+                type: 'solid',
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+
+      myChart.setOption(option);
+    },
+
+
+    deviceOffline() {
+      // 视频融合--离线设备
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('sprh-lxfb'));
+      const dataArr1 = [
+        {
+          value: 39,
+          name: '离线',
+        },
+      ];
+      const color1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: '#976204', // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#e1b905', // 100% 处的颜色
+        },
+      ]);
+      const colorSet1 = [
+        [0.39, color1],
+        [1, '#15337C'],
+      ];
+      const rich1 = {
+        white: {
+          fontSize: 10,
+          color: '#ae8609',
+          fontWeight: '500',
+        },
+        bule: {
+          fontSize: 22,
+          fontFamily: 'DINBold',
+          color: '#ae8609',
+          fontWeight: '700',
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: '#051c48',
+          fontSize: 50,
+          color: '#ae8609',
+          backgroundColor: '#051c48',
+          borderRadius: 20,
+          textAlign: 'center',
+        },
+        size: {
+          height: 400,
+          padding: [50, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: '{a} <br/>{b} : {c}%',
+        },
+
+        series: [
+          {
+            type: 'gauge',
+            radius: '90%',
+            startAngle: '225',
+            endAngle: '-45',
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return '{bule|' + num + '}{white|%}';
+              },
+              rich: rich1,
+              offsetCenter: ['0%', '0%'],
+            },
+
+            data: dataArr1,
+            title: {
+              show: true,
+              color: '#ae8609',
+              offsetCenter: ['0', '75%'],
+              fontSize: 14
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet1,
+                width: 20,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: '#051c48',
+                width: 2,
+                type: 'solid',
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+
+      if (option) {
+        myChart.setOption(option);
+      }
+      let value = 0;
+      setInterval(() => {
+        value = value >= 1000 ? 0 : value + 5; // 数据从0开始往上涨，涨到1000再重新开始
+        dataArr1[0].value = value;
+        myChart.setOption({
+          series: [{
+            data: dataArr1
+          }]
+        });
+      }, 1000); // 每100毫秒更新一次数据，可以根据需要调整时间间隔
+    },
+
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = now.getMonth() + 1;
+      const date = now.getDate();
+      const day = now.getDay();
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      const hour = now.getHours();
+      const minute = now.getMinutes();
+      const second = now.getSeconds();
+
+      const formattedMonth = month < 10 ? `0${month}` : month;
+      const formattedDate = date < 10 ? `0${date}` : date;
+      const formattedHour = hour < 10 ? `0${hour}` : hour;
+      const formattedMinute = minute < 10 ? `0${minute}` : minute;
+      const formattedSecond = second < 10 ? `0${second}` : second;
+
+      this.currentTime = `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
+    },
+  }
+};
+
+// import '@/assets/images/TL_Tab.js';
+(function ($) {
+  $.fn.TL_Tab = function (options) {
+    var defaults = {
+      tab: ".df_67 ol li",
+      box: ".df_67 ul li",
+      events: "over",
+      num: 3,
+      speed: 300
+    };
+    var setting = $.extend(defaults, options);
+
+    var tl_tab = setting.tab;
+    var tl_box = setting.box;
+    var tl_events = setting.events;
+    var tl_num = setting.num;
+    var tl_speed = setting.speed;
+
+    var tl_time_out = null;
+
+    $(tl_box).css({
+      display: 'none'
+    });
+
+    $(tl_tab).removeClass('df_on');
+    $(tl_tab).eq(tl_num - 1).addClass('df_on');
+
+    $(tl_box).eq(tl_num - 1).css({
+      display: 'block'
+    });
+
+    if (tl_events === 'click') {
+      $(tl_tab).click(function () {
+        $(tl_tab).removeClass('df_on');
+        $(tl_tab).eq($(this).index()).addClass('df_on');
+        $(tl_box).stop().fadeOut(tl_speed);
+        $(tl_box).eq($(this).index()).stop().fadeIn(tl_speed);
+      });
+    }
+    if (tl_events === 'over') {
+      $(tl_tab).hover(function () {
+        var _this = this;
+        clearTimeout(tl_num);
+        tl_time_out = setTimeout(function () {
+          $(tl_tab).removeClass('df_on');
+          $(tl_tab).eq($(_this).index()).addClass('df_on');
+          $(tl_box).stop().fadeOut(tl_speed);
+          $(tl_box).eq($(_this).index()).stop().fadeIn(tl_speed);
+        }, 30);
+
+      }, function () {
+        clearTimeout(tl_time_out);
+      });
+    }
+
+  };
+})(jQuery);
+
+
+// import '@/assets/images/leftnav.js';
+$(function () {
+  var Accordion = function (el, multiple) {
+    this.el = el || {};
+    this.multiple = multiple || false;
+
+    // Variables privadas
+    var links = this.el.find('.link');
+    // Evento
+    links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
+  };
+
+  Accordion.prototype.dropdown = function (e) {
+    var $el = e.data.el;
+    let $this = $(this);
+    let $next = $this.next();
+
+    $next.slideToggle();
+    $this.parent().toggleClass('open');
+
+    if (!e.data.multiple) {
+      $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
+    }
+  };
+
+  var accordion = new Accordion($('#accordion'), false);
+  $('.submenu li').click(function () {
+    $(this).addClass('current').siblings('li').removeClass('current');
+  });
+});
+
+//切换单屏电视墙
+$(function () {
+  $(this.$el).find('.facility_tab .div_tab a').TL_Tab({
+    tab: ".facility_tab .div_tab a",
+    box: ".facility_tab .tab_cont",
+    events: "click",
+    num: 1,
+    speed: 10
+  });
+});
+
+
+</script>
+
+<style>
+/* 添加你的CSS样式 */
+
+</style>

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

@@ -11,10 +11,10 @@
     <!--头部开始-->
     <div class="header">
       <h1>城市运行一网统管指挥中心</h1>
-			<div class="map_tab">
-				<button @click="sltHandle" class="on">矢量图</button>
-				<button @click="yxtHandle">影像图</button>
-			</div>
+      <div class="map_tab">
+        <button @click="sltHandle" class="on">矢量图</button>
+        <button @click="yxtHandle">影像图</button>
+      </div>
     </div>
     <!--头部结束-->
     <!--左侧开始-->
@@ -35,12 +35,12 @@
           <div class="qkq_tdzy">
             <div class="qkq_tit ">设备列表</div>
             <div class="selectDate">
-              <span class="_selectData">程锦街道</span>
+              <span class="_selectData">锦程街道</span>
               <a class="icon_more" @click="toggleDropdown($event)"><img src="@/assets/images/down.png"/></a>
               <div class="_moreMenu" v-if="dropdownVisible">
                 <ul>
                   <li class="change">东风街道</li>
-                  <li>程锦街道</li>
+                  <li>锦程街道</li>
                 </ul>
               </div>
             </div>
@@ -59,20 +59,20 @@
     <!--右侧开始-->
     <div class="right_con sprh-left">
       <div class="top_txt">
-        <span>2024.04.20</span>
-        <span>星期六</span>
-        <b>11:16:58</b>
+        <span>{{ currentTime }}</span>
+        <!--        <span>星期六</span>-->
+        <!--        <b>11:16:58</b>-->
       </div>
       <!-- 资源分布-->
       <div class="qkq_tdzy">
         <div class="qkq_tit ">资源分布</div>
         <div class="selectDate">
-          <span class="_selectData">程锦街道</span>
+          <span class="_selectData">锦程街道</span>
           <a class="icon_more" @click="toggleDropdown($event)"><img src="@/assets/images/down.png"/></a>
           <div class="_moreMenu" v-if="dropdownVisible">
             <ul>
               <li class="change">东风街道</li>
-              <li>程锦街道</li>
+              <li>锦程街道</li>
             </ul>
           </div>
         </div>
@@ -114,10 +114,10 @@
           <div class="nav-li-left">
             <span>城市管理</span>
           </div>
-          <div class="nav-li-left">
+          <div class="nav-li-left on" @click="handleNavigation('jtzl')">
             <span>交通治理</span>
           </div>
-          <div class="nav-li-left">
+          <div class="nav-li-left on" @click="handleNavigation('jczl')">
             <span>基层治理</span>
           </div>
         </div>
@@ -129,7 +129,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')">
@@ -165,7 +165,8 @@ export default {
     return {
       dropdownVisible: false,
       cameras: [],
-      sltProps: null
+      sltProps: null,
+      currentTime: ''
     };
     // 可根据实际情况添加更多设备列表
   },
@@ -176,14 +177,18 @@ export default {
     this.deviceOnline();
     this.deviceOffline();
     this.cameraList();
+    // 每秒刷新时间
+    setInterval(() => {
+      this.getCurrentTime();
+    }, 1000);
   },
 
   methods: {
     sltHandle() {
-      this.$refs.supermap.getSupermap(null,null,null,"slt",null,null)
+      this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
     },
     yxtHandle() {
-      this.$refs.supermap.getSupermap(null,null,null,"yxt",null,null)
+      this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
     },
     handleNavigation(route) {
       this.$router.push({path: route});
@@ -203,12 +208,12 @@ export default {
       //资源分布
       var myChart = echarts.init(document.getElementById('sprh-zyfb'));
       let data = [
-        { value: 0, label: '前程街道' },
-        { value: 0, label: '富民街道' },
-        { value: 0, label: '广兴街道' },
-        { value: 0, label: '东风街道' },
-        { value: 0, label: '锦绣街道' },
-        { value: 0, label: '锦城街道' }
+        {value: 0, label: '前程街道'},
+        {value: 0, label: '富民街道'},
+        {value: 0, label: '广兴街道'},
+        {value: 0, label: '东风街道'},
+        {value: 0, label: '锦绣街道'},
+        {value: 0, label: '锦程街道'}
       ];
       let option = {
         grid: {
@@ -312,7 +317,7 @@ export default {
           }
         });
 
-        option.series[1].data = data.map(({ value }, index) => {
+        option.series[1].data = data.map(({value}, index) => {
           let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
             offset: 1,
             color: '#004eaf'
@@ -323,8 +328,8 @@ export default {
 
           return {
             value,
-            label: { color },
-            itemStyle: { color }
+            label: {color},
+            itemStyle: {color}
           };
         });
 
@@ -405,8 +410,8 @@ export default {
               lineStyle: {
                 color: [
                   [0.61, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                    { offset: 0, color: '#0d4470' },
-                    { offset: 1, color: '#0659c9' }
+                    {offset: 0, color: '#0d4470'},
+                    {offset: 1, color: '#0659c9'}
                   ])],
                   [1, '#15337C'],
                 ],
@@ -564,7 +569,27 @@ export default {
           }]
         });
       }, 1000); // 每100毫秒更新一次数据，可以根据需要调整时间间隔
-    }
+    },
+
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = now.getMonth() + 1;
+      const date = now.getDate();
+      const day = now.getDay();
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      const hour = now.getHours();
+      const minute = now.getMinutes();
+      const second = now.getSeconds();
+
+      const formattedMonth = month < 10 ? `0${month}` : month;
+      const formattedDate = date < 10 ? `0${date}` : date;
+      const formattedHour = hour < 10 ? `0${hour}` : hour;
+      const formattedMinute = minute < 10 ? `0${minute}` : minute;
+      const formattedSecond = second < 10 ? `0${second}` : second;
+
+      this.currentTime = `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
+    },
   }
 };
 

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

@@ -117,10 +117,10 @@
           <div class="nav-li-left">
             <span>城市管理</span>
           </div>
-          <div class="nav-li-left on" @click="serviceFAW('sprh')">
+          <div class="nav-li-left on" @click="serviceFAW('jtzl')">
             <span>交通治理</span>
           </div>
-          <div class="nav-li-left">
+          <div class="nav-li-left" @click="serviceFAW('jczl')">
             <span>基层治理</span>
           </div>
         </div>
@@ -191,12 +191,12 @@ export default {
     regionTop() {
       var myChart = echarts.init(document.getElementById('sprh-zyfb'));
       let data = [
-        { value: 0, label: '前程街道' },
-        { value: 0, label: '富民街道' },
-        { value: 0, label: '广兴街道' },
-        { value: 0, label: '东风街道' },
-        { value: 0, label: '锦绣街道' },
-        { value: 0, label: '锦城街道' }
+        {value: 0, label: '前程街道'},
+        {value: 0, label: '富民街道'},
+        {value: 0, label: '广兴街道'},
+        {value: 0, label: '东风街道'},
+        {value: 0, label: '锦绣街道'},
+        {value: 0, label: '锦城街道'}
       ];
 
       let option = {
@@ -234,9 +234,11 @@ export default {
             data: data.map((item) => {
               return {
                 value: 0,
-                label: { formatter() {
+                label: {
+                  formatter() {
                     return item.label;
-                  } }
+                  }
+                }
               };
             })
           },
@@ -265,7 +267,7 @@ export default {
             itemStyle: {
               barBorderRadius: 3
             },
-            data: data.map(({ value }, index) => {
+            data: data.map(({value}, index) => {
               let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                 offset: 1,
                 color: '#004eaf'
@@ -276,8 +278,8 @@ export default {
 
               return {
                 value,
-                label: { color },
-                itemStyle: { color }
+                label: {color},
+                itemStyle: {color}
               };
             })
           }
@@ -293,7 +295,7 @@ export default {
           }
         });
 
-        option.series[1].data = data.map(({ value }, index) => {
+        option.series[1].data = data.map(({value}, index) => {
           let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
             offset: 1,
             color: '#004eaf'
@@ -304,8 +306,8 @@ export default {
 
           return {
             value,
-            label: { color },
-            itemStyle: { color }
+            label: {color},
+            itemStyle: {color}
           };
         });
 
@@ -479,203 +481,203 @@ export default {
         myChart.setOption(option);
       }
     },
-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'
+    matterUpTop() {
+      var myChart = echarts.init(document.getElementById('sprh-sxbjl10'));
+      var datas = [{
+        "value": 30,
+        "name": "特种设备安全管.."
       },
-      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'
-            }
-          }
+        {
+          "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"
         },
-        formatter: (name) => {
-          var index = (datas.map(item => item.name)).indexOf(name) + 1;
-          return [
-            '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
-            '{name|' + name + '}'
-          ].join(' ')
+        {
+          "value": 100,
+          "name": "一孩、二孩、三孩1.. "
         }
-      },
-      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'
+      ]
+      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: '{value}'
+          formatter: function (params) {
+            return params[0].name + ' : ' + params[0].value
+          }
         },
-        data: datas.map(item => item.value)
-      }
-    ],
-    series: [{
-      name: '值',
-      type: 'bar',
-      zlevel: 1,
-      itemStyle: {
-        normal: {
-          barBorderRadius: 5,
-          color: '#3196fa',
+        xAxis: {
+          show: false,
+          type: 'value'
         },
-        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,
+        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: (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'
+              },
+              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); // 随机生成新的值
-    });
+      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秒钟更新一次数据
+        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);
-  }
-},
+      // 初次渲染图表
+      if (option) {
+        myChart.setOption(option);
+      }
+    },
     matterTop() {
       var myChart = echarts.init(document.getElementById('sprh-sxbjl-top'));
       var datas = [{
@@ -845,9 +847,9 @@ matterUpTop() {
         myChart.setOption(option);
       }
       // 设置定时器，每隔一段时间更新数据并重绘图表
-      setInterval(function() {
+      setInterval(function () {
         // 更新数据和名字，并重新渲染图表
-        datas.forEach(function(item) {
+        datas.forEach(function (item) {
           item.value = Math.floor(Math.random() * 100); // 随机生成新的值
         });
 

zhsq_qk-ui/src/views/login.vue

@@ -141,7 +141,9 @@ export default {
             Cookies.remove('rememberMe');
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({path: this.redirect || "/weather"}).catch(() => {
+            this.$router.push({path:
+                // this.redirect ||
+                "/weather"}).catch(() => {
             });
           }).catch(() => {
             this.loading = false;