zhsq_qk_2.0/zhsq_qk-ui/src/views/fusion/aqyj.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 facility_tab2">

        <div class="qkq_tdzy">
          <div class="qkq_tit ">摄像头</div>
          <div class="scrollbar" style="height: 660px;">
            <ul id="accordion" class="accordion yjcs">
              <!-- li上加on类名是点击选中后效果 -->
              <li v-for="(item, index) in shelter" :class="{ on: item.id == shelterCurrent }" :key="index"
                  @click="onShelterlick(item)">
                <div class="link">{{ item.name }} - {{ item.address }}</div>
              </li>
            </ul>
          </div>

        </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="facility_tab facility_tab2">

        <div class="qkq_tdzy">
          <div class="qkq_tit ">今日安全承诺</div>
          <div class="qkq_aqcn">
            <div id="qkq_aqcn_chart"></div>
            <div class="qkq_aqcn_txt">
              <p>应承诺数<span>162家</span></p>
              <p>已承诺数<span>162家</span></p>
              <p>未承诺数<span>0家</span></p>
            </div>
          </div>
          <div class="qkq_aqcn_col">
            <p>
              <span>高风险</span>
              <b>0</b>
            </p>
            <p>
              <span>较大风险</span>
              <b>1</b>
            </p>
            <p>
              <span>一般风险</span>
              <b>31</b>
            </p>
            <p>
              <span>低风险</span>
              <b>129</b>
            </p>
          </div>
        </div>
        <div class="qkq_tdzy">
          <div class="qkq_tit">监测预警</div>
          <ul class="qkq_csnl scrollbar">
            <li>
              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
              <p>预警事件：内涝点积水</p>
              <p>预警时间：2024年8月2日09:51:53</p>
            </li>
            <li>
              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
              <p>预警事件：内涝点积水</p>
              <p>预警时间：2024年8月2日09:51:53</p>
            </li>
            <li>
              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
              <p>预警事件：内涝点积水</p>
              <p>预警时间：2024年8月2日09:51:53</p>
            </li>
            <li>
              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
              <p>预警事件：内涝点积水</p>
              <p>预警时间：2024年8月2日09:51:53</p>
            </li>
            <li>
              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
              <p>预警事件：内涝点积水</p>
              <p>预警时间：2024年8月2日09:51:53</p>
            </li>
            <li>
              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
              <p>预警事件：内涝点积水</p>
              <p>预警时间：2024年8月2日09:51:53</p>
            </li>
            <li>
              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
              <p>预警事件：内涝点积水</p>
              <p>预警时间：2024年8月2日09:51:53</p>
            </li>
          </ul>
        </div>

      </div>

    </div>
    <!--右侧结束-->
    <!-- 多选按钮  开始 -->
    <form class="qkq_dx">
      <label><input checked type="checkbox" name="ckbx" id="sxt" @click="handleClick"/>摄像头</label>
      <label><input type="checkbox" name="ckbx" id="yjcs" @click="handleClick"/>应急场所</label>
      <label><input type="checkbox" name="ckbx" id="nld" @click="handleClick"/>城市内涝点</label>
      <label><input type="checkbox" name="ckbx" id="jyd" @click="handleClick"/>抢险救援队</label>
      <label><input type="checkbox" name="ckbx" id="fxwz" @click="handleClick"/>防汛物资</label>
    </form>
    <!-- 多选按钮  结束 -->

    <!-- 点位图例 开始
    <div class="dwtl">
      <p><span class="xqnb"></span>街道路面(在线50个/离线10个)</p>
      <p><span class="jdlm"></span>小区内部(在线50个/离线10个)</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" @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 on" @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 {
  selectQkEmergencyRescueTeamAllList,
  selectQkEmergencyShelterAllList,
  selectQkRescueSuppliesAllList,
} from "@/api/system/aqyj";
import supermap from "@/views/supermap/supermap";


