前端接口集成

index.html

@@ -210,6 +210,7 @@
     </div>
   </div>
   <script type="module" src="/src/main.js"></script>
+  <script type="module" src="/config.js"></script>
   <script type="module" src="/jessibuca.js"></script>
 </body>
 

public/config.js

@@ -0,0 +1 @@
+window.VideoServerUrl="http://47.108.159.150:8080"

src/layout/index.vue

@@ -6,7 +6,8 @@
         <navbar @setLayout="setLayout" />
       </div>
       <app-main />
-      <device-stat></device-stat>
+      <!---设备统计，暂时隐藏-->
+      <device-stat v-if="false"></device-stat>
       <settings ref="settingRef" />
     </div>
   </div>

src/views/components/housecamer.vue

@@ -7,12 +7,12 @@
                     <el-select v-model="provinceValue" :popper-append-to-body="false">
                         <el-option 
                             v-for="item in provinceList" 
-                            :label="item.name" 
-                            :value="item.code"
+                            :label="item.label" 
+                            :value="item.id"
                         />
                     </el-select>
-                    <el-select v-model="cityValue"><el-option v-for="item in cityList" :label="item.name" :value="item.code"/></el-select>
-                    <el-select v-model="countryeValue" multiple><el-option v-for="item in countryeList" :label="item.name" :value="item.code"/></el-select>
+                    <el-select v-model="cityValue"><el-option v-for="item in cityList" :label="item.label" :value="item.id"/></el-select>
+                    <el-select v-model="countryeValue"><el-option v-for="item in countryeList" :label="item.label" :value="item.id"/></el-select>
                     <div class="houselist">
                         <div v-for="item in houselist" :class="item.active==true ?'house-item active' : 'house-item'" @click="selectedHouse(item)">{{ item.name }}</div>
                     </div>
@@ -20,9 +20,9 @@
                 <div class="middle">
                   <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 :class="currFlowType=='total'?'toolsbtn_item active':'toolsbtn_item'" @click="switchFlow('total')">总量</div>
+                    <div :class="currFlowType=='closed'?'toolsbtn_item active':'toolsbtn_item'" @click="switchFlow('closed')">闭单量</div>
+                    <div :class="currFlowType=='unclosed'?'toolsbtn_item active':'toolsbtn_item'" @click="switchFlow('unclosed')">未闭单量</div>
                   </div>
                   <div class="echartsdiv" ref="echarts03"></div>
                 </div>
@@ -33,7 +33,7 @@
                   <span class="iotstat"><img src="/images/icon_iot_01.png"> 排风正常</span>
                   <span class="iotstat"><img src="/images/icon_iot_02.png"> 烟感正常</span>
                   <span class="countstat alarm_list">
-                    <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>
+                    <span class="alarm_list_item" v-for="item in alarm_curr"><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.value }}</span></span>
                   </span>
                   <span class="videocount">
                     <span :class="videocount_type=='4' ?'videocount_item active':'videocount_item'">四分屏</span>
@@ -75,6 +75,9 @@
 <script setup>
 import {shallowRef,onMounted,defineExpose} from "vue";
 import request from '@/utils/request';
+import {
+  deptTreeSelect,
+} from "@/api/biz/houseConfig";
 import * as echarts from "echarts";
 import Player from './player.vue'
 const {proxy} = getCurrentInstance();
@@ -83,13 +86,14 @@ const provinceValue = ref('')
 const cityValue = ref('');
 const countryeValue=ref('');
 const provinceList=ref(null);//省列表
-const cityList=ref([{name:"成都市",code:"510100"},{name:"自贡市",code:"510300"}]);//地市列表
-const countryeList=ref([{name:"全部区县",code:""}]);//区县列表
+const cityList=ref([]);//地市列表
+const countryeList=ref([]);//区县列表
 const houselist = ref(null);
-const selectHouse = ref(null);
+const selectHouse = ref({});
 const echarts03 = ref(null);
 const echars03data = ref(null);
 const alarm_type = ref(null);
+const alarm_curr = ref([]);
 const videocount_type = ref('4');
 const video_list=ref([]);
 const cc_params1=ref(0);
