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

<template>
  <div style="background-color: #32435A">
    <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 class="on">单屏</a>
          <a>电视墙</a>
        </div>
        <div class="clear"></div>
		<form class="qkq_ss">
			<input type="text" placeholder="请输入搜索词" class="inp_ss"/>
			<input type="button" class="inp_btn" value="搜索"/>
		</form>
        <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>
		  <div class="scrollbar" style="height: 510px;">
          <ul id="accordion" class="accordion">
			  <!-- lx_on 离线      zx_on在线 -->
            <li v-for="(camera, index) in cameras" :key="index" :class="{ 'zx_on': camera.cameraStatus == 1, 'lx_on': camera.cameraStatus == 2 }">
              <div class="link">{{ camera.cameraName }}</div>
            </li>
          </ul>
		  	</div>
        </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:-5px auto 10px auto; width: 350px; height:150px;"></div>
      <!-- 资源分布-->
      <div class="qkq_tdzy">
        <div class="qkq_tit" style="margin-top: -35px">设备实时在线情况</div>
      </div>
      <div class="sbzs">
        <p>设备总数：</p>
        <span>{{cameraOnlineSituation.total}}个</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:140px;margin: 0 auto;"></div>
          <span class="zxsb">在线设备</span>
          <h2 class="zxsb_sl">{{cameraOnlineSituation.onLine}}<i>个</i></h2>
        </div>
        <div class="sb_in">
          <div id="sprh-lxfb" style="width:130px; height:140px;margin: 0 auto;"></div>
          <span class="lxsb">离线设备</span>
          <h2 class="lxsb_sl">{{cameraOnlineSituation.offLine}}<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: 160px"></div>
        <div class="sb_cont sb_cont_sxt">
          <div class="sb_in">
            <span class="lxsb">小区内部</span>
            <h2 class="zxsb_sl">{{ cameraStatisticsData.inside }}<i>个</i></h2>
          </div>
          <div class="sb_in">
            <span class="lxsb">街道路面</span>
            <h2 class="lxsb_sl">{{ cameraStatisticsData.pavement }}<i>个</i></h2>
          </div>
        </div>
      </div>
    </div>
    <!--右侧结束-->
    <!-- 点位图例 开始 -->
    <div class="dwtl">
      <p><span class="xqnb"></span>街道路面(<i class="zx"></i>{{ this.cameraOnlineSituationType.pavementOnLine }}个/<i class="lx"></i>{{ this.cameraOnlineSituationType.pavementOffLine }}个)</p>
      <p><span class="jdlm"></span>小区内部(<i class="zx"></i>{{ this.cameraOnlineSituationType.insideOnLine }}个/<i class="lx"></i>{{ this.cameraOnlineSituationType.insideOffLine }}个)</p>
    </div>
    <!-- 点位图例 结束 -->
    <!--底部开始-->
    <div class="footer">
      <div class="nav-bottom">
        <div class="nav-bottom-left">
          <div class="nav-li-left" @click="handleNavigation('jjyx')">
            <span>经济运行</span>
          </div>
          <div class="nav-li-left" @click="handleNavigation('csgl')">
            <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" @click="handleNavigation('yshj_new')">
            <span>营商环境</span>
          </div>
          <div class="nav-li-right" @click="handleNavigation('bjzshz')">
            <span>政务运行</span>
          </div>
          <div class="nav-li-right" @click="handleNavigation('aqyj')">
            <span>安全应急</span>
          </div>
          <div class="nav-li-right" @click="handleNavigation('fwyq')">
            <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";
import {
  getCameraOnlineSituationList,
  getCameraStatisticsByTypeList,
  getCameraStatisticsList
} from "@/api/jtzl/statistics";