export default {
  name: "aqyj",
  components: {
    supermap
  },
  data() {
    return {
      dropdownVisible: false,
      cameras: [],
      team: [],
      shelter: [],
      supplies: [],
      sltProps: null,
      teamCurrent: null,
      shelterCurrent: null,
      suppliesCurrent: null,
      currentTime: '',
      btnOne: true,
      btnTwo: false,
      yjcsChecked: false,
    };
    // 可根据实际情况添加更多设备列表
  },
  created() {
  },
  mounted() {
    this.selectQkEmergencyRescueTeamAllList();
    this.selectQkEmergencyShelterAllList();
    this.selectQkRescueSuppliesAllList();
    // this.resourceDistribution();
    // this.deviceOnline();
    // this.deviceOffline();
    this.cameraList();
    // this.regionTop();
    this.qkq_aqcn_chart();
    // 每秒刷新时间
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  },

  methods: {
    handleClick() {
      this.$refs.supermap.clearM()
      let that = this;
      $('input[name="ckbx"]:checked').each(function () {
        switch ($(this).attr("id")) {
          case "sxt":
            that.loada();
            break;
          case "yjcs":
            that.loadb();
            break;
          case "jyd":
            that.loadc();
            break;
          case "fxwz":
            that.loadd();
        }
      });
    },
    loada() {
      this.$refs.supermap.selectCameraList();
    },
    loadb() {
      this.$refs.supermap.selectQkEmergencyShelterAllList();
    },
    loadc() {
      this.$refs.supermap.selectQkEmergencyRescueTeamAllList();
    },
    loadd() {
      this.$refs.supermap.selectQkRescueSuppliesAllList();
    },
    onTeamlick(val) {
      let dataSource = [];
      this.suppliesCurrent = null;
      this.shelterCurrent = null;
      if (val.id == this.teamCurrent) {
        this.teamCurrent = null;
      } else {
        this.teamCurrent = val.id;
      }
      dataSource.push(val)
      // var checkbox = document.getElementById("jyd");
      // checkbox.setAttribute("checked", "");
      this.$refs.supermap.addMarkers(dataSource, "jyd")
      this.$refs.supermap.dropLocation(val.latitude, val.longitude);
    },
    onSuppliesclick(val) {
      let dataSource = [];
      this.teamCurrent = null;
      this.shelterCurrent = null;
      if (val.id == this.suppliesCurrent) {
        this.suppliesCurrent = null;
      } else {
        this.suppliesCurrent = val.id;
      }
      dataSource.push(val)
      // var checkbox = document.getElementById("fxwz");
      // checkbox.setAttribute("checked", "");
      this.$refs.supermap.addMarkers(dataSource, "fxwz")
      this.$refs.supermap.dropLocation(val.latitude, val.longitude);
    },
    onShelterlick(val) {
      let dataSource = [];
      this.teamCurrent = null;
      this.suppliesCurrent = null;
      if (val.id == this.shelterCurrent) {
        this.shelterCurrent = null;
      } else {
        this.shelterCurrent = val.id;
      }
      dataSource.push(val)
      // var checkbox = document.getElementById("yjcs");
      // checkbox.setAttribute("checked", "");
      this.$refs.supermap.addMarkers(dataSource, "yjcs")
      this.$refs.supermap.dropLocation(val.latitude, val.longitude);
    },
    //可视化查询抢险救援队列表
    selectQkEmergencyRescueTeamAllList() {
      selectQkEmergencyRescueTeamAllList().then(response => {
        this.team = response.data;
      })
    }
    ,
    //可视化查询应急避难所列表
    selectQkEmergencyShelterAllList() {
      selectQkEmergencyShelterAllList().then(response => {
        this.shelter = response.data;
      })
    }
    ,
    //可视化查询防汛抗旱物资储备列表
    selectQkRescueSuppliesAllList() {
      selectQkRescueSuppliesAllList().then(response => {
        this.supplies = response.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.5, //控制拖尾长度
              symbolSize: [20, 2],
              symbol: this.$store.state.common.echarts_baseStreamer,
              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() {
      //在线设备
      var myChart = echarts.init(document.getElementById('sprh-zxfb'));
      let angle = 0; //角度，用来做简单的动画效果的
      let value = 80;
      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() {
      // 视频融合--离线设备
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('sprh-lxfb'));
      let angle = 0; //角度，用来做简单的动画效果的
      let value = 20;
      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);
    }
    ,
    qkq_aqcn_chart() {
      var myChart = echarts.init(document.getElementById('qkq_aqcn_chart'));
     // mock数据
     const mockData = {
         value: 100,
         name: '承诺率'
     }
     // 渐变色
     var color = [
         { offset: 0, color:  'rgba(0, 170, 255, 0.5)' },
         { offset: 0.6, color:  'rgba(0, 170, 255, 0.6)' },
         { offset: 0.95, color: 'rgba(0, 170, 255, 0.7)' },
         { offset: 1, color: 'rgba(0, 170, 255, 0.9)' }
     ];
     
     // 圆环宽度
     const barMaxWidth = 10
     
     // 坐标轴
     const angleAxis = {
         show: false,
         max: 100 * 360 / 270,
         type: 'value',
         startAngle: 225,
         splitLine: { show: false }
     }
     
     // 坐标轴
     const radiusAxis = {
         show: false,
         type: 'category',
     }
     
     //圆环位置和大小
     const polar = {
         center: ['50%', '60%'],
         radius: '175%'
     }
     const series =  [{
         type: 'bar',
         data: [{ 
             //上层圆环，显示数据
             value: mockData.value,
             itemStyle: {
                 color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: color, },
             },
         }],
         label: {
             show: true,
			  
             formatter: params => {
                 return `{a|${params.value}}{b| %}\n\n\n{c|${mockData.name}}`
             },
             rich: {
                 a: { fontSize: 18, verticalAlign: 'bottom' },
                 b: { fontSize: 16, verticalAlign: 'bottom' },
                 c: { fontSize: 14 }
             },
			 itemStyle: {
			   normal: {
			     color: "#fff"
			   }
			 },
         },
		 
         barGap: '-100%', 
         coordinateSystem: 'polar', 
         roundCap: true,
         z: 2 
     },
     { 
         type: 'bar',
         data: [{
             value: 100,
             itemStyle: { color: 'rgba(0, 36, 109, 0.3)' }
         }],
         barGap: '-100%',
         coordinateSystem: 'polar',
         roundCap: true,
         z: 1
     }]
     // 渲染
     var option = { barMaxWidth, radiusAxis, polar, angleAxis, series};
  

      if (option) {
        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() {
      //摄像头统计
      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() * 1000);
        valueData.push(lineNumber);
      }
      var option = {
        "backgroundColor": "rgba(0, 0, 0, 0)",
        title: {
          show: true,
          text: '',
          textStyle: {
            color: '#fff',
            fontSize: '14',
          },
          top: '0%',
          left: 'bottom',
          bottm: '-10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          }
        },
        grid: {
          top: '10%',
          left: '15%',
          right: '5%',
          buttom: '-10',
        },
        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>