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

<template>
  <div>
    <div class="map">
      <img src="@/assets/images/sprh-map.png" />
    </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>
    <!--头部结束-->
    <!--左侧开始-->
    <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>2024.04.20</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">
            <span>交通治理</span>
          </div>
          <div class="nav-li-left">
            <span>基层治理</span>
          </div>
        </div>
        <div class="nav-home-middle">
          <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">
            <span>政务运行</span>
          </div>
          <div class="nav-li-right">
            <span>安全应急</span>
          </div>
          <div class="nav-li-right on">
            <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";



export default {
  name: "sprh",
  data() {
    return {
      dropdownVisible: false,
      cameras: []
    };
      // 可根据实际情况添加更多设备列表
  },
  created() {
  },
  mounted() {
    this.resourceDistribution();
    this.deviceOnline();
    this.deviceOffline();
    this.cameraList();
  },

  methods: {
    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: 120,
        label: '东兴网格'
      }, {
        value: 142,
        label: '胜利网格'
      }, {
        value: 110,
        label: '裕民网格'
      },
        {
          value: 132,
          label: '首期网格'
        },
        {
          value: 132,
          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,
            formatter({
                        value
                      }) {
              return `${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);
      }
    },
    deviceOnline() {
      // 视频融合--在线设备
// 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('sprh-zxfb'));
      const dataArr = [
        {
          value: 61,
          name: '在线',
        },
      ];
      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: '#0d4470', // 0% 处的颜色
        },
        {
          offset: 1,
          color: '#0659c9', // 100% 处的颜色
        },
      ]);
      const colorSet = [
        [0.61, color],
        [1, '#15337C'],
      ];
      const rich = {
        white: {
          fontSize: 10,
          color: '#0454bf',
          fontWeight: '500',
        },
        bule: {
          fontSize: 22,
          fontFamily: 'DINBold',
          color: '#0454bf',
          fontWeight: '700',
        },
        radius: {
          width: 350,
          height: 80,
          // lineHeight:80,
          borderWidth: 1,
          borderColor: '#051c48',
          fontSize: 50,
          color: '#0454bf',
          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: rich,
              offsetCenter: ['0%', '0%'],
            },

            data: dataArr,
            title: {
              show: true,
              color: '#0454bf',
              offsetCenter: ['0', '75%'],
              fontSize: 14
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colorSet,
                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);
      }
    },
    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);
      }
    }
  }
};

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