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

<template>
  <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="nav_min">
      <div class="top_txt">
        <b>汽开区</b>
        <span>小雨</span>
        <span>9~16℃</span>
      </div>
      <div class="top_txt top_txt2">
        <span>{{ currentTime }}</span>
        <!--  <span>星期六</span>
             <b>11:16:58</b> -->
      </div>
    </div>
    <!-- 小头部 结束 -->
    <!-- 中间内容 开始 -->
    <div class="qkq_con">


      <!--左侧开始-->
      <div class="con_left_e">
        <div class="con_div">
          <div class="qkq_tit txt_t">新办企业数</div>
            <div id="qkq_bj1"></div>
        </div>
		<div class="con_div">
		  <div class="qkq_tit txt_t">即办件统计数</div>
		  <div class="qkq_qkq_div clearfix">
			 <div class="qkq_hz fl">
				 <p>即办件数：<b>13,802</b></p>
				 <p>承诺件数：<b>1,655</b></p>
			 </div>
		    <div id="qkq_bj2" class="fr"></div>
		  </div>
		</div>
        <div class="con_div">
          <div class="qkq_tit txt_t">部门办结统计</div>
			<div id="qkq_bj3"></div>
        </div>


      </div>
      <div class="con_left_f">

        <div class="con_div qkq_bjzs">
			<div class="qkq_bjzs_con">
				<h4>15,457</h4>
				<p>大厅办件总数</p>
				<div class="qkq_bjzs_bg" ></div>
				<div class="qkq_bjzs_txt clearfix">
					<div class="qkq_bjzs_txt_fl fl">
						<div class="bjzs_txt">
							<p>网上预审环节</p>
							<p><b>111</b>件</p>
						</div>
						<div class="bjzs_txt">
							<p>接件受理环节</p>
							<p><b>111</b>件</p>
						</div>
						<div class="bjzs_txt">
							<p>物料流转环节</p>
							<p><b>111</b>件</p>
						</div>
						<div class="bjzs_txt">
							<p>部门办理环节</p>
							<p><b>111</b>件</p>
						</div>
					</div>
					<div class="qkq_bjzs_txt_fr fr">
						<div class="bjzs_txt">
							<p>业务办理项总数</p>
							<p><b>111</b>件</p>
						</div>
						<div class="bjzs_txt">
							<p>产生办件事项数</p>
							<p><b>111</b>件</p>
						</div>
						<div class="bjzs_txt">
							<p>事项办件发生率</p>
							<p><b>111</b>件</p>
						</div>
						<div class="bjzs_txt">
							<p>网上预审环节</p>
							<p><b>111</b>件</p>
						</div>
					</div>
				</div>
			</div>

        </div>
        <div class="con_div">
			<div class="qkq_tit txt_t">工程建设项目</div>
			<div class="qkq_bjs_con">
				<div class="qkq_bjs">
							 <img src="../../assets/images/qkq_icon19.png"/>
							 <div class="qkq_bjs_txt">
								 <p>工程项目名称</p>
								 <p><b>56</b>件</p>
							 </div>
				</div>
				<div class="qkq_bjs">
							 <img src="../../assets/images/qkq_icon19.png"/>
							 <div class="qkq_bjs_txt">
								 <p>工程项目名称</p>
								 <p><b>56</b>件</p>
							 </div>
				</div>
				<div class="qkq_bjs">
							 <img src="../../assets/images/qkq_icon19.png"/>
							 <div class="qkq_bjs_txt">
								 <p>工程项目名称</p>
								 <p><b>56</b>件</p>
							 </div>
				</div>
				<div class="qkq_bjs">
							 <img src="../../assets/images/qkq_icon19.png"/>
							 <div class="qkq_bjs_txt">
								 <p>工程项目名称</p>
								 <p><b>56</b>件</p>
							 </div>
				</div>
			</div>

        </div>
      </div>
      <div class="con_left_g">
        <div class="con_div">
          <div class="qkq_tit txt_t">好差评统计</div>
       <div id="qkq_bj4"></div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">办结率统计</div>
<div class="qkq_qkq_div clearfix">
			 <div class="qkq_hz qkq_hz2 fl">
				 <p>自然人办件数：<b>13,802</b></p>
				 <p>自然人办结数：<b>1,655</b></p>
			 </div>
		    <div id="qkq_bj5" class="fr"></div>
		  </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit txt_t">高频事项Top10</div>
			<div class="qkq_sxtop">
				<p><a><i>1</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
				<p><a><i>2</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
				<p><a><i>3</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
				<p><a><i>4</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
				<p><a><i>5</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
				<p><a><i>6</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
				<p><a><i>7</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
				<p><a><i>8</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
				<p><a><i>9</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
				<p><a><i>10</i>劳动用工备案（签订劳动合同，劳动合同法）</a><span>6442件</span></p>
			</div>
        </div>
      </div>


      <!--左侧结束-->
    </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 on" @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";


