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

<template>
  <div>
    <div class="map">
      <img src="@/assets/images/qkq_mapbg.png"/>
    </div>
    <!-- 阴影背景 -->
    <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
    <div class="bj_right"><img src="@/assets/images/sprhbj-right.png"/></div>
    <div class="bj_bottom"><img src="@/assets/images/sprhbj-bottom.png"/></div>
    <!--头部开始-->
    <div class="header">
      <h1>城市运行一网统管指挥中心</h1>
    </div>
    <!--头部结束-->
    <!-- 中间开始 -->
    <div class="center-bar">
      <div class="center-list">
        <h4>事项可网办率</h4>
        <h5>94.85%</h5>
      </div>
      <div class="center-list">
        <h4>办件率</h4>
        <h5>869件</h5>
      </div>
      <div class="center-list">
        <h4>锁定提前办结效率</h4>
        <h5>98.57%</h5>
      </div>
      <div class="center-list">
        <h4>承诺提前办结效率</h4>
        <h5>94.85%</h5>
      </div>
      <div class="center-list">
        <h4>逾期率</h4>
        <h5>0%</h5>
      </div>
      <div class="center-list">
        <h4>平均办理时间</h4>
        <h5>0天1小时36分</h5>
      </div>
    </div>
    <!-- 中间结束 -->
    <!--左侧开始-->
    <div class="left_con">
      <div class="top_txt">
        <b>汽开区</b>
        <span>小雨</span>
        <span>9~16℃</span>
      </div>
      <!-- 土地资源 -->
      <!-- 区域办件量TOP -->
      <div class="qkq_tdzy">
        <div class="qkq_tit">区域办件量TOP</div>
        <div class="selectDate">
          <!--          <span class="_selectData">程锦街道</span>-->
          <!--          <a class="icon_more" @click="smalClick(this)"-->
          <!--          ><img src="@/assets/images/down.png"-->
          <!--          /></a>-->
          <!--          <div class="_moreMenu">-->
          <!--            <ul>-->
          <!--              <li class="change">东风街道</li>-->
          <!--              <li>锦城街道</li>-->
          <!--            </ul>-->
          <!--          </div>-->
        </div>
      </div>
      <div
        id="sprh-zyfb"
        style="margin: 10px auto; width: 350px; height: 240px"
      ></div>
      <!-- 区域办件量TOP -->
      <!-- 办件趋势统计 -->
      <div class="qkq_tdzy">
        <div class="qkq_tit ">办件趋势统计</div>
      </div>
      <div
        id="sprh-bjqstj"
        style="margin: 10px auto; width: 350px; height: 300px"
      ></div>
      <!-- 办件趋势统计 -->
    </div>
    <!--左侧结束-->
    <!--右侧开始-->
    <div class="right_con">
      <div class="top_txt">
        <span>2024.04.20</span>
        <span>星期六</span>
        <b>11:16:58</b>
      </div>
      <!-- 事项办件量Top10 -->
      <div class="qkq_tdzy">
        <div class="qkq_tit ">事项办件量Top10</div>
      </div>
      <div
        id="sprh-sxbjl10"
        style="margin: 10px auto; width: 350px; height: 260px"
      ></div>
      <!-- 事项办件量Top10 -->
      <!-- 事项办件率Top10 -->
      <div class="qkq_tdzy">
        <div class="qkq_tit ">事项办件率Top10</div>
      </div>
      <div
        id="sprh-sxbjl-top"
        style="margin: 10px auto; width: 350px; height: 260px"
      ></div>
      <!-- 事项办件率Top10 -->
    </div>
    <!--右侧结束-->
    <!--底部开始-->
    <div class="footer">
      <div class="nav-bottom">
        <div class="nav-bottom-left">
          <div class="nav-li-left">
            <span>经济运行</span>
          </div>
          <div class="nav-li-left">
            <span>城市管理</span>
          </div>
          <div class="nav-li-left" @click="serviceFAW('jtzl')">
            <span>交通治理</span>
          </div>
          <div class="nav-li-left" @click="serviceFAW('jczl')">
            <span>基层治理</span>
          </div>
        </div>
        <div class="nav-home-middle" @click="homePage('weather')">
          <img src="@/assets/images/home-btn.png"/>
          <a>返回首页</a>
        </div>
        <div class="nav-bottom-right">
          <div class="nav-li-right">
            <span>营商环境</span>
          </div>
          <div class="nav-li-right on">
            <span>政务运行</span>
          </div>
          <div class="nav-li-right " @click="serviceFAW('sprh')">
            <span>安全应急</span>
          </div>
          <div class="nav-li-right">
            <span>服务一汽</span>
          </div>
        </div>
      </div>
    </div>
    <!--底部开始-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import $ from 'jquery'
import jQuery from 'jquery'
import "@/assets/images/qkq_body.css";
import "@/assets/images/qkq_index.css";
import "@/assets/images/qkq_sprh.css";