export default {
  name: "jtzl",
  components: {
    supermap
  },
  data() {
    return {
      dropdownVisible: false,
      cameras: [],
      sltProps: null,
      currentTime: '',
      btnOne: true,
      btnTwo: false,
      cameraStatisticsData:{},
      cameraOnlineSituation:{},
      cameraOnlineSituationType:{},
      // 查询参数
      queryParams: {},
    };
    // 可根据实际情况添加更多设备列表
  },
  created() {
    this.getCameraOnlineSituationList()
    this.getCameraStatisticsList()
    this.getCameraStatisticsByTypeList()
  },
  mounted() {
    this.resourceDistribution();
    // this.deviceOnline();
    // this.deviceOffline();
    this.cameraList();
    // this.regionTop();
    // 每秒刷新时间
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  },

  methods: {
    getCameraOnlineSituationList(){
      getCameraOnlineSituationList(this.queryParams).then(res => {
        this.cameraOnlineSituation = res.data;
        this.deviceOnline(this.cameraOnlineSituation.onLineRate)
        this.deviceOffline(this.cameraOnlineSituation.offLineRate)
      });
    },
    getCameraStatisticsList(){
      getCameraStatisticsList(this.queryParams).then(res => {
        this.cameraStatisticsData = res.data;
        this.regionTop(res.data.list)
      });
    },
    getCameraStatisticsByTypeList(){
      getCameraStatisticsByTypeList(this.queryParams).then(res => {
        this.cameraOnlineSituationType = res.data;
      });
    },
    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'));
      var salvProName = ['前程街道', '富民街道', '广兴街道', '东风街道', '锦绣街道', '锦程街道'];
      var salvProValue = [239, 181, 154, 144, 135, 117, 124];
      var salvProMax = [];//背景按最大值
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0])
      }
      let option = {
        grid: {
          top: 0,
          left: 33,
          right: 20,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          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,
            textStyle: {
              color: '#fff'
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: salvProName
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '12'
            },
          },
          data: salvProValue.map((item) => {
            return item + "个";
          })
        }],
        series: [{
          name: '值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#0e3eaf'
              }, {
                offset: 1,
                color: '#00ffff'
              }]),
            },
          },
          barWidth: 20,
          data: salvProValue
        },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: salvProValue.map((item, index) => {
              return {
                coords: [
                  [0, index],
                  [item - 4, index]
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,
              trailLength: 0.4, //控制拖尾长度
              symbolSize: [20, 14],
              symbol: 'path://M960.406636 698.413644c0-247.648286-200.75835-448.405613-448.405613-448.40561301s-448.405613 200.75835-448.405613 448.40561301c0 25.761734 2.203178 51.004651 6.374174 75.578326L954.031439 773.991969C958.203458 749.419318 960.406636 724.175377 960.406636 698.413644z',
              loop: true,
              color: '#fff'   //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              // curveness: 0
            },
            zlevel: 10,
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
              normal: {
                color: 'rgba(24,31,68,1)',
                barBorderRadius: 30,
              }
            },
          },
        ]
      };
      if (option) {
        myChart.setOption(option);
      }
    },

    deviceOnline(val) {
      //在线设备
      var myChart = echarts.init(document.getElementById('sprh-zxfb'));
      let angle = 0; //角度，用来做简单的动画效果的
      let value = val
      var timerId;
      let option = {
        title: {
          text: '{a|' + value + '}{c|%}',
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 24,
                color: '#29EEF3'
              },

              c: {
                fontSize: 16,
                color: '#ffffff',
                // padding: [5,0]
              }
            }
          }
        },
        series: [
          // 紫色
          {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
                  startAngle: (0 + angle) * Math.PI / 180,
                  endAngle: (90 + angle) * Math.PI / 180
                },
                style: {
                  stroke: "#8383FA",
                  fill: "transparent",
                  lineWidth: 1.5
                },
                silent: true
              };
            },
            data: [0]
          }, {
            name: "ring5", //紫点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
              let point = getCirlPoint(x0, y0, r, (90 + angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: "#8450F9", //绿
                  fill: "#8450F9"
                },
                silent: true
              };
            },
            data: [0]
          },
          // 蓝色
          {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
                  startAngle: (180 + angle) * Math.PI / 180,
                  endAngle: (270 + angle) * Math.PI / 180
                },
                style: {
                  stroke: "#4386FA",
                  fill: "transparent",
                  lineWidth: 1.5
                },
                silent: true
              };
            },
            data: [0]
          },
          {
            name: "ring5", // 蓝色
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
              let point = getCirlPoint(x0, y0, r, (180 + angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: "#4386FA", //绿
                  fill: "#4386FA"
                },
                silent: true
              };
            },
            data: [0]
          },
          {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
                  startAngle: (270 + -angle) * Math.PI / 180,
                  endAngle: (40 + -angle) * Math.PI / 180
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5
                },
                silent: true
              };
            },
            data: [0]
          },
          // 橘色
          {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
                  startAngle: (90 + -angle) * Math.PI / 180,
                  endAngle: (220 + -angle) * Math.PI / 180
                },
                style: {
                  stroke: "#FF8E89",
                  fill: "transparent",
                  lineWidth: 1.5
                },
                silent: true
              };
            },
            data: [0]
          }, {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
              let point = getCirlPoint(x0, y0, r, (90 + -angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: "#FF8E89", //粉
                  fill: "#FF8E89"
                },
                silent: true
              };
            },
            data: [0]
          }, {
            name: "ring5", //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
              let point = getCirlPoint(x0, y0, r, (270 + -angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: "#0CD3DB", //绿
                  fill: "#0CD3DB"
                },
                silent: true
              };
            },
            data: [0]
          }, {
            name: '设备在线率',
            type: 'pie',
            radius: ['72%', '55%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",

              }
            },
            data: [{
              value: value,
              name: "",
              itemStyle: {
                normal: {
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#A098FC' // 0% 处的颜色
                    },
                      {
                        offset: 0.3,
                        color: '#4386FA' // 0% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: '#4FADFD' // 0% 处的颜色
                      },
                      {
                        offset: 0.8,
                        color: '#0CD3DB' // 100% 处的颜色
                      }, {
                        offset: 1,
                        color: '#646CF9' // 100% 处的颜色
                      }
                    ]
                  },
                }
              }
            },
              {
                value: 100 - value,
                name: "",
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#173164"
                  }
                }
              }
            ]
          },
          {
            name: '设备在线率',
            type: 'pie',
            radius: ['52%', '45%'],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",

              }
            },
            data: [{
              value: value,
              name: "",
              itemStyle: {
                normal: {
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#00EDF3' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#646CF9' // 100% 处的颜色
                    }]
                  },
                }
              }
            },
              {
                value: 100 - value,
                name: "",
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#173164"
                  }
                }
              }
            ]
          },
        ]
      };

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        return {
          x: x1,
          y: y1
        }
      }
      function draw() {
        angle = angle + 3
        myChart.setOption(option, true)
        //window.requestAnimationFrame(draw);
      }
      if (timerId) {
        clearInterval(timerId);
      }
      timerId = setInterval(function() {
        //用setInterval做动画感觉有问题
        draw()
      }, 100);

      myChart.setOption(option);
    },

    deviceOffline(val) {
      // 视频融合--离线设备
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('sprh-lxfb'));
      let angle = 0; //角度，用来做简单的动画效果的
      let value = val
      var timerId;
      let option = {
        title: {
          text: '{a|' + value + '}{c|%}',
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 24,
                color: '#29EEF3'
              },

              c: {
                fontSize: 16,
                color: '#ffffff',
                // padding: [5,0]
              }
            }
          }
        },
        series: [
          // 紫色
          {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
                  startAngle: (0 + angle) * Math.PI / 180,
                  endAngle: (90 + angle) * Math.PI / 180
                },
                style: {
                  stroke: "#8383FA",
                  fill: "transparent",
                  lineWidth: 1.5
                },
                silent: true
              };
            },
            data: [0]
          }, {
            name: "ring5", //紫点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
              let point = getCirlPoint(x0, y0, r, (90 + angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: "#8450F9", //绿
                  fill: "#8450F9"
                },
                silent: true
              };
            },
            data: [0]
          },
          // 蓝色
          {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) * 0.42,
                  startAngle: (180 + angle) * Math.PI / 180,
                  endAngle: (270 + angle) * Math.PI / 180
                },
                style: {
                  stroke: "#4386FA",
                  fill: "transparent",
                  lineWidth: 1.5
                },
                silent: true
              };
            },
            data: [0]
          },
          {
            name: "ring5", // 蓝色
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
              let point = getCirlPoint(x0, y0, r, (180 + angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: "#4386FA", //绿
                  fill: "#4386FA"
                },
                silent: true
              };
            },
            data: [0]
          },
          {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
                  startAngle: (270 + -angle) * Math.PI / 180,
                  endAngle: (40 + -angle) * Math.PI / 180
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5
                },
                silent: true
              };
            },
            data: [0]
          },
          // 橘色
          {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) * 0.47,
                  startAngle: (90 + -angle) * Math.PI / 180,
                  endAngle: (220 + -angle) * Math.PI / 180
                },
                style: {
                  stroke: "#FF8E89",
                  fill: "transparent",
                  lineWidth: 1.5
                },
                silent: true
              };
            },
            data: [0]
          }, {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
              let point = getCirlPoint(x0, y0, r, (90 + -angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: "#FF8E89", //粉
                  fill: "#FF8E89"
                },
                silent: true
              };
            },
            data: [0]
          }, {
            name: "ring5", //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
              let point = getCirlPoint(x0, y0, r, (270 + -angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: "#0CD3DB", //绿
                  fill: "#0CD3DB"
                },
                silent: true
              };
            },
            data: [0]
          }, {
            name: '设备离线率',
            type: 'pie',
            radius: ['72%', '55%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",

              }
            },
            data: [{
              value: value,
              name: "",
              itemStyle: {
                normal: {
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#A098FC' // 0% 处的颜色
                    },
                      {
                        offset: 0.3,
                        color: '#4386FA' // 0% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: '#4FADFD' // 0% 处的颜色
                      },
                      {
                        offset: 0.8,
                        color: '#0CD3DB' // 100% 处的颜色
                      }, {
                        offset: 1,
                        color: '#646CF9' // 100% 处的颜色
                      }
                    ]
                  },
                }
              }
            },
              {
                value: 100 - value,
                name: "",
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#173164"
                  }
                }
              }
            ]
          },
          {
            name: '设备离线率',
            type: 'pie',
            radius: ['52%', '45%'],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",

              }
            },
            data: [{
              value: value,
              name: "",
              itemStyle: {
                normal: {
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#00EDF3' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#646CF9' // 100% 处的颜色
                    }]
                  },
                }
              }
            },
              {
                value: 100 - value,
                name: "",
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#173164"
                  }
                }
              }
            ]
          },
        ]
      };

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        return {
          x: x1,
          y: y1
        }
      }
      function draw() {
        angle = angle + 3
        myChart.setOption(option, true)
        //window.requestAnimationFrame(draw);
      }
      if (timerId) {
        clearInterval(timerId);
      }
      timerId = setInterval(function() {
        //用setInterval做动画感觉有问题
        draw()
      }, 100);

      myChart.setOption(option);
    },

    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(val) {
      //摄像头统计
      var myChart = echarts.init(document.getElementById('jczl-bmfw'));
      let valueData = val;
      let labelData = ['小区内部', '街道路面']
      var option = {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        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',
          data: labelData,
          axisTick: {
            show: false, //隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            margin: 10,
            color: '#e2e9ff',
            textStyle: {
              fontSize: 14
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
            },
          },
        }],
        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: [
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: valueData.map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item - 4]
                ]
              };
            }),
            effect: {
              show: true,
              period: 3.5,// 周期 速度 2.5
              trailLength: 0.5, //控制拖尾长度
              symbolSize: 25, // ⭐⭐星星大小
              symbol:
                'path://M307.46000719101244,524.9919417770187 L320.064963732395,524.9919417770187 L323.95999229701675,510.4772043087195 L327.8550230764027,524.9919417770187 L340.45997740302056,524.9919417770187 L330.26237201075065,533.9624401818169 L334.15760211881354,548.4771776501146 L323.95999229701675,539.506434950185 L313.76238468998207,548.4771776501146 L317.6576159054294,533.9624401818169 L307.46000719101244,524.9919417770187 z',
              loop: true,
              color: '#ffffff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            z: 999
          },
          {
            type: 'bar',
            data: valueData,
            barWidth: '20px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,244,255,1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }], false),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
              }
            },
          }]
      };
      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>