仓库视频列表

云台控制界面

package.json

@@ -23,7 +23,7 @@
     "axios": "0.28.1",
     "clipboard": "2.0.11",
     "echarts": "5.5.1",
-    "element-plus": "2.7.6",
+    "element-plus": "^2.7.6",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "js-beautify": "1.14.11",

src/main.js

@@ -72,7 +72,6 @@ app.use(store)
 app.use(plugins)
 app.use(elementIcons)
 app.component('svg-icon', SvgIcon)
-
 directive(app)
 
 // 使用element-plus 并且设置全局的大小

src/router/index.js

@@ -125,6 +125,20 @@ export const constantRoutes = [
     ]
   },
   {
+    path: '/inhouse',
+    component: Layout,
+    hidden: true,
+    redirect: '/inhouse',
+    children: [
+      {
+        path: '/inhouse',
+        component: () => import('@/views/house/index'),
+        name: 'inhouse',
+        meta: { title: '仓库详情', icon: '' }
+      }
+    ]
+  },
+  {
     path: '/user',
     component: Layout,
     hidden: true,

src/views/components/housecamer.vue

@@ -0,0 +1,761 @@
+<template>
+    <div class="in_house" v-if="showHouse">
+        <div><span class="returnback" @click="closeDlg"></span><span class="close" @click="closeDlg"></span></div>
+        <div class="content">
+            <div class="left">
+                <div class="top">
+                    <el-select v-model="provinceValue" :popper-append-to-body="false">
+                        <el-option 
+                            v-for="item in provinceList" 
+                            :label="item.name" 
+                            :value="item.code"
+                        />
+                    </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>
+                    <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>
+                </div>
+                <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>
+                  <div class="echartsdiv" ref="echarts03"></div>
+                </div>
+            </div>
+            <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="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>
+                  <span class="videocount">
+                    <span :class="videocount_type=='4' ?'videocount_item active':'videocount_item'">四分屏</span>
+                    <span :class="videocount_type=='9' ?'videocount_item active':'videocount_item'">九分屏</span>
+                    <span :class="videocount_type=='16' ?'videocount_item active':'videocount_item'">十六分屏</span>
+                  </span>
+                </div>
+                <div class="middle">
+                  <div v-for="item in video_list" :class="item.contrlset ? 'video contrlset type'+videocount_type : 'video type'+videocount_type" @click="videocontrl(item)">
+                    <div class="video-title"><img src="/images/ico-video.png"><span>{{ item.name }}</span><span style="float: right;margin-right: 42px;">{{ item.statedesc }}</span></div>
+                    <div class="video-play"></div>
+                    <div class="cloudset" v-if="item.contrlset==true">
+                      <div><span class="close" @click.stop="closeCloudset(item)" style="top:2px"></span></div>
+                      <div class="camername">{{ item.name }}摄像头</div>
+                      <div class="cc">
+                        <div class="cc_bg"></div>
+                        <div class="cc_01"></div>
+                        <div class="cc_02"></div>
+                        <div class="cc_03"></div>
+                        <div class="cc_04"></div>
+                      </div>
+                      <div class="cc_params"><span class="span1">变倍</span><img src="/images/cc_sub.png" @click="ccParamsSet(1,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params1+'%'}"></span><span class="span32" :style="{'left':(cc_params1-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(1,1)"></div>
+                      <div class="cc_params"><span class="span1">变焦</span><img src="/images/cc_sub.png" @click="ccParamsSet(2,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params2+'%'}"></span><span class="span32" :style="{'left':(cc_params2-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(2,1)"></div>
+                      <div class="cc_params"><span class="span1">光圈</span><img src="/images/cc_sub.png" @click="ccParamsSet(3,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params3+'%'}"></span><span class="span32" :style="{'left':(cc_params3-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(3,1)"></div>
+                      <div class="audio">
+                        <img v-if="cc_params4>0" src="/images/cc_a.png" @click="cc_params4=0">
+                        <img v-else src="/images/cc_b.png" @click="cc_params4=50">
+                      </div>
+                      <div class="cc_params"><span class="span1">音量</span><img src="/images/cc_sub.png" @click="ccParamsSet(4,-10)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params4+'%'}"></span><span class="span32" :style="{'left':(cc_params4-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(4,10)"></div>
+                    </div>
+                  </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import {shallowRef,onMounted,defineExpose} from "vue";
+import * as echarts from "echarts";
+
+const {proxy} = getCurrentInstance();
+const showHouse=ref(false);
+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 houselist = ref(null);
+const selectHouse = ref(null);
+const echarts03 = ref(null);
+const echars03data = ref(null);
+const alarm_type = ref(null);
+const videocount_type = ref('4');
+const video_list=ref([]);
+const cc_params1=ref(0);
+const cc_params2=ref(0);
+const cc_params3=ref(0);
+const cc_params4=ref(50);
+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 load=(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:"自贡中心仓库",
+      code:"zg",
+      city:"510300",
+      addr:"自贡市沿滩区金川路东段28号高新仓储物流园一期",
+      lnglat:[0,0],
+      alarmtype:"none",
+    },{
+      name:"成都中心仓库",
+      code:"cd",
+      city:"510100",
+      addr:"简阳市石桥镇羊羊小镇大华国际B1栋13楼1322号",
+      lnglat:[0,0],
+      alarmtype:"smoke",
+      camername:"1-10002号摄像头",
+    }]);
+    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;
+        }
+    }
+    loadEchars03();
+    initvideodata();
+}
+const closeDlg=() =>{
+    //销毁资源
+    showHouse.value = false;
+}
+const selectedHouse=(item)=>{
+    selectHouse.value = item;
+    for (let index = 0; index < houselist.value.length; index++) {
+        const element = houselist.value[index];
+        if(element.code==item.code){
+            houselist.value[index]["active"] = true;
+        }else{
+            houselist.value[index]["active"] = false;
+        }
+    }
+    loadEchars03();
+}
+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"}
+  ];
+  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
+      }
+    ]
+  };
+  setTimeout(() => {
+    echarts.init(echarts03.value).setOption(option);
+  }, 300);
+  
+}
+const initvideodata=()=>{
+  let tmp = [];
+  for (let index = 0; index < videocount_type.value*1; index++) {
+    tmp.push({name:'视频'+index,code:"code"+index,contrlset:false,state:'offline',statedesc:'离线',url:""});
+  }
+  video_list.value = tmp;
+}
+const videocontrl=(item)=>{
+  item['contrlset'] = true
+}
+const closeCloudset=(item)=>{
+  item['contrlset'] = false
+}
+const ccParamsSet=(type,value)=>{
+  if(type==1){
+    cc_params1.value += value;
+    if(cc_params1.value>100) cc_params1.value=100
+    if(cc_params1.value<0) cc_params1.value=0
+  }  else if(type==2) {
+    cc_params2.value += value;
+    if(cc_params2.value>100) cc_params2.value=100
+    if(cc_params2.value<0) cc_params2.value=0
+  }  else if(type==3) {
+    cc_params3.value += value;
+    if(cc_params3.value>100) cc_params3.value=100
+    if(cc_params3.value<0) cc_params3.value=0
+  }  else if(type==4) {
+    cc_params4.value += value;
+    if(cc_params4.value>100) cc_params4.value=100
+    if(cc_params4.value<0) cc_params4.value=0
+  }
+}
+onMounted(() => {
+
+})
+defineExpose({
+    load
+})
+</script>
+<style lang='scss' scoped>
+    ::v-deep .el-select__wrapper {
+      /* 你的样式 */
+      background-color: #303740;
+      box-shadow: 0 0 0 1px #4f555c inset;
+      .el-select__placeholder{
+        color: #fff;
+        font-size: 14px;
+      }
+      .el-select__placeholder.is-transparent{
+        color: #ffffff94;
+      }
+    }
+    .in_house{
+        background-color: #18202a;
+        position: absolute;
+        left: 60px;
+        top: 0;
+        width: calc(100% - 60px);
+        height: 100%;
+        z-index: 100;
+        .close{
+            position: absolute;
+            right: 15px;
+            top: 10px;
+            background-image: url(/images/close.png);
+            cursor: pointer;
+            width: 16px;
+            height: 16px;
+            background-size: 55%;
+            background-repeat: no-repeat;
+            background-position-x: center;
+            background-position-y: center;
+            border: 1px solid #ccc;
+        }
+        .returnback{
+            position: absolute;
+            left: 20px;
+            top: 10px;
+            background-image: url(/images/return.png);
+            cursor: pointer;
+            width: 16px;
+            height: 16px;
+            background-size: contain;
+            border: 1px solid #ccc;
+        }
+        .content{
+            margin-top: 38px;
+            height: calc(100% - 38px);
+            width: 100%;
+            display: flex;
+            .left{
+                width: 18%;
+                height: 100%;
+                margin-right: 2%;
+                padding-left: 20px;
+                .el-select{
+                    margin-bottom: 5px;
+                }
+                .top{
+                    width: 100%;
+                    height: 60%;
+                    .houselist{
+                        height: 70%;
+                        width: 100%;
+                        overflow-y: auto;
+                        background-color: #303740;
+                        border: 1px solid #4f555c;
+                        border-radius: 3px;
+                        .house-item{
+                            color: #fff;
+                            font-size: 12px;
+                            padding: 5px;
+                        }
+                        .house-item.active,.house-item:hover{
+                            background-color: #4f555c;
+                        }
+                    }
+                }
+                .middle{
+                    width: 100%;
+                    height: 39%;
+                    .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;
+                      }
+                    }
+                    .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% - 66px);
+                      width: 100%;
+                    }
+                }
+            }
+            .right{
+                width: 80%;
+                height: 100%;
+                .top{
+                    height: 30px;
+                    line-height: 30px;
+                    margin-bottom: 10px;
+                    width: 100%;
+                    display: flex;
+                    .housename{
+                      font-weight: bold;
+                      color: #fff;
+                      width: 150px;
+                      display: inline-block;
+                    }
+                    .iotstat{
+                      font-size: 12px;
+                      color: #fff;
+                      background-image: url('/images/iot_stat_bg.png');
+                      background-repeat: no-repeat;
+                      padding: 0 10px;
+                      background-size: contain;
+                      margin: 0 10px;
+                      display: inline-block;
+                      img{
+                        width: 16px;
+                        height: 16px;
+                        vertical-align: sub;
+                      }
+                    }
+                    .countstat{
+                      width: 60%;
+                    }
+                    .alarm_list{
+                        z-index: 10;
+                        font-size: 12px;
+                        text-align: center;
+                        .alarm_list_item{
+                          position: relative;
+                          margin: 0 5px;
+                          padding: 6px 10px;
+                          border-radius: 30px;
+                          color: #fff;
+                          background-color: #455b6d;
+                          img{
+                            width: 20px;
+                            height: 20px;
+                            vertical-align: middle;
+                          }
+                          .alarm_item_brager{
+                            position: absolute;
+                            font-weight: bold;
+                            width: 20px;
+                            height: 20px;
+                            border-radius: 50%;
+                            text-align: center;
+                            line-height: 20px;
+                            top: -13px;
+                            right: 0;
+                            font-size: 10px;
+                          }
+                        }
+                     }
+                     .videocount{
+                      height: 20px;
+                      width: 13%;
+                      line-height: 20px;
+                      margin-right: 2px;
+                      cursor: pointer;
+                      .videocount_item{
+                          display: inline-block;
+                          padding: 5px 10px;
+                          background-color: #262f38;
+                          color: #686f75;
+                          font-size: 12px;
+                        }
+                        .videocount_item.active,.videocount_item:hover{
+                          background-color: #2184fa;
+                          color: #fff;
+                        }
+                     }
+                }
+                .middle{
+                    height: calc(100% - 40px);
+                    width: 100%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    .video{
+                      background-image: url('/images/video_bg.png');
+                      background-size: contain;                      
+                      .video-title{
+                        background-color: #ffffff45;
+                        font-size: 12px;
+                        height: 20px;
+                        line-height: 20px;
+                        color: #fff;
+                        img{
+                          width: 24px;
+                          height: 14px;
+                          vertical-align: text-top;
+                          margin: 0 5px;
+                        }
+                      }
+                      .video-play{
+                        width: 100%;
+                        height: calc(100% - 20px);
+                      }
+                    }
+                    .contrlset{
+                      position: absolute;
+                      width: 1288px !important;
+                      height: 760px !important;
+                      z-index: 1000;
+                      left: 50%;
+                      top: 50%;
+                      margin-top: -380px !important;
+                      margin-left: -644px !important;
+                      border-radius: 10px;
+                      border: 1px solid #4f555c;
+                      .video-title{
+                        border-radius: 10px 10px 0 0 !important;
+                      }
+                      .cloudset{
+                        width: 258px !important;
+                        margin-left: 4px;
+                        background-color: #303740;
+                        border: 1px solid #4f555c;
+                        height: calc(100% - 20px);
+                        float: right;
+                        border-radius: 0 0 10px 0;
+                        .camername{
+                          color: #dadada;
+                          font-weight: bold;
+                          font-size: 20px;
+                          width: 100%;
+                          text-align: center;
+                          height: 100px;
+                          line-height: 100px;
+                        }
+                        .cc{
+                          position: relative;
+                          height: 260px;
+                          width: 100%;
+                          .cc_bg{
+                            background-image: url('/images/cc_bg.png');
+                            width: 150px;
+                            height: 150px;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            margin-left: -75px;
+                            margin-top: -75px;
+                            background-size: contain;                            
+                          }
+                          .cc_01{
+                            background-image: url('/images/cc_01.png');
+                            background-size: contain;
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            top:75px;
+                            left:50%;
+                            margin-left: -10px;
+                            cursor: pointer;
+                          }
+                          .cc_02{
+                            background-image: url('/images/cc_02.png');
+                            background-size: contain;
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            bottom:75px;
+                            left:50%;
+                            margin-left: -10px;
+                            cursor: pointer;
+                          }
+                          .cc_03{
+                            background-image: url('/images/cc_03.png');
+                            background-size: contain;
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            top:50%;
+                            right:73px;
+                            margin-top: -10px;
+                            margin-left: -10px;
+                            cursor: pointer;
+                          }
+                          .cc_04{
+                            background-image: url('/images/cc_04.png');
+                            background-size: contain;
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            top:50%;
+                            left:82px;
+                            margin-top: -10px;
+                            margin-left: -10px;
+                            cursor: pointer;
+                          }
+                        }
+                        .cc_params{
+                          color: #dadada;
+                          height: 40px;
+                          line-height: 40px;
+                          font-size: 12px;
+                          width: 100%;
+                          padding: 0 20px;
+                          display: flex;
+                          img{
+                            height: 32px;
+                            width: 32px;
+                            cursor: pointer;
+                            margin-top: 4px;
+                          }
+                          .span1{
+                            width:36px;
+                          }
+                          .span2{
+                            margin-left:5px;
+                            font-size: 10px;
+                          }
+                          .span3{
+                            font-size: 10px;
+                            display: inline-block;
+                            width: 100px;
+                            height: 2px;
+                            background: #ffffff33;
+                            margin: 20px 0;
+                            position: relative;
+                            .span31{
+                              position: absolute;
+                              height: 2px;
+                              background-color: #fff;
+                              left:0;
+                              top:0;
+                              width:0%;
+                            }
+                            .span32{
+                              background-image: url('/images/cc_p.png');
+                              background-size: contain;
+                              width: 20px;
+                              height: 20px;
+                              position: absolute;
+                              top:-9px;
+                              left:-8px;
+                            }
+                          }
+                          .span4{
+                            font-size: 10px;
+                            opacity: 0.2;
+                            margin-right:5px;
+                          }
+                        }
+                        .audio{
+                          position: relative;
+                          height: 100px;
+                          margin-top: 50px;
+                          width: 100%;
+                          img{
+                            width:48px;
+                            height: 48px;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            margin-left: -24px;
+                            margin-top: -24px;
+                          }
+                        }
+                      }
+                      .video-play{
+                        width: 1024px !important;
+                        float: left;
+                      }
+                    }
+                    .type4{
+                      width: calc(50% - 10px);
+                      height: calc(50% - 10px);
+                      margin: 5px;
+                    }
+                }
+            }
+        }
+    }
+</style>