export default {
  name: "bjzshz",
  components: {
    supermap
  },
  data() {
    return {
      dropdownVisible: false,
      cameras: [],
      sltProps: null,
      currentTime: '',
      btnOne: true,
      btnTwo: false,

    };
    // 可根据实际情况添加更多设备列表
  },
  created() {
  },
  mounted() {
    this.qkq_bj1();
    this.qkq_bj2();

    this.qkq_bj3();
    this.qkq_bj4();
	this.qkq_bj5();

    this.getCurrentTime();

    // 每秒刷新时间
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  },

  methods: {
    sltHandle() {
      this.btnOne = true
      this.btnTwo = false
      this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
    },
    yxtHandle() {
      this.btnTwo = true
      this.btnOne = false
      this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
    },
    handleNavigation(route) {
      this.$router.push({
        path: route
      });
    },
    homePage(route) {
      this.$router.push({
        path: route
      });
    },
    cameraList() {
      getCameraList().then(response => {
        this.cameras = response.data;
      })
    },
    toggleDropdown(event) {
      this.dropdownVisible = !this.dropdownVisible;
    },

    qkq_bj1() {
      //新办企业数
      var myChart = echarts.init(document.getElementById('qkq_bj1'));
      let label = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'];
      let value = [233, 233, 200, 180, 199, 233, 210, 180];
      var json = {
        chart0: {
          xcategory: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
          low: value,
          lowLine: [],
        }
      };
      var zrUtil = echarts.util;
      zrUtil.each(json.chart0.xcategory, function (item, index) {
        json.chart0.lowLine.push([{
          coord: [index, json.chart0.low[index]]
        }, {
          coord: [index + 1, json.chart0.low[index + 1]]
        }]);
      });
     var option = {
          grid: {
              top: 30,
			  left:10,
			  right:10,
			  bottom:0,
              containLabel: true,
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  lineStyle: {
                      color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                              {
                                  offset: 0,
                                  color: 'rgba(255,255,255,0)', // 0% 处的颜色
                              },
                              {
                                  offset: 0.5,
                                  color: 'rgba(255,255,255,1)', // 100% 处的颜色
                              },
                              {
                                  offset: 1,
                                  color: 'rgba(255,255,255,0)', // 100% 处的颜色
                              },
                          ],
                          global: false, // 缺省为 false
                      },
                  },
              },
          },
          xAxis: [
              {
                  type: 'category',
                  boundaryGap: false,
                  axisLabel: {
                      formatter: '{value}',
                      fontSize: 14,
                      margin: 20,
                      textStyle: {
                          color: '#7ec7ff',
                      },
                  },
                  axisLine: {
                      lineStyle: {
                          color: '#243753',
                      },
                  },
                  splitLine: {
                      show: false,
                      lineStyle: {
                          color: '#243753',
                      },
                  },
                  axisTick: {
                      show: false,
                  },
                  data: label,
              },
          ],
          yAxis: [
              {
                  boundaryGap: false,
                  type: 'value',
                  axisLabel: {
                      textStyle: {
                          color: '#7ec7ff',
                      },
                  },
                  nameTextStyle: {
                      color: '#fff',
                      fontSize: 12,
                      lineHeight: 40,
                  },
                  splitLine: {
                      lineStyle: {
                          color: '#243753',
                      },
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: '#283352',
                      },
                  },
                  axisTick: {
                      show: false,
                  },
              },
          ],
          series: [
              {
                  name: '报名',
                  type: 'line',
                  smooth: true,
                  showSymbol: true,
                  symbolSize: 8,
                  zlevel: 3,
                  itemStyle: {
                      color: '#19a3df',
                      borderColor: '#a3c8d8',
                  },
                  // lineStyle: {
                  //     normal: {
                  //         width: 6,
                  //         color: '#19a3df',
                  //     },
                  // },
                  areaStyle: {
                      normal: {
                          color: new echarts.graphic.LinearGradient(
                              0,
                              0,
                              0,
                              1,
                              [
                                  {
                                      offset: 0,
                                      color: 'rgba(88,255,255,0.2)',
                                  },
                                  {
                                      offset: 0.8,
                                      color: 'rgba(88,255,255,0)',
                                  },
                              ],
                              false
                          ),
                      },
                  },
                  data: value,
              },
            {
              name: '实施计划',
              type: 'lines',
              coordinateSystem: 'cartesian2d',
              zlevel: 1,
              smooth: true,
              symbol: 'circle',
              effect: {
                show: true,
                smooth: true,
                period: 2,
                symbolSize: 8
              },
              lineStyle: {
                normal: {
                  color: '#19a3df',
                  width: 0,
                  opacity: 0,
                  curveness: 0,
                }
              },
              data: json.chart0.lowLine
            }
          ],
      };
      if (option) {
        myChart.setOption(option);
      }
    },

    qkq_bj2() {
      var myChart = echarts.init(document.getElementById('qkq_bj2'));
     var getmax = 100;
     //要改变的数据
     var getvalue = 50.12;

     var option = {
         grid: {
             top: 0,
             bottom: 0,
			 left:0
         },
         angleAxis: {
             show: false,
             max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
             type: 'value',
             startAngle: 225, //极坐标初始角度
             splitLine: {
                 show: false,
             },
         },
         barMaxWidth: 20, //圆环宽度
         radiusAxis: {
             show: false,
             type: 'category',
         },
         //圆环位置和大小
         polar: {
             center: ['50%', '50%'],
             radius: '170%',
         },

         series: [
             {
                 type: 'bar',
                 data: [
                     {
                         //上层圆环，显示数据
                         value: getvalue,
                         itemStyle: {
                             color: '#2AD2FB',
                         },
                     },
                 ],
                 barGap: '-100%', //柱间距离,上下两层圆环重合
                 coordinateSystem: 'polar',
                 roundCap: true, //顶端圆角
                 z: 3, //圆环层级，同zindex
             },
             {
                 //下层圆环，显示最大值
                 type: 'bar',
                 data: [
                     {
                         value: getmax,
                         itemStyle: {
                             color: '#164B9F',
                             opacity: 1,
                             borderWidth: 0,
                         },
                     },
                 ],
                 barGap: '-100%',
                 coordinateSystem: 'polar',
                 roundCap: true,
                 z: 1,
             },
             //仪表盘
             {
                 type: 'gauge',
                 startAngle: 225, //起始角度，同极坐标
                 endAngle: -45, //终止角度，同极坐标
                 axisLine: {
                     show: false,
                 },
                 splitLine: {
                     show: false,
                 },
                 axisTick: {
                     show: false,
                 },
                 axisLabel: {
                     show: false,
                 },
                 splitLabel: {
                     show: false,
                 },
                 pointer: {
                     // 分隔线
                     shadowColor: 'auto', //默认透明
                     shadowBlur: 5,
                     length: '50%',
                     width: '2',
                     show: false,
                 },
                 itemStyle: {
                     color: '#1598FF',
                     borderColor: '#1598FF',
                     borderWidth: 6,
                 },
                 detail: {
                     formatter: function (params) {
                         // return '完成率\n'+getvalue + '%';
                         return `{wcl|即办率\n}{number|${getvalue + '%'}}`;
                     },
                     rich: {
                         number: {
                             fontSize: 25,
                             textAlign: 'center',
                         },
                         wcl: {
                             fontSize: 16,
                             textAlign: 'center',
                         },
                     },
                     color: '#fff',
                     lineHeight: 30,
                     offsetCenter: ['0', '0'],
                 },
                 title: {
                     show: false,
                 },
                 data: [
                     {
                         value: getvalue,
                     },
                 ],
             },
             {
                 name: '外部刻度',
                 type: 'gauge',
                 //  center: ['20%', '50%'],
                 radius: '70%',
                 min: 0, //最小刻度
                 max: 100, //最大刻度
                 splitNumber: 10, //刻度数量
                 startAngle: 225,
                 endAngle: -45,
                 axisLine: {
                     show: true,
                     lineStyle: {
                         width: 1,
                         color: [[1, 'rgba(0,0,0,0)']],
                     },
                 }, //仪表盘轴线
                 axisLabel: {
                     show: false,
                     color: '#4d5bd1',
                     distance: 25,
                 }, //刻度标签。
                 axisTick: {
                     show: true,
                     splitNumber: 7,
                     lineStyle: {
                         color: '#086CAF', //用颜色渐变函数不起作用
                         width: 2,
                     },
                     length: -8,
                 }, //刻度样式
                 splitLine: {
                     show: false,
                     length: -20,
                     lineStyle: {
                         color: '#C7CBCF', //用颜色渐变函数不起作用
                     },
                 }, //分隔线样式
                 detail: {
                     show: false,
                 },
                 pointer: {
                     show: false,
                 },
             },
         ],
     };
     myChart.setOption(option);
      if (option) {
        myChart.setOption(option);
      }
    },
    qkq_bj3() {
      var myChart = echarts.init(document.getElementById('qkq_bj3'));
   var option = {
       title: {
           text: '',
           textStyle: {
               align: 'center',
               color: '#fff',
               fontSize: 20,
           },
           top: '5%',
           left: 'center',
       },
           tooltip: {
             trigger: 'axis',
             axisPointer: { // 坐标轴指示器，坐标轴触发有效
               type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
             }
           },
           grid: {
             left: '2%',
             right: '4%',
             bottom: '14%',
             top:'16%',
             containLabel: true
           },
            legend: {
           data: ['部门1', '部门2', '部门3'],
           right: 10,
           top:12,
           textStyle: {
               color: "#fff"
           },
           itemWidth: 12,
           itemHeight: 10,
           // itemGap: 35
       },
           xAxis: {
             type: 'category',
             data: ['2012','2013','2014','2015','2016','2017','2018','2019'],
             axisLine: {
               lineStyle: {
                 color: 'white'

               }
             },
             axisLabel: {
               // interval: 0,
               // rotate: 40,
               textStyle: {
                 fontFamily: 'Microsoft YaHei'
               }
             },
           },

           yAxis: {
             type: 'value',
             max:'1200',
             axisLine: {
               show: false,
               lineStyle: {
                 color: 'white'
               }
             },
             splitLine: {
               show: true,
               lineStyle: {
                 color: 'rgba(255,255,255,0.3)'
               }
             },
             axisLabel: {}
           },
           "dataZoom": [{
             "show": true,
             "height": 8,
             "xAxisIndex": [
               0
             ],
             bottom:'8%',
             "start": 10,
             "end": 90,
             handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
             handleSize: '110%',
             handleStyle:{
               color:"#d3dee5",

             },
             textStyle:{
               color:"#fff"},
             borderColor:"#90979c"
           }, {
             "type": "inside",
             "show": true,
             "height": 15,
             "start": 1,
             "end": 35
           }],
           series: [{
             name: '部门1',
             type: 'bar',
             barWidth: '15%',
             itemStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                       offset: 0,
                       color: '#fccb05'
                   }, {
                       offset: 1,
                       color: '#f5804d'
                   }]),
                   barBorderRadius: 12,
               },
             },
             data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
           },
           {
             name: '部门2',
             type: 'bar',
             barWidth: '15%',
             itemStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                       offset: 0,
                       color: '#8bd46e'
                   }, {
                       offset: 1,
                       color: '#09bcb7'
                   }]),
                   barBorderRadius: 11,
               }

             },
             data: [400, 500, 500, 500, 500, 400,400, 500, 500]
           },
           {
             name: '部门3',
             type: 'bar',
             barWidth: '15%',
             itemStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                       offset: 0,
                       color: '#248ff7'
                   }, {
                       offset: 1,
                       color: '#6851f1'
                   }]),
               barBorderRadius: 11,
               }
             },
             data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
           }]
   };
      if (option) {
        myChart.setOption(option);
      }
    },

    qkq_bj4() {
      var myChart = echarts.init(document.getElementById('qkq_bj4'));
     var zdslColorList = ['#D0A00E', '#34DA62', '#00C0E9', '#0096F3', '#33CCFF']
     var option = {
          grid: {
              top: '5%',
              left: '3%',
              right: '3%',
              bottom: '0',
              containLabel: true
          },
          tooltip: {
              backgroundColor: 'rgba(65,114,231,0.8)',
			 show: false,
          },
          xAxis: {
              show: false,
              type: 'value'
          },
          yAxis: [{
                  type: 'category',
                  data: ['非常满意', '满意', '基本满意', '不满意', '非常不满意'],
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: '#ADD6FF',
                          fontSize: '12'
                      }
                  },
                  splitLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLine: {
                      show: false
                  },
              },
              {
                  splitLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLine: {
                      show: false
                  },
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: '#ADD6FF',
                          fontSize: '12'
                      }
                  },
                  data: [150, 298, 206, 75, 154]
              }
          ],

          series: [{
                  name: "满意度", // bar图的外边框
                  type: "bar",
                  barWidth: "40%",
                  yAxisIndex: 0,
                  data: [500, 500, 500, 500, 500].map((item, i) => {
                      return {
                          value: item,
                          itemStyle: {
                              color: "rgba(0,0,0,0)",
                              barBorderColor: zdslColorList[i],
                              borderWidth: 1,
                              shadowColor: "#17209c",
                              shadowBlur: 4
                          }
                      }
                  }),
              },
              {
                  name: "满意度", //这个是Bar图
                  type: 'bar',
                  yAxisIndex: 1,
                  barWidth: "40%",
                  data: [150, 298, 206, 75, 154]
              }
          ],
          itemStyle: {
              color: function(params) {
                  return zdslColorList[params.dataIndex]
              }
          }
      }
      if (option) {
        myChart.setOption(option);
      }
    },