export default {
  name: "yshj",
  data() {
    return {}
  },

  created() {
  },
  mounted() {
    this.regionTop();
    this.trend();
    this.matterUpTop();
    this.matterTop();
  },
  methods: {
    homePage(route) {
      this.$router.push({path: route});
    },
    serviceFAW(route) {
      this.$router.push({path: route});
    },
    smalClick(val) {
      var node = $(val).next();
      if (node.is(":hidden")) {
        //如果node是隐藏的则显示node元素，否则隐藏
        node.show();
      } else {
        node.hide();
      }
    },

    regionTop() {
      var myChart = echarts.init(document.getElementById('sprh-zyfb'));
      let data = [
        {value: 0, label: '前程街道'},
        {value: 0, label: '富民街道'},
        {value: 0, label: '广兴街道'},
        {value: 0, label: '东风街道'},
        {value: 0, label: '锦绣街道'},
        {value: 0, label: '锦城街道'}
      ];

      let option = {
        grid: {
          top: 10,
          left: 33,
          right: 20,
          bottom: 5,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          show: true,
          inverse: true,
          type: 'category',
          axisLine: {
            show: false
          }
        },
        series: [
          {
            name: 'label',
            type: 'bar',
            barWidth: 10,
            yAxisIndex: 0,
            label: {
              show: true,
              position: 2,
              color: '#fff',
              fontSize: 12
            },
            data: data.map((item) => {
              return {
                value: 0,
                label: {
                  formatter() {
                    return item.label;
                  }
                }
              };
            })
          },
          {
            name: 'value',
            type: 'bar',
            barWidth: 10,
            barMinHeight: 10,
            yAxisIndex: 0,
            label: {
              show: true,
              position: 'right',
              color: '#00d5e1',
              fontSize: 12,
              rich: {
                value: {
                  color: '#00e1ce'
                }
              },
              formatter({
                          value
                        }) {
                return `{value|${value}个}`;
              }
            },
            itemStyle: {
              barBorderRadius: 3
            },
            data: data.map(({value}, index) => {
              let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                offset: 1,
                color: '#004eaf'
              }, {
                offset: 0,
                color: '#089aa2'
              }], false);

              return {
                value,
                label: {color},
                itemStyle: {color}
              };
            })
          }
        ]
      };

      let updateInterval = 1000; // 更新间隔，单位：毫秒
      let updateRegionTop = () => {
        data.forEach((item) => {
          item.value += Math.floor(Math.random() * 10); // 模拟逐渐增加的数据
          if (item.value >= 100) {
            item.value = 0; // 当增加到1000时重新开始
          }
        });

        option.series[1].data = data.map(({value}, index) => {
          let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
            offset: 1,
            color: '#004eaf'
          }, {
            offset: 0,
            color: '#089aa2'
          }], false);

          return {
            value,
            label: {color},
            itemStyle: {color}
          };
        });

        myChart.setOption(option);
      };

      updateRegionTop(); // 首次更新数据

      let timer = setInterval(updateRegionTop, updateInterval);

    },

    trend() {
      //办件趋势
      var myChart = echarts.init(document.getElementById('sprh-bjqstj'));
      var monthData = [];
      var lineData = [];
      for (var i = 1; i <= 12; i++) {
        monthData.push(i + '月');
        var lineNumber = Math.floor(Math.random() * 10000);
        lineData.push(lineNumber);
      }

      let option = {

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: '5%',
          left: '15%',
          right: '5%',
          bottom: '25%',
          // containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: '#502297',
                width: 1,
                type: 'dashed',
              },
            },
            splitLine: {
              show: true,
              interval: 'auto',
              lineStyle: {
                color: ['#502297'],
                type: 'dashed',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#FFFFFF', //X轴文字颜色
                fontSize: 12,
              },
              margin: 12,
              interval: 0,
            },
            axisTick: {
              show: false,
            },
            data: monthData,
          },
        ],
        yAxis: [
          {
            splitNumber: 6,
            splitLine: {
              show: true,
              interval: 'auto',
              lineStyle: {
                color: ['#502297'],
                type: 'dashed',
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#502297',
                width: 1,
                type: 'dashed',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff',
              },
            },
          },
        ],
        series: [
          {
            name: '成绩',
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            smooth: true,
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: '#FE7B00', // 线条颜色
              },
              borderColor: '#ffffff',
            },
            itemStyle: {
              color: '#ffffff',
              borderColor: '#FE7B00',
              borderWidth: 2,
            },

            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(125, 14, 255, 0.4)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(116, 0, 216, 0.1)',
                    },
                  ],
                  false
                ),
              },
            },
            data: lineData,
          },
        ],
      };
      var currentIndex = -1;
      var timer = setInterval(function () {
        // 生成新的随机数据
        currentIndex++;
        if (currentIndex >= 12) {
          currentIndex = 0;
          for (var i = 0; i < lineData.length; i++) {
            lineData[i] = Math.floor(Math.random() * 1000);
          }
        } else {
          lineData[currentIndex] = Math.floor(Math.random() * 1000);
        }

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

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

      if (option) {
        myChart.setOption(option);
      }
    },
    matterUpTop() {
      var myChart = echarts.init(document.getElementById('sprh-sxbjl10'));
      var datas = [{
        "value": 30,
        "name": "特种设备安全管.."
      },
        {
          "value": 20,
          "name": "特种设备使用登.."
        },
        {
          "value": 10,
          "name": "特种设备安全管2.."
        },
        {
          "value": 40,
          "name": "一孩、二孩、三孩.."
        },
        {
          "value": 50,
          "name": "失业登记"
        },
        {
          "value": 60,
          "name": "医师执业注册（.."
        },
        {
          "value": 70,
          "name": "残疾人证新办"
        },
        {
          "value": 80,
          "name": "护士执业注册(.."
        },
        {
          "value": 90,
          "name": "失业登记2"
        },
        {
          "value": 100,
          "name": "一孩、二孩、三孩1.. "
        }
      ]
      var maxArr = (new Array(datas.length)).fill(100);
      let option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          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,
            align: 'right',
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              rich: {
                index: {
                  color: '#9d9d9d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index1: {
                  color: '#f8777b',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index2: {
                  color: '#ffa145',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index3: {
                  color: '#6ade8d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                name: {
                  width: 7 * 14,
                  align: 'left',
                  textAlign: 'left'
                }
              }
            },
            formatter: (name) => {
              var index = (datas.map(item => item.name)).indexOf(name) + 1;
              return [
                '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
                '{name|' + name + '}'
              ].join(' ')
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: datas.map(item => item.name)
        },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#3196fa',
                fontSize: '12'
              },
              formatter: '{value}'
            },
            data: datas.map(item => item.value)
          }
        ],
        series: [{
          name: '值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: '#3196fa',
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          barWidth: 10,
          data: datas
        },
          {
            name: '背景',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            data: maxArr,
            itemStyle: {
              normal: {
                color: '#042039',
                barBorderRadius: 5,
              }
            },
          }
        ]
      };

      setInterval(function () {
        // 更新数据和名字，并重新渲染图表
        datas.forEach(function (item) {
          item.value = Math.floor(Math.random() * 100); // 随机生成新的值
        });

        myChart.setOption({
          yAxis: [{
            data: datas.map(item => item.name)
          }, {
            data: datas.map(item => item.value)
          }],
          series: [{
            data: datas
          },
            {
              data: maxArr
            }
          ]
        });
      }, 1000); // 每隔3秒钟更新一次数据

      // 初次渲染图表
      if (option) {
        myChart.setOption(option);
      }
    },
    matterTop() {
      var myChart = echarts.init(document.getElementById('sprh-sxbjl-top'));
      var datas = [{
        "value": 0,
        "name": "民办学校的举办.."
      },
        {
          "value": 0,
          "name": "失业登记.."
        },
        {
          "value": 0,
          "name": "民办学校的终止.."
        },
        {
          "value": 0,
          "name": "医师执业注册(.."
        },
        {
          "value": 0,
          "name": "一孩、二孩、三孩.."
        },
        {
          "value": 0,
          "name": "药品零售企业许.."
        },
        {
          "value": 0,
          "name": "护士执业注册"
        },
        {
          "value": 0,
          "name": "残疾人证新办"
        },
        {
          "value": 0,
          "name": "医疗广告审查"
        },
        {
          "value": 0,
          "name": "变更施工单位项.."
        },

      ]
      var maxArr = (new Array(datas.length)).fill(100);
      let option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          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,
            align: 'right',
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              rich: {
                index: {
                  color: '#9d9d9d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index1: {
                  color: '#f8777b',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index2: {
                  color: '#ffa145',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index3: {
                  color: '#6ade8d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                name: {
                  width: 7 * 14,
                  align: 'left',
                  textAlign: 'left'
                }
              }
            },
            formatter: (name) => {
              var index = (datas.map(item => item.name)).indexOf(name) + 1;
              return [
                '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
                '{name|' + name + '}'
              ].join(' ')
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: datas.map(item => item.name)
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#3196fa',
              fontSize: '12'
            },
            formatter: '{value}%'
          },
          data: datas.map(item => item.value)
        }],
        series: [{
          name: '值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: '#3196fa',
            },
          },
          barWidth: 10,
          data: datas
        },
          {
            name: '背景',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            data: maxArr,
            itemStyle: {
              normal: {
                color: '#042039',
                barBorderRadius: 5,
              }
            },
          },
        ]
      };

      if (option) {
        myChart.setOption(option);
      }
      // 设置定时器，每隔一段时间更新数据并重绘图表
      setInterval(function () {
        // 更新数据和名字，并重新渲染图表
        datas.forEach(function (item) {
          item.value = Math.floor(Math.random() * 100); // 随机生成新的值
        });

        myChart.setOption({
          yAxis: [{
            data: datas.map(item => item.name)
          }, {
            data: datas.map(item => item.value)
          }],
          series: [{
            data: datas
          },
            {
              data: maxArr
            }
          ]
        });
      }, 1000); // 每隔3秒钟更新一次数据
    },
  },
};
</script>

<style scoped>
/* Your CSS styles here */
</style>