@@ -98,6 +102,17 @@ const cc_params3=ref(0);
 const cc_params4=ref(50);
 // 存储动态 ref 的对象
 const tempPlayerRefs = ref({});
+const channelIdList = ref([]);
+const currFlowType = ref('total');
+const eventFlowData = ref([]);
+const deptOptions = ref([]);
+const typeMapping={
+  "0":"none",  
+  "201":"smoke",
+  "195":"fire",
+  "189":"person",
+  "191":"temp"  
+}
 const alarm_list = ref([{
   code:"none",
   count:0
@@ -114,43 +129,98 @@ const alarm_list = ref([{
   code:"person",
   count:0
 }]);
-const load=(houseinfo,v_alarm_type)=>{
+
+const load=(hostlist, houseinfo,v_alarm_type)=>{
     alarm_type.value = v_alarm_type
     showHouse.value = true;
-    console.log("=======",houseinfo.value)
-    provinceList.value=[{name:"四川省",code:"510000"}];
-    provinceValue.value = provinceList.value[0].code;
-    houselist.value=([{
-      name:"自贡中心仓库-001",
-      camer_code:"zg-001",
-      code:"zg",
-      city:"510300",
-      addr:"自贡市沿滩区金川路东段28号高新仓储物流园一期",
-      lnglat:[0,0],
-      alarmtype:"none",
-      camername:"1-10001号摄像头",
-      video_url:"http://47.108.159.150:8080/flv/34020000001110000001/34020000001310000055",
-    },{
-      name:"自贡中心仓库-002",
-      camer_code:"zg-002",
-      code:"cd",
-      city:"510100",
-      addr:"简阳市石桥镇羊羊小镇大华国际B1栋13楼1322号",
-      lnglat:[0,0],
-      alarmtype:"smoke",
-      camername:"1-10002号摄像头",
-      video_url:"http://47.108.159.150:8080/flv/34020000001180000003/34020000001310000051",
-    }]);
+    houselist.value=hostlist;
     for (let index = 0; index < houselist.value.length; index++) {
         const element = houselist.value[index];
         if(element.code==houseinfo.value.code){
             houselist.value[index]["active"] = true;
             selectHouse.value = element;
-            break;
+        }else{
+          houselist.value[index]["active"] = false;
         }
     }
-    loadEchars03();
+    getchannel();    
+    loadEvent();
+    deptTreeSelect().then(response => {
+      deptOptions.value = response.data;
+      getprovinceList();
+      getcityList();
+      getcountyList();
+    });
+}
+const getprovinceList=()=>{
+  let lv= [];
+  for(let i=0;i<deptOptions.value.length;i++){
+    lv.push(deptOptions.value[i])
+  }
+  provinceList.value = lv;
+}
+const getcityList=()=>{
+  let lv= [];
+  for(let i=0;i<deptOptions.value.length;i++){
+    if(deptOptions.value[i].children.length>0){      
+      lv.push(...deptOptions.value[i].children)
+      lv.map(item=>{
+        item.id = deptOptions.value[i].id+"-"+item.id;
+      })
+    }
+  }
+  cityList.value = lv;
+}
+const getcountyList=()=>{
+  let lv= [{label:"全部区县",id:""}];
+  for(let i=0;i<deptOptions.value.length;i++){
+    if(deptOptions.value[i].children.length>0){ 
+      for (let index = 0; index < deptOptions.value[i].children.length; index++) {
+        const element = deptOptions.value[i].children[index];
+        if(element.children.length>0){
+          element.children.map(item=>{
+            item.id = deptOptions.value[i].id+"-"+element.id+"-"+item.id;
+          })
+          lv.push(...element.children)
+        }
+      }
+    }
+  }
+  countryeList.value = lv;
+}
+const loadEvent=()=>{
+  request({
+            url: '/index/events/'+selectHouse.value.houseId,
+            method: 'get',
+            data: null
+  }).then(res=>{
+    eventFlowData.value = res.flow;
+    let vl=[];
+    for (let k in typeMapping) {
+      vl.push({id:k, code:typeMapping[k],name:alarm_type.value[typeMapping[k]].name,value:res.curr[k]*1});
+    }
+    alarm_curr.value = vl;
+    loadEchars03(); 
+  })
+}
+const getchannel=()=>{
+  if(tempPlayerRefs.value!=null && tempPlayerRefs.value.length>0){
+    for(let k in tempPlayerRefs.value){
+      tempPlayerRefs.value[k].destroy();
+    }
+  }
+  request({
+      url: '/index/device/'+selectHouse.value.houseId,
+      method: 'get',
+      data: null
+  }).then(res=>{
+    channelIdList.value = res;
     initvideodata();
+  })
+}
+const switchFlow=(key)=> {
+  currFlowType.value = key;
+  loadEchars03();
 }
 const closeDlg=() =>{
     //销毁资源
@@ -169,13 +239,16 @@ const selectedHouse=(item)=>{
             houselist.value[index]["active"] = false;
         }
     }
-    loadEchars03();
+    getchannel();
+    loadEvent();
 }
 const loadEchars03=()=>{
-  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"}
-  ];
+  let vl=[];
+  for (let index = 0; index < eventFlowData.value.length; index++) {
+    const element = eventFlowData.value[index];
+    vl.push({date:element.date.substr(5),value:element[currFlowType.value]})
+  }
+  echars03data.value = vl;
   var gain = 0.9;
   var gap = 0;
   let maxvalue=0;
@@ -324,14 +397,15 @@ const loadEchars03=()=>{
 }
 const initvideodata=()=>{
   let tmp = [];
-  for (let index = 0; index < Math.min(videocount_type.value*1,houselist.value.length); index++) {
-    let ele = houselist.value[index];
-    tmp.push({name:ele.camername,code:ele.camer_code,contrlset:false,state:'offline',statedesc:'离线',url:ele.video_url});
+  for (let index = 0; index < Math.min(videocount_type.value*1,channelIdList.value.length); index++) {
+    let ele = channelIdList.value[index];
+    let video_url = window.VideoServerUrl+"/flv/"+ele.deviceCode+"/"+ele.channelId;
+    tmp.push({name:ele.channelName,code:ele.deviceCode,contrlset:false,state:ele.status,statedesc:ele.status=='ON'?'在线':'离线',url:video_url});
   }
   video_list.value = tmp;
   setTimeout(() => {
     for(let i=0;i<tmp.length;i++){
-      tempPlayerRefs.value[tmp[i].code].play(tmp[i].url);
+      //tempPlayerRefs.value[tmp[i].code].play(tmp[i].url);
     }
   }, 200);
 }
@@ -364,7 +438,7 @@ const ccMove=(dir,v)=>{
     cmd = "A50F01027D000034"
   }
   request({
-      url: 'http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
+      url: window.VideoServerUrl+'/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
       headers: {
         authorization: 'Bearer monibuca',
       },
@@ -374,7 +448,7 @@ const ccMove=(dir,v)=>{
       if(res.code==0){
         cmd='A50F0100000000B5';
         request({
-            url: 'http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
+            url: window.VideoServerUrl+'/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
             headers: {
               authorization: 'Bearer monibuca',
             },
@@ -551,8 +625,9 @@ defineExpose({
                     .housename{
                       font-weight: bold;
                       color: #fff;
-                      width: 150px;
+                      width:200px;
                       display: inline-block;
+                      text-overflow: hidden;
                     }
                     .iotstat{
                       font-size: 12px;
@@ -570,7 +645,7 @@ defineExpose({
                       }
                     }
                     .countstat{
-                      width: 60%;
+                      width: 58%;
                     }
                     .alarm_list{
                         z-index: 10;

src/views/components/player.vue

@@ -177,38 +177,38 @@
         );
         var _this = this;
         this.jessibuca.on("load", function () {
-          console.log("on load");
+          //console.log("on load");
         });
   
         this.jessibuca.on("log", function (msg) {
-          console.log("on log", msg);
+          //console.log("on log", msg);
         });
         this.jessibuca.on("record", function (msg) {
-          console.log("on record:", msg);
+          //console.log("on record:", msg);
         });
         this.jessibuca.on("pause", function () {
-          console.log("on pause");
+          //console.log("on pause");
           _this.playing = false;
         });
         this.jessibuca.on("play", function () {
-          console.log("on play");
+          //console.log("on play");
           _this.playing = true;
         });
         this.jessibuca.on("fullscreen", function (msg) {
-          console.log("on fullscreen", msg);
+          //console.log("on fullscreen", msg);
         });
   
         this.jessibuca.on("mute", function (msg) {
-          console.log("on mute", msg);
+          //console.log("on mute", msg);
           _this.quieting = msg;
         });
   
         this.jessibuca.on("mute", function (msg) {
-          console.log("on mute2", msg);
+          //console.log("on mute2", msg);
         });
   
         this.jessibuca.on("audioInfo", function (msg) {
-          console.log("audioInfo", msg);
+          //console.log("audioInfo", msg);
         });
   
         // this.jessibuca.on("bps", function (bps) {
@@ -221,7 +221,7 @@
         // });
   
         this.jessibuca.on("videoInfo", function (info) {
-          console.log("videoInfo", info);
+          //console.log("videoInfo", info);
         });
   
         this.jessibuca.on("error", function (error) {
@@ -233,7 +233,7 @@
         });
   
         this.jessibuca.on('start', function () {
-          console.log('frame start');
+          //console.log('frame start');
         })
   
         this.jessibuca.on("performance", function (performance) {
@@ -246,15 +246,15 @@
           _this.performance = show;
         });
         this.jessibuca.on('buffer', function (buffer) {
-          console.log('buffer', buffer);
+          //console.log('buffer', buffer);
         })
   
         this.jessibuca.on('stats', function (stats) {
-          console.log('stats', stats);
+          //console.log('stats', stats);
         })
   
         this.jessibuca.on('kBps', function (kBps) {
-          console.log('kBps', kBps);
+          //console.log('kBps', kBps);
         });
   
         this.jessibuca.on("play", () => {
@@ -264,7 +264,7 @@
         });
   
         this.jessibuca.on('recordingTimestamp', (ts) => {
-          console.log('recordingTimestamp', ts);
+          //console.log('recordingTimestamp', ts);
         })
   
   

src/views/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="containerMap" class="containerMap">
       <div class="alarm_list">
-        <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>
+        <span class="alarm_list_item" v-for="item in alarm_curr" @click="showFLowDlg(item)"><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.value }}</span></span>
       </div>
       <div class="houselist">
         <span  class="item" @click="toHouse(item)" v-for="item in houselist" :style="{'background-color':alarm_type[item.alarmtype].bg}" >
@@ -22,9 +22,9 @@
         <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 :class="currFlowType=='total'?'toolsbtn_item active':'toolsbtn_item'" @click="switchFlow('total')">总量</div>
+            <div :class="currFlowType=='closed'?'toolsbtn_item active':'toolsbtn_item'" @click="switchFlow('closed')">闭单量</div>
+            <div :class="currFlowType=='unclosed'?'toolsbtn_item active':'toolsbtn_item'" @click="switchFlow('unclosed')">未闭单量</div>
           </div>
           <div class="echartsdiv" ref="echarts03" style="height: calc(100% - 69px);"></div>
         </div>
@@ -41,11 +41,37 @@
       </div>
       <house ref="houseComp" />
     </div>
+    <el-dialog title="流程列表" v-model="open" width="1024px" append-to-body>
+      <el-table v-loading="loading" :data="fcList" height="460px">
+        <el-table-column label="发起时间" align="center" prop="createTime" />
+        <el-table-column label="流程名称" align="center" prop="flowsName" />
+        <el-table-column label="仓库名称标识" align="center" show-overflow-tooltip prop="house" width="150px"/>
+        <el-table-column label="区域/位置标识" align="center" show-overflow-tooltip prop="area"  width="150px"/>
+        <el-table-column label="状态" align="center" prop="status" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-button link type="primary" @click="handleJump(scope.row.journeyUrl)" >详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>     
+      <pagination
+        :total="total"
+        v-model:page="queryParams.page"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getFcList"
+      />
+      <template #footer>
+        <div class="dialog-footer"> 
+          <el-button @click="open=false">关 闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
 </template>
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
 import {shallowRef,onMounted} from "vue";
 import * as echarts from "echarts";
+import request from '@/utils/request';
 import House from './components/housecamer.vue'
 import Player from './components/player.vue'
 const playercontainer=ref(null)
@@ -57,13 +83,32 @@ const echarts03 = ref(null);
 const echars01data = ref(null);
 const echars02data = ref(null);
 const echars03data = ref(null);
+const alarm_curr=ref(null);
 const infoWindowContent = ref(null);
 const showInfoWindow = ref(false);
 const currentHouseCode = ref('');
 const currentHouse = ref({});
 const houseComp = ref(null);
+const currFlowType=ref("total");
+const eventFlowData  =ref([]);
+const open=ref(false);
+const fcList = ref([]);
+const loading = ref(false);
+const queryParams=ref({
+    page: 1,
+    pageSize: 10,
+    flowid:0,
+});
+const total = ref(0);
 let infoWindow = null;
 let geocoder = null;
+const typeMapping={
+  "0":"none",  
+  "201":"smoke",
+  "195":"fire",
+  "189":"person",
+  "191":"temp"  
+}
 const alarm_type=ref({
   "none":{
     name:'行为合规',
@@ -91,41 +136,8 @@ const alarm_type=ref({
     bg:'#833dd9'
   }
 })
-const alarm_list = ref([{
-  code:"none",
-  count:0
-},{
-  code:"smoke",
-  count:0
-},{
-  code:"fire",
-  count:0
-},{
-  code:"temp",
-  count:0
-},{
-  code:"person",
-  count:0
-}]);
 
-const houselist=ref([{
-  name:"自贡中心仓库",
-  code:"zg",
-  city:"510300",
-  addr:"自贡市沿滩区金川路东段28号高新仓储物流园一期",
-  lnglat:[0,0],
-  alarmtype:"none",
-  video_url:"http://47.108.159.150:8080/flv/34020000001110000001/34020000001310000055",
-},{
-  name:"成都中心仓库",
-  code:"cd",
-  city:"510100",
-  addr:"简阳市石桥镇羊羊小镇大华国际B1栋13楼1322号",
-  lnglat:[0,0],
-  alarmtype:"smoke",
-  camername:"1-10002号摄像头",
-  video_url:"http://47.108.159.150:8080/flv/34020000001180000003/34020000001310000051",
-}]);
+const houselist=ref(null);
 
 const initHouseLoca=()=>{
   for (let index = 0; index < houselist.value.length; index++) {
@@ -143,7 +155,38 @@ const inHouse=()=>{
   if(playercontainer.value!=null){
     playercontainer.value.pause();
   }
-  houseComp.value.load(currentHouse,alarm_type.value);
+  houseComp.value.load(houselist.value,currentHouse,alarm_type.value);
+}
+
+const switchFlow=(key)=> {
+  currFlowType.value = key;
+  loadEchars03();
+}
+
+const showFLowDlg=(flow)=>{
+  if(flow.id==0) return;
+  open.value=true;
+  queryParams.value.page = 1;
+  queryParams.value.pageSize = 10;
+  queryParams.value.flowid = flow.id;
+  getFcList();
+}
+const getFcList=()=>{
+  loading.value = true;
+  fcList.value=[];
+  request({
+            url: '/index/flows/'+queryParams.value.flowid+"?pageNum="+queryParams.value.page+"&pageSize="+queryParams.value.pageSize,
+            method: 'get',
+            data: null
+  }).then(res=>{
+    loading.value = false;
+    fcList.value = res.rows;
+    total.value = res.total;
+  })  
+}
+
+const handleJump=(url)=>{
+  window.open(url,"_blank")
 }
 
 const getGeoLocation=(houseind,address)=> {
@@ -186,7 +229,7 @@ const addMarker=(houseinfo,lnglat) =>{
       currentHouse.value = extdata;
       infoWindow.setContent(infoWindowContent.value)
       infoWindow.open(map.value,e.target.getPosition());
-      playercontainer.value.play(currentHouse.value.video_url)
+      if(currentHouse.value.video_url!="") playercontainer.value.play(currentHouse.value.video_url)
     }else{
       playercontainer.value.destroy();
       document.getElementById(currentHouseCode.value).className = "custom-marker";
@@ -237,8 +280,8 @@ const initMap = () => {
       map.value.setStatus({
         dragEnable: true, // 是否可拖拽
         zoomEnable: true, // 是否可缩放
-      })
-      initHouseLoca();
+      })      
+      initData();
     })
     .catch((e) => {
       console.log('error', e)
@@ -246,49 +289,66 @@ const initMap = () => {
 }
 
 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();
+  //加载仓库列表
+  request({
+            url: '/index/house',
+            method: 'get',
+            data: null
+  }).then(res=>{
+    const userinfo = JSON.parse(sessionStorage.getItem("user")||'{}');
+    if (userinfo.userName!=null) {
+      let tmplst =[];
+      for (let index = 0; index <  res.length; index++) {
+        let element =  res[index];
+        
+          element["lnglat"] = [element.lat||0,element.lng||0];
+          element["alarmtype"] = 'none';
+          element["code"] = element.simpleName;
+          element["name"] = element.houseName;
+          element["addr"] = element.houseAddr;
+          element["alarmtype"] = typeMapping[element.params.alarm];
+          element["video_url"] = "";
+          if(element.params.channel.length>0){
+            element["camername"] = element.params.channel[0].channelName;
+            element["video_url"] = window.VideoServerUrl+"/flv/"+element.params.channel[0].deviceCode+"/"+element.params.channel[0].channelId ;
+          }
+          tmplst.push(element);
+      }
+      houselist.value = tmplst;
+      initHouseLoca();
+    }
+  });
+}
+
+const loadStat=()=>{
+  ///index/events
+  request({
+            url: '/index/events',
+            method: 'get',
+            data: null
+  }).then(res=>{
+    let vl=[];
+    for (let k in typeMapping) {
+      vl.push({id:k, code:typeMapping[k],name:alarm_type.value[typeMapping[k]].name,value:res.curr[k]*1});
+    }
+    alarm_curr.value = vl;
+    vl=[];
+    for (let k in typeMapping) {
+      vl.push({code:typeMapping[k],name:alarm_type.value[typeMapping[k]].name,value:res.month[k]*1});
+    }
+    echars01data.value = vl;
+    loadEchars01();
+    vl=[];
+    for (let index = 0; index < res.trade.length; index++) {
+      const element = res.trade[index];
+      vl.push({date:element.date.substr(5),value:element.value})
+    }
+    echars02data.value = vl;
+    loadEchars02();
+
+    eventFlowData.value = res.flow;
+    loadEchars03();
+  })
 }
 
 const loadEchars01=()=>{
@@ -508,6 +568,12 @@ const loadEchars02=()=>{
   echarts.init(echarts02.value).setOption(option);
 }
 const loadEchars03=()=>{
+  let vl=[];
+  for (let index = 0; index < eventFlowData.value.length; index++) {
+    const element = eventFlowData.value[index];
+    vl.push({date:element.date.substr(5),value:element[currFlowType.value]})
+  }
+  echars03data.value = vl;
   var gain = 0.9;
   var gap = 0;
   let maxvalue=0;
@@ -652,19 +718,8 @@ const loadEchars03=()=>{
   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'|| userinfo.userName=='sc'|| element.code==userinfo.userName){
-        tmplst.push(element)
-      }
-    }
-    houselist.value = tmplst;
-  }
-  initMap();
-  initData();
+  loadStat();
+  initMap();  
 })
 </script>
 <style>
@@ -816,6 +871,8 @@ onMounted(() => {
   height: 260px;
   border-radius: 5px;
   background: #0000003b;
+  background-image: url('/images/video_bg.png');
+  background-size: contain;
   .camername{
         height: 26px;
         width: auto;
@@ -869,6 +926,7 @@ onMounted(() => {
       left: 75px;
       top: 40px;
       .alarm_list_item{
+        cursor: pointer;
         position: relative;
         margin: 0 5px;
         padding: 6px 20px;