大屏首页统计数据模拟

src/views/index.vue

@@ -4,20 +4,46 @@
         <span class="alarm_list_item" v-for="item in alarm_list"><img :src="alarm_type[item.code].icon"/><span>{{ alarm_type[item.code].name }}</span><span class="alarm_item_brager" :style="{'background-color':alarm_type[item.code].bg}">{{ item.count }}</span></span>
       </div>
       <div class="houselist">
-        <span  class="item" v-for="item in houselist" :style="{'background-color':alarm_type[item.alarmtype].bg}" >
+        <span  class="item" @click="toHouse(item)" v-for="item in houselist" :style="{'background-color':alarm_type[item.alarmtype].bg}" >
           <el-tooltip :content="item.name" placement="top" class="custom-tooltip">
             <span class="item">{{ item.code }}</span>
           </el-tooltip>
         </span>
       </div>
+      <div class="left">
+        <div class="area">
+          <div class="title"><span class="line"></span><span>事件分布统计占比</span><span class="stat_rate">(月)</span></div>
+          <div class="echartsdiv" ref="echarts01"></div>
+        </div>
+        <div class="area">
+          <div class="title"><span class="line"></span><span>事件趋势</span><span class="stat_rate">(月)</span></div>
+          <div class="echartsdiv" ref="echarts02"></div>
+        </div>
+        <div class="area">
+          <div class="title"><span class="line"></span><span>流程督办</span><span class="stat_rate">(月)</span></div>
+          <div class="toolsbtn">
+            <div class="toolsbtn_item active">总量</div>
+            <div class="toolsbtn_item">闭单量</div>
+            <div class="toolsbtn_item">未闭单量</div>
+          </div>
+          <div class="echartsdiv" ref="echarts03" style="height: calc(100% - 69px);"></div>
+        </div>
+      </div>
     </div>
 </template>
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
 import {shallowRef,onMounted} from "vue";
-
+import * as echarts from "echarts";
 const map = shallowRef(null);
 const AMap = ref();
