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

<template>
  <div class="app">
    <div class="map">
      <!-- <img src="@/assets/images/qkq_mapbg.png"/> -->
      <Map3D :geo-json="geoJson" :dbl-click-fn="dblClickFn" :projection-fn-param="projectionFnParam"
             style="position: absolute"/>
    </div>
    <!--头部开始-->
    <div class="header">
      <h1>城市运行一网统管指挥中心</h1>
    </div>
    <!--头部结束-->
    <!--左侧开始-->
    <div class="left_con">
      <div class="top_txt">
        <b>汽开区</b>
        <span>小雨</span>
        <span>9~16℃</span>
      </div>
      <!--土地资源-->
      <div class="qkq_tdzy">
        <div class="qkq_tit">土地资源</div>
        <div class="qkq_tdzy_con">
          <div class="dt_txt">
            <h2>156.22</h2>
            <h3>平方米</h3>
            <h4>新增土地</h4>
            <h5>20%</h5>
          </div>
          <div class="dt_con">
            <div class="dt_con_c">
              <h2>1056.22</h2>
              <h3>平方米</h3>
              <h4>土地总面积</h4>
            </div>
            <div class="dt_con_b">
              <h4>40%</h4>
              <p>环比</p>
            </div>
          </div>
          <div class="dt_txt">
            <h2>56.12</h2>
            <h3>平方米</h3>
            <h4>未归化土地</h4>
            <h5>20%</h5>
          </div>
        </div>
      </div>
      <!--营商环境-->
      <div class="qkq_yshj">
        <div class="qkq_tit">营商环境</div>
        <div class="qkq_yshj_con">
          <div id="yshj" style="top: 40px;"></div>
          <div class="qkq_yshj_list">
            <p>规上入统<span>1000</span></p>
            <p>大型企业<span>1000</span></p>
            <p>中型企业<span>1000</span></p>
            <p>小型企业<span>1000</span></p>
            <p>微型企业<span>1000</span></p>
            <p>汽配产业<span>1000</span></p>
          </div>
        </div>
      </div>
      <!--网格管理-->
      <div class="qkq_wggl">
        <div class="qkq_tit" style="top:45px">网格管理</div>
        <div id="wggl" style="top:45px"></div>
      </div>
    </div>
    <!--左侧结束-->
    <!--右侧开始-->
    <div class="right_con">
      <div class="top_txt">
        <span>{{ currentTime }}</span>
        <!--        <span>星期六</span>-->
        <!--        <b>11:16:58</b>-->
      </div>
      <!--党建引领-->
      <div class="qkq_djyl">
        <div class="qkq_tit">党建引领</div>
        <div class="qkq_djyl_con">
          <!-- <img src="@/assets/images/qkq_djyl.png"/> -->
          <div class="qkq_list">
            <p>
              <span>党组织数量</span>
              <i>12,136</i>
            </p>
            <p>
              <span>党章党规数量</span>
              <i class="blue">12,136</i>
            </p>
            <p>
              <span>党组织活动</span>
              <i class="green">12,136</i>
            </p>
            <p>
              <span>心愿完成率</span>
              <i class="org">98%</i>
            </p>
          </div>
        </div>
      </div>
      <!--经济运行-->
      <div class="qkq_jjyx">
        <div class="qkq_tit" style="top:20px">经济运行
          <select id="mySelect">
            <option value="option1">规上入统</option>
            <option value="option2">大型企业</option>
            <option value="option3">中型企业</option>
            <option value="option4">小型企业</option>
            <option value="option5">微型企业</option>
            <option value="option6">汽配产业</option>
          </select>
        </div>
        <div id="jjyx" style="top:20px"></div>
      </div>
      <!--事件信息-->
      <div class="qkq_jjyx">
        <div class="qkq_tit">事件信息</div>
        <dl class="qkq_jjyx_list">
          <dt>
            <span>名称</span>
            <span>时间</span>
            <span>类型</span>
            <span>状态</span>
          </dt>
          <div class="scro_list">
            <dd>
              <span>红旗小区垃圾桶溢满</span>
              <span>2024-05-06</span>
              <span>生活</span>
              <span class="zt">待处理</span>
            </dd>
            <dd>
              <span>红旗小区垃圾桶溢满</span>
              <span>2024-05-06</span>
              <span>生活</span>
              <span class="zt">待处理</span>
            </dd>
            <dd>
              <span>红旗小区垃圾桶溢满</span>
              <span>2024-05-06</span>
              <span>生活</span>
              <span class="zt">待处理</span>
            </dd>
            <dd>
              <span>红旗小区垃圾桶溢满</span>
              <span>2024-05-06</span>
              <span>生活</span>
              <span class="zt">待处理</span>
            </dd>
            <dd>
              <span>红旗小区垃圾桶溢满</span>
              <span>2024-05-06</span>
              <span>生活</span>
              <span class="zt">待处理</span>
            </dd>
            <dd>
              <span>红旗小区垃圾桶溢满</span>
              <span>2024-05-06</span>
              <span>生活</span>
              <span class="zt">待处理</span>
            </dd>
            <!-- 其他事件信息项 -->
          </div>
        </dl>
      </div>
    </div>
    <!--右侧结束-->
    <!--中间地图 开始-->
    <div class="qkq_mapcon">
      <!-- <img src="@/assets/images/qkq_mapconbg.png"/> -->
      <img src="@/assets/images/qkq_mapcon.png">
      <div class="qkq_map" style="height: 0;top:-227px">
        <a @click="handleNavigation('fwyq')"><i><img src="@/assets/images/qkq_icon1.png"/></i><span>服务一汽</span></a>
        <a @click="handleNavigation('csgl')"><i><img src="@/assets/images/qkq_icon2.png"/></i><span>城市管理</span></a>
        <a @click="handleNavigation('jtzl')"><i><img src="@/assets/images/qkq_icon3.png"/></i><span>交通治理</span></a>
        <a @click="handleNavigation('jczl')"><i><img src="@/assets/images/qkq_icon4.png"/></i><span>基层治理</span></a>
        <a @click="handleNavigation('yshj_new')"><i><img src="@/assets/images/qkq_icon5.png"/></i><span>营商环境</span></a>
        <a @click="handleNavigation('yshj')"><i><img src="@/assets/images/qkq_icon6.png"/></i><span>政务运行</span></a>
        <a @click="handleNavigation('aqyj')"><i><img src="@/assets/images/qkq_icon7.png"/></i><span>安全应急</span></a>
        <a @click="handleNavigation('jjyx')"><i><img src="@/assets/images/qkq_icon8.png"/></i><span>经济运行</span></a>
      </div>
    </div>
    <!--中间地图 结束-->
    <!--底部开始-->
    <div class="footer">

    </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 axios from 'axios';
