仓库过滤功能

src/layout/components/AppMain.vue

@@ -2,9 +2,11 @@
   <section class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
-        <keep-alive :include="tagsViewStore.cachedViews">
-          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
-        </keep-alive>
+        <div>
+          <keep-alive :include="tagsViewStore.cachedViews">
+            <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
+          </keep-alive>
+        </div>
       </transition>
     </router-view>
     <iframe-toggle />

src/views/components/housecamer.vue

@@ -4,15 +4,15 @@
         <div class="content">
             <div class="left">
                 <div class="top">
-                    <el-select v-model="provinceValue" :popper-append-to-body="false">
+                    <el-select v-model="provinceValue" @change="changeProvince">
                         <el-option 
                             v-for="item in provinceList" 
                             :label="item.label" 
                             :value="item.id"
                         />
                     </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>
+                    <el-select v-model="cityValue" @change=changeCity><el-option v-for="item in cityList" :label="item.label" :value="item.id"/></el-select>
+                    <el-select v-model="countryeValue" @change="changeCounty"><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>
@@ -30,8 +30,10 @@
             <div class="right">
                 <div class="top">
                   <span class="housename">{{ selectHouse.name }}</span>
-                  <span class="iotstat"><img src="/images/icon_iot_01.png"> 排风正常</span>
-                  <span class="iotstat"><img src="/images/icon_iot_02.png"> 烟感正常</span>
+                  <span class="iotstat" v-if="selectHouse.smoke==true"><img src="/images/icon_iot_01.png"> 排风正常</span>
+                  <span class="iotstat" v-else><img src="/images/icon_iot_01.png"> 排风异常</span>
+                  <span class="iotstat" v-if="selectHouse.exhaust==true"><img src="/images/icon_iot_02.png"> 烟感正常</span>
+                  <span class="iotstat" v-else><img src="/images/icon_iot_02.png"> 烟感异常</span>
                   <span class="countstat alarm_list">
                     <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>
@@ -85,10 +87,14 @@ const showHouse=ref(false);
 const provinceValue = ref('')
 const cityValue = ref('');
 const countryeValue=ref('');
+const provinceAllList=ref(null);//省列表
+const cityAllList=ref([]);//地市列表
+const countryeALlList=ref([]);//区县列表
 const provinceList=ref(null);//省列表
 const cityList=ref([]);//地市列表
 const countryeList=ref([]);//区县列表
 const houselist = ref(null);
+const houseAllList = ref(null);
 const selectHouse = ref({});
 const echarts03 = ref(null);
 const echars03data = ref(null);
@@ -134,6 +140,7 @@ const load=(hostlist, houseinfo,v_alarm_type)=>{
     alarm_type.value = v_alarm_type
     showHouse.value = true;
     houselist.value=hostlist;
+    houseAllList.value = hostlist;
     for (let index = 0; index < houselist.value.length; index++) {
         const element = houselist.value[index];
         if(element.code==houseinfo.value.code){
@@ -147,6 +154,7 @@ const load=(hostlist, houseinfo,v_alarm_type)=>{
     loadEvent();
     deptTreeSelect().then(response => {
       deptOptions.value = response.data;
+      //扁平化处理省、市、区
       getprovinceList();
       getcityList();
       getcountyList();
@@ -158,6 +166,7 @@ const getprovinceList=()=>{
     lv.push(deptOptions.value[i])
   }
   provinceList.value = lv;
+  provinceAllList.value = lv;
 }
 const getcityList=()=>{
   let lv= [];
@@ -170,6 +179,7 @@ const getcityList=()=>{
     }
   }
   cityList.value = lv;
+  cityAllList.value = lv;  
 }
 const getcountyList=()=>{
   let lv= [{label:"全部区县",id:""}];
@@ -187,6 +197,41 @@ const getcountyList=()=>{
     }
   }
   countryeList.value = lv;
+  countryeALlList.value = lv;
+}
+const changeProvince=(v)=>{
+  cityValue.value='';
+  countryeValue.value='';
+  let newlst =  cityAllList.value.filter(item=>{return item.id.indexOf(v)==0 ? true : false;})
+  cityList.value = newlst;
+  let newlst2 = countryeALlList.value.filter(item=>{return item.id.indexOf(v)==0 ? true : false;})
+  countryeList.value = newlst2;
+  changeCity('');
+}
+const changeCity=(v)=>{
+  countryeValue.value='';
+  let tid = provinceValue.value;
+  if(v!=''){
+    tid = tid+"-"+v
+  }
+  let newlst2 = countryeALlList.value.filter(item=>{return item.id.indexOf(tid)==0 ? true : false;})
+  let tmpary = [{label:"全部区县",id:""}];
+  countryeList.value = tmpary.concat(newlst2);
+  changeCounty('');
+}
+const changeCounty=(v)=>{
+  let cids = {}; //区县ID集合
+  if(v==""){
+    countryeList.value.map(item=>{
+      let vid = item.id.split("-");
+      cids[vid[vid.length-1]] = 1;
+    })
+  }else{
+    let vid = v.split("-");
+    cids[vid[vid.length-1]] = 1;
+  }
+  let lst = houseAllList.value.filter(item=>{return cids[item.deptId]!=null});
+  houselist.value = lst;
 }
 const loadEvent=()=>{
   request({
@@ -405,7 +450,7 @@ const initvideodata=()=>{
   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);
 }

src/views/index.vue

@@ -306,6 +306,8 @@ const initData = ()=>{
           element["code"] = element.simpleName;
           element["name"] = element.houseName;
           element["addr"] = element.houseAddr;
+          element["smoke"] = element.smoke;
+          element["exhaust"] = element.exhaust;
           element["alarmtype"] = typeMapping[element.params.alarm];
           element["video_url"] = "";
           if(element.params.channel.length>0){