+const echarts01 = ref(null);
+const echarts02 = ref(null);
+const echarts03 = ref(null);
+const echars01data = ref(null);
+const echars02data = ref(null);
+const echars03data = ref(null);
+let geocoder = null;
 const alarm_type=ref({
   "none":{
     name:'行为合规',
@@ -81,22 +107,14 @@ const houselist=ref([{
 const initHouseLoca=()=>{
   for (let index = 0; index < houselist.value.length; index++) {
     const element = houselist.value[index];
-      let geocoder = AMap.value.Geocoder({
-      city: "全国" // 城市范围，默认全国
-      });
-
-      let address = element.addr;
-      geocoder.getLocation(address, function(status, result) {
-        if (status === 'complete' && result.geocodes.length) {
-        var lng = result.geocodes[0].location.getLng();
-        var lat = result.geocodes[0].location.getLat();
-        console.log('地址解析结果的经纬度:', lng, lat);
-        } else {
-        console.error('地址解析失败');
-        }
-      });
+    let address = element.addr;
+    getGeoLocation(index,address);
   }
 }
+const toHouse=(item)=>{
+  if(item.lnglat[0]==0||item.lnglat[1]==0) return;
+  map.value.setCenter(item.lnglat);
+}
 
 const initWindow=()=>{
 // 信息窗体
@@ -106,11 +124,35 @@ retainwhenClose: true,
 });
 }
 
+const getGeoLocation=(houseind,address)=> {
+  geocoder.getLocation(address, function(status, result) {
+    if (status === 'complete' && result.info === 'OK') {
+      const lnglat = result.geocodes[0].location; // 经纬度对象
+      houselist.value[houseind].lnglat=[lnglat.getLng(),lnglat.getLat()];
+      //console.log('经度：', lnglat.getLng(), '纬度：', lnglat.getLat());
+      addMarker(lnglat); // 添加标记到地图上
+    } else {
+      console.error('获取位置失败');
+    }
+  });
+}
+
+const addMarker=(lnglat) =>{
+  const marker = new AMap.value.Marker({
+    position: lnglat, // 经纬度对象
+    map: map.value, // 添加到哪个地图实例
+  });
+  map.value.setCenter(lnglat);
+}
+
 const initMap = () => {
+  window._AMapSecurityConfig = {
+    securityJsCode: "f3a3cf317c5749d8b2fce022f63def43",
+  }
   AMapLoader.load({
     key: 'cf0ede1d8833ccb51fb6b084e23a7b5e', // 申请好的Web端开发者Key，首次调用 load 时必填
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: ['AMap.Scale', 'AMap.ToolBar','AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    plugins: ['AMap.Scale', 'AMap.ToolBar','AMap.Geocoder','AMap.LngLat'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
     Loca:{
       version:'2.0.0'
     }
@@ -122,10 +164,15 @@ const initMap = () => {
       map.value = new res.Map('containerMap', {
         //设置地图容器id
         viewMode: '2D', //是否为3D地图模式
-        zoom: 15, //初始化地图级别
+        zoom: 8, //初始化地图级别
         mapStyle:"amap://styles/dark",//深色模式
         center: lnglat, //初始化地图中心点位置
       })
+      // 初始化地理编码服务
+      geocoder = new AMap.value.Geocoder({
+        radius: 1000, // 范围，默认：1000
+        extensions: "all" // 返回地址描述对应的详细信息
+      });
       map.value.clearMap() // 清除地图覆盖物
       // 地图是否可拖拽和缩放
       map.value.setStatus({
@@ -140,19 +187,427 @@ const initMap = () => {
       console.log('error', e)
     })
 }
+
+const initData = ()=>{
+  //模拟数据
+  echars01data.value=[{
+      code:"none",
+      name:alarm_type.value["none"].name,
+      value:5,
+      rate:Math.round(5/12*100)
+    },
+    {
+      code:"smoke",
+      name:alarm_type.value["smoke"].name,
+      value:1,
+      rate:Math.round(1/12*100)
+    },
+    {
+      code:"fire",
+      name:alarm_type.value["fire"].name,
+      value:2,
+      rate:Math.round(2/12*100)
+    },
+    {
+      code:"temp",
+      name:alarm_type.value["temp"].name,
+      value:Math.round(1/12*100),
+      rate:0
+    },
+    {
+      code:"person",
+      name:alarm_type.value["person"].name,
+      value:3,
+      rate:Math.round(4/12*100)
+    },
+  ];
+  echars02data.value=[
+    {date:"01",value:"2"},{date:"02",value:"0"},{date:"03",value:"1"},{date:"04",value:"3"},{date:"05",value:"0"},{date:"06",value:"0"},
+    ,{date:"07",value:"0"},{date:"08",value:"0"},{date:"09",value:"0"},{date:"10",value:"1"},{date:"11",value:"0"},{date:"12",value:"0"}
+  ];
+  echars03data.value=[
+    {date:"01",value:"2"},{date:"02",value:"0"},{date:"03",value:"1"},{date:"04",value:"3"},{date:"05",value:"0"},{date:"06",value:"0"},
+    ,{date:"07",value:"0"},{date:"08",value:"0"},{date:"09",value:"0"},{date:"10",value:"1"},{date:"11",value:"0"},{date:"12",value:"0"}
+  ];
+  loadEchars01();
+  loadEchars02();
+  loadEchars03();
+}
+
+const loadEchars01=()=>{
+  let chartData = {
+     roseChart: true,
+     colorArr: ['#2186fd', '#dd4949', '#ee901b', '#11c8b4',"#823cd8"],
+     data:echars01data.value
+  };
+  let arr = chartData.data.map(item => item.value);
+
+  function sum(arr) {
+     return eval(arr.join("+"));
+  };
+  let legendObj = {};
+  for (let i = 0; i < chartData.data.length; i++) {
+     legendObj['d' + i] = {
+        width: 10,
+        height: 10,
+        lineHeight: (chartData.setFont || 16) * 2,
+        borderRadius: 10,
+        backgroundColor: `rgb(${chartData.colorArr[i]})`,
+     };
+     legendObj['p' + i] = {
+        fontSize: chartData.setFont || 16,
+        padding: [0, 0, 0, 20],
+        color: `rgb(${chartData.colorArr[i]})`,
+     };
+  }
+  let option = {
+     backgroundColor: '#00000000',
+     color: chartData.colorArr,
+     grid: {
+        left: 5,
+        right: 5,
+        bottom: 5,
+        top: 5,
+        containLabel: true
+     },
+     title: {
+        show: true,
+        text: '{a|总量}\n{b|' + sum(arr) + '}',
+        x: '30%',
+        y: '43%',
+        textStyle: {
+           rich: {
+              a: {
+                 align: 'center',
+                 fontSize: 12,
+                 color: '#fff',
+                 padding: [0, 0, 10, 0],
+              },
+              b: {
+                 align: 'center',
+                 fontSize: 14,
+                 color: '#fff'
+              },
+           },
+        }
+     },
+     legend: {
+        height: '100%',
+        icon: 'circle',
+        orient: 'vertical',
+        right: 10,
+        bottom: 'center',
+        itemWidth: 0,
+        itemHeight: 0,
+        itemGap: 10,
+        textStyle: {
+           rich: {
+              n: {
+                 padding: [0, 0, 0, 10],
+                 lineHeight: chartData.setFont || 12,
+                 fontSize: chartData.setFont || 12,
+                 color: "#fff",
+              },
+              ...legendObj
+           }
+        },
+        formatter: function (name) {
+           let index = 0;
+           let d = chartData.data.filter((item, i) => {
+              if (item.name == name) {
+                 index = i;
+                 return item;
+              }
+           });
+           let p = d[0].value / sum(arr) * 100;
+           return `{d${index}|}{n|${name}}`;
+        },
+     },
+     tooltip: {
+        trigger: 'item',
+        formatter: '{b}：{c}（{d}%）'
+     },
+     series: [{
+        type: 'pie',
+        clockwise: false,
+        startAngle: 90,
+        radius: ['35%', '55%'],
+        center: ['35%', '50%'],
+        hoverAnimation: false,
+        roseType: chartData.roseChart ? 'radius' : false,
+        data: chartData.data,
+        itemStyle: {
+           color: (param) => {
+              let i = param.dataIndex;
+              return  chartData.colorArr[i] 
+           },
+           opacity: .9
+        },
+        label: {
+           show: false
+        },
+        labelLine: {
+           show: false
+        }
+     }]
+  };
+  echarts.init(echarts01.value).setOption(option);
+}
+const loadEchars02=()=>{
+  const dataX = [];
+  const y = [];
+  echars02data.value.map(item=>{
+    dataX.push(item.date);
+    y.push(item.value);
+  })
+  let option = {
+    backgroundColor: '#00000000',
+    grid: {
+        left: 5,
+        right: 5,
+        bottom: 5,
+        top: 15,
+        containLabel: true
+    },
+    tooltip: { // 提示框组件
+        trigger: 'axis', // 触发类型
+        textStyle: {
+           fontSize: 12 // 文字像素
+        },
+    },
+    xAxis: {
+        data: dataX, // 数据
+        min: 0, // 最小值
+        type: 'category',
+        boundaryGap: true, // 开始和结尾是否隔开
+        axisLabel: {
+           textStyle: {
+              color: '#5d646b', // 文字颜色
+              fontSize: 12 // 文字像素
+           }
+        },
+        axisLine: {
+           show: false // 是否显示坐标轴轴线
+        },
+        axisTick: {
+           show: false // 去除刻度线
+        }
+     },
+     yAxis: {
+        type: 'value',
+        name: "单位：次",
+        min: 0, // 最小值
+        axisLine: {
+           show: false
+        },
+        axisLabel: {
+           textStyle: {
+              color: '#5d646b', // 文字颜色
+              fontSize: 12 // 文字像素
+           }
+        },
+        // y轴分割线的颜色
+        splitLine: {
+           lineStyle: {
+              color: '#575f66', // 分割线的颜色
+              type: 'dashed',
+           }
+        }
+     },
+     series: [
+        {
+           type: 'line',
+           symbolSize: 8, // 设置拐点大小
+           symbol:'circle',
+           label: {
+              show: true, // 线条折点处显示值
+              position: 'top', // 标签的位置
+              color: "#5d646b", // 文字颜色
+              fontSize: 12, // 文字像素
+           },
+           // 填充颜色设置
+           areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                 { offset: 1, color: 'rgba(72,115,255,0.2)' },  //开始的颜色
+                 { offset: 0, color: 'rgba(234,233,255,0.2)' }  //结束的颜色
+              ]),
+           },
+           // 设置拐点颜色以及边框
+           itemStyle: {
+              color: '#2084fa'
+           },
+           lineStyle: {
+              width: 2, // 线的宽度              
+           },
+           tooltip: {
+              valueFormatter: function (value) {
+                 return value;
+              }
+           },
+           data: y
+        },
+     ]
+  };
+  echarts.init(echarts02.value).setOption(option);
+}
+const loadEchars03=()=>{
+  var gain = 0.9;
+  var gap = 0;
+  let maxvalue=0;
+  //柱子数据
+  var data = [];
+  var dataX = [];
+  echars03data.value.map(item=>{
+    dataX.push(item.date);
+    data.push(item.value);
+    if (maxvalue.length>1){
+      maxvalue = Math.max(maxvalue,item.value);
+    }
+  })
+  maxvalue =maxvalue+2;
+  var option = {
+      backgroundColor: '',
+      tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true
+            }
+          }
+        },
+    grid: {
+      left: '3%',
+      top: '10%',
+      right: '2%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(160,160,160,0.3)'
+          }
+        },
+        axisLabel: {
+          textStyle:{
+              fontSize:12,
+              color:'#5a6268'
+          }
+        },
+        data: dataX
+      },
+      {
+        type: 'category',
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: true,
+          textStyle:{
+              fontSize:12,
+              color:'#fff'
+          }
+        },
+        splitArea: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        },
+        data: []
+      }
+    ],
+    yAxis: {
+      type: 'value',      
+      nameTextStyle: {
+        color: '#ffffff',
+        fontSize: 12
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+           lineStyle: {
+              color: '#575f66', // 分割线的颜色
+              type: 'dashed',
+           }
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#5a6268',
+          fontSize: 12
+        }
+      }
+    },
+    series: [
+      {
+        type: 'bar',
+        xAxisIndex: 1,
+        itemStyle: {
+          normal: {
+            show: true,
+            color: "#2186fd00",
+            barBorderRadius: 50,
+            borderWidth: 0,
+            borderColor: '#333'
+          }
+        },
+        barWidth: '30%',
+        data: [maxvalue, maxvalue, maxvalue, maxvalue,maxvalue, maxvalue, maxvalue, maxvalue,maxvalue, maxvalue, maxvalue, maxvalue]
+      },
+      {
+        type: 'bar',
+        itemStyle: {
+          normal: {
+            show: true,
+            color: "#2186fd",
+            barBorderRadius: 50,
+            borderWidth: 0,
+            borderColor: '#333'
+          }
+        },
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
+            textStyle: {
+                  fontSize: 12
+              }
+          }
+        },
+        barWidth: '30%',
+        data: data
+      }
+    ]
+  };
+  echarts.init(echarts03.value).setOption(option);
+}
 onMounted(() => {
   const userinfo = JSON.parse(sessionStorage.getItem("user")||'{}');
   if (userinfo.userName!=null) {
     let tmplst =[];
     for (let index = 0; index <  houselist.value.length; index++) {
       const element =  houselist.value[index];
-      if(userinfo.userName=='admin'|| element.code==userinfo.userName){
+      if(userinfo.userName=='admin'|| userinfo.userName=='sc'|| element.code==userinfo.userName){
         tmplst.push(element)
       }
     }
     houselist.value = tmplst;
   }
-  initMap()
+  initMap();
+  initData();
 })
 </script>
 <style scoped>
@@ -216,5 +671,65 @@ onMounted(() => {
         }
       }
     }