import Map3D from '@/map3d'; // A
const qikaiJSON = require('@/assets/geoJson/seven.json')

export default {
  name: 'weather',
  components: {
    Map3D
  },
  data() {
    return {
      currentTime: '',
      geoJson: null,
      mapAdCode: 220000, // 默认的中国adcode码
      projectionFnParam: {
        center: [125.11, 43.76],
        scale: 4000,
      },
      mapScale: {
        province: 100,
        city: 200,
        district: 3000,
      }
    }
  },
  created() {
  },
  mounted() {
    this.doingBusiness();
    this.grid();
    this.economic();
    // 每秒刷新时间
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);
    this.queryMapData(this.mapAdCode);
  },
  methods: {
    queryMapData(code) {
      this.geoJson = qikaiJSON
      // axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json`)
      // .then(response => {
      //   this.geoJson = response.data;
      // })
      // .catch(error => {
      //   console.error(error)
      // })
    },
    dblClickFn(customProperties) {
      this.mapAdCode = customProperties.adcode;
      console.log('mapAdCode', this.mapAdCode)
      this.queryMapData(this.mapAdCode)
      this.projectionFnParam = {
        center: customProperties.centroid,
        // scale: this.mapScale[customProperties.level],
        scale: 500
      };
    },
    handleNavigation(page) {
      // if (page === 'sprh') {
      //   this.$router.push('/sprh'); // 跳转到 "交通治理" 页面
      // } else if (page === 'yshj') {
      //   this.$router.push('/yshj'); // 跳转到 "政务运行" 页面
      // }
      this.$router.push({path: page});
    },
    doingBusiness() {
      //	营商环境
      var myChart = echarts.init(document.getElementById('yshj'));
      let option = {
        tooltip: {},
        radar: {
          radius: "55%", //大小
          nameGap: 1, // 图中工艺等字距离图的距离
          center: ["40%", "40%"], // 图的位置
          name: {
            textStyle: {
              color: "rgba(175, 190, 211, 1)",
              fontSize: 10
            },
            textStyle: {
              color: '#fff',
              textShadowColor: 'rgba(0, 255, 255, 1)',
              textShadowBlur: 5,
              textShadowOffsetX: 0,
              textShadowOffsetY: 0
            },
            formatter: function (name) {
              return name;
            }
          },
          indicator: [
            {
              "name": '规上入统',
              "max": "100"
            }, {
              "name": '大型企业',
              "max": "100"
            }, {
              "name": '中型企业',
              "max": "100"
            }, {
              "name": '小型企业',
              "max": "100"
            }, {
              "name": '微型企业',
              "max": "100"
            }, {
              "name": '汽配产业',
              "max": "100"
            },
          ],
          axisLine: {
            lineStyle: {
              color: "rgba(1, 118, 214, 0.8)"
            }
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: "rgba(255,0,0,0)" // 图表背景的颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "rgba(1, 135, 244, 0.8)" // 设置网格的颜色
            }
          }
        },
        series: [{
          name: "营商环境分析",
          type: "radar",
          symbol: "angle",
          itemStyle: {
            normal: {
              areaStyle: {
                type: "default"
              }
            }
          },
          data: [{
            symbol: "circle",
            symbolSize: 5,
            value: [70, 42, 63, 84, 75, 34],
            areaStyle: {
              color: "rgba(1, 132, 238, 0.8)"
            },
            itemStyle: {
              normal: {
                borderWidth: 1,
                color: "rgba(0, 62, 120, 1.0)",
                borderColor: "rgba(2, 96, 176, 1)"
              }
            },
            lineStyle: {
              color: "rgba(2, 96, 176, 1)",
              width: 1
            }
          }]
        }]
      }
      if (option) {
        myChart.setOption(option);
      }
    },
    grid() {
      //	网格管理
      var myChart = echarts.init(document.getElementById('wggl'));
      let dataList = [{
        name: '前程街道',
        value: 600
      }, {
        name: '富民街道',
        value: 1080
      }, {
        name: '广兴街道',
        value: 369
      }, {
        name: '东风街道',
        value: 744
      }, {
        name: '锦绣街道',
        value: 152
      }, {
        name: '锦城街道',
        value: 92
      }]
      var option = {
        grid: {
          left: "15%", //距离左边的距离
          right: "2%", //距离右边的距离
          bottom: "10%", //距离下边的距离
          top: "8%" //距离上边的距离
        },
        title: {
          text: '',
          left: 26,
          top: 26,
          textStyle: {
            color: '#FFFFFF',
            fontSize: 12,
            fontWeight: 50000,
            fontFamily: 'PingFang SC'
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            crossStyle: {
              color: "#999"
            }
          },
        },
        xAxis: [{
          type: "category",
          data: ['前程街道', '富民街道', '广兴街道', '东风街道', '锦绣街道', '锦城街道'],
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              fontSize: 9,
              fontFamily: "Microsoft YaHei"
            }
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }
        }],
        yAxis: [{
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              fontFamily: "Microsoft YaHei"
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#666"
            }
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }
        },

        ],
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: dataList.length > 15 ? 35 : 100
        }],
        series: [
          {
            name: "",
            type: "bar",
            data: dataList,
            barGap: '-100%',
            barCategoryGap: '70%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(37, 215, 255, 1.0)'
                }, {
                  offset: 1,
                  color: 'rgba(1,23,60,1)'
                }])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(43, 129, 234, 1.0)'
                }, {
                  offset: 1,
                  color: 'rgba(1,23,60,1)'
                }])
              }
            },
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: dataList.map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item.value - 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: '#fff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            "zlevel": 2
          },
        ]
      }
      if (option) {
        myChart.setOption(option);
      }
    },
    economic() {
      //	经济运行
      var myChart = echarts.init(document.getElementById('jjyx'));
      var option = {
        title: {
          text: '',
          left: 26,
          top: 26,
          textStyle: {
            color: '#FFFFFF',
            fontSize: 12,
            fontWeight: 50000,
            fontFamily: 'PingFang SC'
          }
        },
        legend: {
          data: ["2023年度", "2024年度"],
          top: 1,
          textStyle: {
            color: "#deebff",
            fontSize: 12,
          },
          itemWidth: 12,
          itemHeight: 10,
          itemGap: 35,
          color: "#242424",
          selectedMode: false,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            crossStyle: {
              color: "#999"
            }
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [{
          type: "category",
          data: [
            "第一季度",
            "第二季度",
            "第三季度",
            "第四季度",
          ],
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              fontSize: 9,
              fontFamily: "Microsoft YaHei"
            }
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }
        }],
        yAxis: [{
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              fontFamily: "Microsoft YaHei"
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#666"
            }
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }
        },
        ],
        series: [
          {
            name: '2023',
            type: 'bar',
            data: [20, 16, 42, 32],
            barWidth: 10,
            barGap: 0,//柱间距离
            label: {//图形上的文本标签
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,222,255,1)'
                }, {
                  offset: 1,
                  color: 'rgba(1,23,60,1)'
                }])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(39,116,212,1)'
                }, {
                  offset: 1,
                  color: 'rgba(1,23,60,1)'
                }])
              }
            },
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: [52, 42, 12, 24].map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item - 4]
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,// 周期 速度 2.5
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [19, 2], // ⭐⭐星星大小
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },

            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            "zlevel": 2
          },
          {
            name: '2024',
            type: 'bar',
            data: [52, 42, 12, 24],
            barWidth: 10,
            barGap: 0.1,//柱间距离
            label: {//图形上的文本标签
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,222,255,1)'
                }, {
                  offset: 1,
                  color: 'rgba(1,23,60,1)'
                }])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(39,116,212,1)'
                }, {
                  offset: 1,
                  color: 'rgba(1,23,60,1)'
                }])
              }
            },
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: [52, 42, 12, 24].map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item - 4]
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,// 周期 速度 2.5
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [3, 10], // ⭐⭐星星大小
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },

            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            "zlevel": 2
          },
        ]
      };
      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}`;
    },
  }
}
</script>

<style>
/* 样式可以根据需要继续补充 */
</style>