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

<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': btnOne }">矢量图</button>
        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</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:220px;"></div>
      <!-- 资源分布-->
      <div class="qkq_tdzy">
        <div class="qkq_tit" style="margin-top: -35px">设备实时在线情况</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 class="qkq_bmfw">
        <div class="qkq_tit ">摄像头统计</div>
        <div id="jczl-bmfw" style="margin: 20px auto 0px auto; width: 350px; height: 220px"></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" @click="handleNavigation('jtzl')">
            <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: '',
      btnOne: false,
      btnTwo: false
    };
    // 可根据实际情况添加更多设备列表
  },
  created() {
  },
  mounted() {
    this.resourceDistribution();
    this.deviceOnline();
    this.deviceOffline();
    this.cameraList();
    this.regionTop();
    // 每秒刷新时间
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  },

  methods: {
    sltHandle() {
      this.btnOne = true
      this.btnTwo = false
      this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
    },
    yxtHandle() {
      this.btnTwo = true
      this.btnOne = false
      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}`;
    },

    regionTop() {
      //摄像头统计
      var myChart = echarts.init(document.getElementById('jczl-bmfw'));
      let data = ['小区建设', '路面建设', '已有']
      let valueData = [];
      let labelData = []
      for (var i = 0; i < data.length; i++) {
        labelData.push(data[i]);
        var lineNumber = Math.floor(Math.random() * 2000);
        valueData.push(lineNumber);
      }
      var option = {
        title: {
          show: true,
          text: '',
          textStyle: {
            color: '#fff',
            fontSize: '14',
          },
          top: '0%',
          left: 'bottom',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10%',
          left: '15%',
          right: '5%',
          buttom: '0',
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
            },
          },
          axisLabel: {
            margin: 10,
            color: '#e2e9ff',
            textStyle: {
              fontSize: 14
            },
          },
          axisTick: {
            show: false,
          },
          data: labelData
        },
        yAxis: {
          name: '',
          nameTextStyle: {
            color: '#fff',
          },
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            },
          },
          axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff',
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#fff',
            },
          },
        },
        series: [{
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(30, 129, 204, 1.0)'
            }, {
              offset: 1,
              color: 'rgba(21, 37, 126, 1.0)'
            }], false),
            barBorderRadius: 8,
            opacity: 0.8
          },
          barWidth: 14,
          label: {
            show: true,
            position: ['0', '-12'],
            color: '#fff',
          },
          data: valueData,
          type: 'bar',
        }]
      };
      var currentIndex = -1;
      var timer = setInterval(function () {
        // 生成新的随机数据
        currentIndex++;
        if (currentIndex >= 3) {
          currentIndex = 0;
          for (var i = 0; i < valueData.length; i++) {
            valueData[i] = Math.floor(Math.random() * 2000);
          }
        } else {
          valueData[currentIndex] = Math.floor(Math.random() * 2000);
        }

        // 更新 option 中的数据
        option.series[0].data = valueData;

        // 重新渲染图表
        myChart.setOption(option);
      }, 1000); // 每秒更新一次数据
      if (option) {
        myChart.setOption(option);
      }
    },
  }
};

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