src/views/house/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <house ref="houseComp"/>
+</template>
+<script setup>
+import House from '../components/housecamer.vue'
+
+onMounted(() => {
+  const houseinfo=ref({})
+  const houseComp = ref(null);
+  houseComp.value.load(houseinfo);
+})
+</script>
+<style lang='scss' scoped>
+.containerMap{
+    width: 100%;
+    height: calc(100vh - 60px);
+}
+</style>

src/views/index.vue

@@ -29,7 +29,7 @@
           <div class="echartsdiv" ref="echarts03" style="height: calc(100% - 69px);"></div>
         </div>
       </div>
-      <div ref="infoWindowContent" v-show="showInfoWindow">
+      <div ref="infoWindowContent" v-show="showInfoWindow" @click="inHouse">
         <div class="infoWindowContent">
           <div class="linkpoint lefttoppoint"></div>
           <div class="linkpoint righttoppoint"></div>
@@ -38,12 +38,14 @@
           <div class="camername">{{ currentHouse.camername }}</div>
         </div>
       </div>
+      <house ref="houseComp" />
     </div>
 </template>
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
 import {shallowRef,onMounted} from "vue";
 import * as echarts from "echarts";
+import House from './components/housecamer.vue'
 const map = shallowRef(null);
 const AMap = ref();
 const echarts01 = ref(null);
@@ -56,6 +58,7 @@ const infoWindowContent = ref(null);
 const showInfoWindow = ref(false);
 const currentHouseCode = ref('');
 const currentHouse = ref({});
+const houseComp = ref(null);
 let infoWindow = null;
 let geocoder = null;
 const alarm_type=ref({
@@ -131,12 +134,8 @@ const toHouse=(item)=>{
   map.value.setCenter(item.lnglat);
 }
 
-const initWindow=()=>{
-// 信息窗体
-let infoWindow = new AMap.value.InfoWindow({
-offset: new AMap.value.Pixel(0,-10),
-retainwhenClose: true,
-});
+const inHouse=()=>{
+  houseComp.value.load(currentHouse,alarm_type.value);
 }
 
 const getGeoLocation=(houseind,address)=> {