+    .left{
+      position: fixed;
+      right: 0;
+      top: 60px;
+      z-index: 10;
+      width: 300px;
+      background-color:#03030366;
+      height: calc(100% - 60px);
+      .area{
+        height: 33.3%;
+        width: 100%;
+        .title{
+          background-color: #192733;
+          font-size: 14px;
+          font-weight: bold;
+          color: #fff;
+          height: 35px;
+          line-height: 15px;
+          padding: 10px;
+          display: flex;
+          .line{
+            width: 5px;
+            height: 15px;
+            background-color: #fff;
+            border-radius: 5px;
+            margin-right: 10px;
+          }
+          .stat_rate{
+            color: #47576a;
+            font-size: 12px;
+            margin-left: 5px;
+          }
+        }
+        .toolsbtn{
+          height: 24px;
+          width: 100%;
+          display: flex;
+          margin-top: 10px;
+          margin-left: 10px;
+          line-height: 15px;
+          margin-right: 2px;
+          cursor: pointer;
+          .toolsbtn_item{
+            display: inline-block;
+            padding: 5px 10px;
+            background-color: #262f38;
+            color: #686f75;
+            font-size: 12px;
+          }
+          .toolsbtn_item.active,.toolsbtn_item:hover{
+            background-color: #2184fa;
+            color: #fff;
+          }
+        }
+        .echartsdiv{
+          height: calc(100% - 35px);
+          width: 100%;
+        }
+      }
+    }
 }
 </style>