qkq_bj5() {
      var myChart = echarts.init(document.getElementById('qkq_bj5'));
     var getmax = 100;
     //要改变的数据
     var getvalue = 50.12;

     var option = {
         grid: {
             top: 0,
             bottom: 0,
			 left:0
         },
         angleAxis: {
             show: false,
             max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
             type: 'value',
             startAngle: 225, //极坐标初始角度
             splitLine: {
                 show: false,
             },
         },
         barMaxWidth: 20, //圆环宽度
         radiusAxis: {
             show: false,
             type: 'category',
         },
         //圆环位置和大小
         polar: {
             center: ['50%', '50%'],
             radius: '170%',
         },

         series: [
             {
                 type: 'bar',
                 data: [
                     {
                         //上层圆环，显示数据
                         value: getvalue,
                         itemStyle: {
                             color: '#2AD2FB',
                         },
                     },
                 ],
                 barGap: '-100%', //柱间距离,上下两层圆环重合
                 coordinateSystem: 'polar',
                 roundCap: true, //顶端圆角
                 z: 3, //圆环层级，同zindex
             },
             {
                 //下层圆环，显示最大值
                 type: 'bar',
                 data: [
                     {
                         value: getmax,
                         itemStyle: {
                             color: '#164B9F',
                             opacity: 1,
                             borderWidth: 0,
                         },
                     },
                 ],
                 barGap: '-100%',
                 coordinateSystem: 'polar',
                 roundCap: true,
                 z: 1,
             },
             //仪表盘
             {
                 type: 'gauge',
                 startAngle: 225, //起始角度，同极坐标
                 endAngle: -45, //终止角度，同极坐标
                 axisLine: {
                     show: false,
                 },
                 splitLine: {
                     show: false,
                 },
                 axisTick: {
                     show: false,
                 },
                 axisLabel: {
                     show: false,
                 },
                 splitLabel: {
                     show: false,
                 },
                 pointer: {
                     // 分隔线
                     shadowColor: 'auto', //默认透明
                     shadowBlur: 5,
                     length: '50%',
                     width: '2',
                     show: false,
                 },
                 itemStyle: {
                     color: '#1598FF',
                     borderColor: '#1598FF',
                     borderWidth: 6,
                 },
                 detail: {
                     formatter: function (params) {
                         // return '完成率\n'+getvalue + '%';
                         return `{wcl|办结率\n}{number|${getvalue + '%'}}`;
                     },
                     rich: {
                         number: {
                             fontSize: 25,
                             textAlign: 'center',
                         },
                         wcl: {
                             fontSize: 16,
                             textAlign: 'center',
                         },
                     },
                     color: '#fff',
                     lineHeight: 30,
                     offsetCenter: ['0', '0'],
                 },
                 title: {
                     show: false,
                 },
                 data: [
                     {
                         value: getvalue,
                     },
                 ],
             },
             {
                 name: '外部刻度',
                 type: 'gauge',
                 //  center: ['20%', '50%'],
                 radius: '70%',
                 min: 0, //最小刻度
                 max: 100, //最大刻度
                 splitNumber: 10, //刻度数量
                 startAngle: 225,
                 endAngle: -45,
                 axisLine: {
                     show: true,
                     lineStyle: {
                         width: 1,
                         color: [[1, 'rgba(0,0,0,0)']],
                     },
                 }, //仪表盘轴线
                 axisLabel: {
                     show: false,
                     color: '#4d5bd1',
                     distance: 25,
                 }, //刻度标签。
                 axisTick: {
                     show: true,
                     splitNumber: 7,
                     lineStyle: {
                         color: '#086CAF', //用颜色渐变函数不起作用
                         width: 2,
                     },
                     length: -8,
                 }, //刻度样式
                 splitLine: {
                     show: false,
                     length: -20,
                     lineStyle: {
                         color: '#C7CBCF', //用颜色渐变函数不起作用
                     },
                 }, //分隔线样式
                 detail: {
                     show: false,
                 },
                 pointer: {
                     show: false,
                 },
             },
         ],
     };
     myChart.setOption(option);

      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}`;
    },


  }
};


// 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');
  });
});
</script>

<style>
/* 添加你的CSS样式 */
</style>