Add - 新增企业界面

src/api/datacenter.js

@@ -22,3 +22,26 @@ export function fireControlViewPointSearchInfo(type, id) {
   })
 }
 
+// 获取企业列表
+export function getCompanyList() {
+  return request({
+    url: '/data-center/unobtrusive/enterprise/list',
+    method: 'get',
+  })
+}
+
+// 获取企业的设备列表
+export function getCompanyDetail(id) {
+  return request({
+    url: `/data-center/unobtrusive/enterprise/{${id}}`,
+    method: 'get',
+  })
+}
+
+// 获取企业信息列表
+export function selectRegulatoryinformationByEnterpriseId() {
+  return request({
+    url: '/data-center/regulatoryinformation/selectRegulatoryinformationByEnterpriseId',
+    method: 'get',
+  })
+}

src/components/Monitor_StatusAware/index.vue

@@ -48,18 +48,6 @@
             </div>
             <div
               class="icon-con w-33 m-btm-no"
-              :class="{ on: La }"
-              @click="eventClick('La')"
-            >
-
-              <div class="icon icon-dot"></div>
-              <div class="icon-text">
-                <h6>{{ loudspeakerNum }}</h6>
-                <h5>云广播</h5>
-              </div>
-            </div>
-            <div
-              class="icon-con w-33 m-btm-no"
               :class="{ on: Zhi }"
               @click="eventClick('Zhi')"
             >
@@ -71,47 +59,51 @@
               </div>
             </div>
           </div>
-          <!--              <div class="overflow-y" style="height: 33vh;">-->
-          <!--                <el-collapse accordion>-->
-          <!--                  <el-collapse-item v-for="(item,index) in region" :key="index">-->
-          <!--                    &lt;!&ndash; deptId &ndash;&gt;-->
-          <!--                    <template slot="title">-->
-          <!--                      <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"-->
-          <!--                           v-on:click="selectCameraByDeptId(item.deptId)">-->
-          <!--                        <div class="d-l-l-text">-->
-          <!--                          <h4 class="collapse-title">{{ item.deptName }}</h4>-->
-          <!--                        </div>-->
-          <!--                        <div class="d-l-l-count">{{ item.deptCount }}</div>-->
-          <!--                      </div>-->
-          <!--                    </template>-->
-          <!--                  </el-collapse-item>-->
-          <!--                </el-collapse>-->
-          <!--              </div>-->
-
-          <!--              &lt;!&ndash; 横向柱状 echart &ndash;&gt;-->
-          <!--              <div class="overflow-y" style="height: 33vh;">-->
-          <!--                <div id="camera-chart" style="width: 100%;height:33vh;"></div>-->
-          <!--              </div>-->
-          <div class="sj-search">
-            <el-input
-              v-model="deptName"
-              placeholder="请输入部门名称"
-              clearable
-              size="small"
-              prefix-icon="el-icon-search"
-            />
-          </div>
           <div class="i-list-con h-65" style="height: 62vh">
-            <el-tree
-              :data="deptOptions"
-              :props="defaultProps"
-              :expand-on-click-node="false"
-              :filter-node-method="filterNode"
-              ref="tree"
-              node-key="id"
-              :default-expanded-keys="[100]"
-              @node-click="handleNodeClickForParent"
-            />
+
+            <div class="third_contain">
+              <!-- 三级搜索框 -->
+              <el-input v-model="thirdInput" class="thirdInputModel"  placeholder="按企业名称搜索 " style="color:white" @change="thirdLevelSearch">
+              </el-input>
+              <div style="height: 4%;"></div>
+              <div class="sp_sbg">
+                <div
+                  style="width: 100%;height: 9%;display: flex;"
+                  v-for="(e,index) in companyList"
+                  :key="index"
+                class="sp_sbg_div"
+                :class=" deviceBtn == index ? 'on': 'onno'"
+                >
+                  <el-button
+                    :style="deviceBtn == index ? 'color:#38CCEA' : 'color:#fff'"
+                    :class=" deviceBtn == index ? 'highlightedBtn': 'notHighlightedBtn'"
+                    @click="getDeviceList(e,index)">
+                    <el-tooltip :content="e.name" placement="top" v-if="(e.name!=null||e.name!='')&&e.name.length>8">
+                      <span style="position: relative;left: -18%;">
+                      {{ e.name.substring(0,8) }}...
+                    </span>
+                    </el-tooltip>
+                    <span style="position: relative;left: -18%;" v-else>
+                      {{ e.name }}
+                    </span>
+                  </el-button>
+                  <div
+                    class="thirdDevice_icon thirdHighlightedBtn"
+                    @click="thirdDeviceHashighLighted(e,index)"
+                    >
+                  </div>
+                </div>
+              </div>
+              <!--分页-->
+              <div class="paging">
+                <el-button type="button" @click="getCompanyList(10,queryParams.pageNum-1)">上一页
+                </el-button>
+                <span>第{{ queryParams.pageNum }}页</span>
+                <el-button type="button" :disabled="nextbutton"
+                          @click="getCompanyList(10,queryParams.pageNum+1)">下一页
+                </el-button>
+              </div>
+            </div>
           </div>
         </div>
       </dv-border-box-13>
@@ -148,6 +140,172 @@ export default {
       },                          // 部门树默认props
       placeholderMsg: '',
       cgqTimer: null,
+      cameraListSearch:[
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+        ],
+      thirdInput:'',                // 输入框label(三级)
+      companyList:[
+        {
+          name:'测试测试测试测试测试测试'
+        },
+        {
+          name:'测试测试测试测试测试测试'
+        },
+        {
+          name:'测试测试测试测试测试测试'
+        },
+        {
+          name:'测试测试测试测试测试测试'
+        },
+        {
+          name:'测试测试测试测试测试测试'
+        },
+        {
+          name:'测试测试测试测试测试测试'
+        },
+        {
+          name:'测试测试测试测试测试测试'
+        },
+        {
+          name:'测试测试测试测试测试测试'
+        },
+        {
+          name:'测试测试测试测试测试测试'
+        },
+      ],               // 企业列表
+      cameraListSearch:[
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+        {
+          sbName:'测试测试测试测试测试测试',
+          cameraImg:null
+        },
+      ],
+      queryParams:{
+        pageNum:1
+      },               // 企业列表参数
+      deviceBtn:null
     }
   },
   mounted() {
@@ -245,3 +403,136 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.inputModel{
+    width: 100%;
+    padding: 0 5%;
+  }
+  .itemPic{
+    width: 24%;
+    height: 100%;
+  }
+  .highlightedBtn{
+    background: url('~@/assets/images/video-plaza/highLightBtn.png') 0 0 no-repeat; /* 高亮背景 */
+    background-size: cover;
+  }
+  .notHighlightedBtn{
+    background: none;
+  }
+
+  .third_contain{
+    overflow: hidden;
+    overflow-y: scroll;
+    width: 99%;
+    height: 100%;
+    padding-left:10px;
+    ::v-deep .el-button{
+      width: 80%;
+      height: 100%;
+      margin-left: 0 !important;
+      >span{
+        display: inline-block;
+        width: 100%;
+        text-align: center;
+      }
+      >span >span{
+        left: 0 !important;
+        display: inline-block;
+        width: 100%;
+        text-align: center;
+      }
+    }
+    ::v-deep .el-button:not(:nth-child(1)){
+    }
+    .thirdDevice_icon{
+      width: 10%;
+      margin: 1.7% 15px 0 2%;
+      height: 70%;
+      cursor: pointer;
+    }
+
+    .paging {
+      height: 4%;
+      padding: 0rem .3rem;
+      display: flex;
+      justify-content: center;
+      align-content: center;
+
+      span {
+        color: #2bacf7;
+        display: flex;
+        align-items: center;
+        padding: 0 1rem;
+      }
+
+      button {
+        width: 70px;
+        padding: 0 0.3rem;
+        height: 1.5rem;
+        background-color: #112543;
+        color: #2bacf7;
+        border: 1px solid #33467f;
+      }
+
+      button:hover {
+        padding: 0 0.3rem;
+        height: 1.5rem;
+        background-color: #112543;
+        color: #0ff7c5;
+        border: 1px solid #1d657f;
+      }
+    }
+  }
+
+  .thirdInputModel{
+    margin-top: 10px;
+    // margin-left: 8%;
+    // width: 95%;
+  }
+  .sp_sbg{
+    overflow: hidden;
+    overflow-y: scroll;
+    width: 100%;
+    height: 80%;
+    .sp_sbg_div{
+      background-color: rgb(35, 76, 172,0.2);
+      margin: 5px 0px;
+      border-radius: 5px;
+
+      .el-button{
+        background: none;
+        outline: 0px;
+        border: 0px;
+      }
+    }
+
+    .sp_sbg_div.on{
+      background-color: rgb(35, 76, 172,0.4);
+      .el-button{
+        span{
+          color: #01FBFE!important;
+          text-shadow: 0px 0px 3px #01FBFE;
+        }
+      }
+    }
+
+  }
+  .sip_img{
+    opacity: 0.8;
+  }
+  .sip_imgon{
+    opacity: 1;
+    box-shadow: 0px 5px 5px #0b3555;
+  }
+  .thirdHighlightedBtn{
+    background: url('~@/assets/images/video-plaza/camera1_on.png') 0 0 no-repeat; /* 高亮背景 */
+    background-size: 100% 100%;
+  }
+  .thirdDevice_icon{
+    width: 10%;
+    margin: 1.7% 15px 0 2%;
+    height: 70%;
+    cursor: pointer;
+  }
+</style>

src/components/companyProjectDialog/index.vue

@@ -0,0 +1,218 @@
+/*
+ *@description: 企业详情弹窗
+ *@author: yh Fu
+ *@date: 2025-07-05 17:01:09
+ *@version: V1.0.5
+*/
+
+<template>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      custom-class="tvDialog"
+      width="44%"
+      title="企业详情"
+      aria-modal    ="false"
+      style="margin-top: 12vh !important;">
+      <div class="contain">
+        <div
+            v-for="(e,idx) in deviceInfoList"
+            :key="idx"
+        >
+            <span>{{ e.label }}：</span>
+            <span :title="e.value">{{ e.value }}</span>
+        </div>
+      </div>
+    </el-dialog>
+</template>
+
+<script>
+export default{
+    data(){
+        return{
+            deviceInfoList:[
+            ],
+            currentDeviceData:null,
+            noHavePic:require('@/assets/images/integrated/event-img-sub.png'),
+            tvPicList:[
+            ],
+            isClick:false,
+            currentHighLightPic:0,
+            dialogVisible:false,
+            currentCameraParam:null
+        }
+    },
+    methods:{
+      open(param){
+        this.deviceInfoList = param
+        this.dialogVisible = true
+      },
+    }
+
+}
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import '@/assets/styles/base.scss';
+.contain{
+    overflow: hidden;
+    overflow-y: scroll;
+    width: 100%;
+    height: 500px;
+    display: flex;
+    align-content: flex-start;
+    padding-top: 1%;
+    flex-wrap: wrap;
+    color: #fff;
+    >div{
+        display: flex;
+        width: 49%;
+        height: 6%;
+        font-size: 16px;
+        line-height: 2; 
+        margin-top: 3%;
+        >span{  
+            display: inline-block;
+        }
+        >span:nth-child(1){
+            width: 50%;
+            height: 100%;
+            text-align: right;
+        }
+        >span:nth-child(2){
+            position: relative;
+            top: 4%;
+            width: 48%;
+            height: 100%;
+            text-align: left;
+            text-indent: 5px;
+            border: 1px solid #446C9F;
+            border-radius: 5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    >div:nth-child(n+3){
+      margin-top: 2%;
+    }
+}
+</style>
+<style lang="scss">
+.tvPicHighlight{
+  border: 6px solid #B8741A;
+}
+.tvPicNotHighlight{
+  border: none;
+}
+.tvDialog{
+  margin-top: 10vh !important;
+  height: 70% !important;
+  left: 0 !important;
+
+  padding-top: 0;
+  .el-dialog__body{
+    height: 92%;
+    padding: 0;
+  }
+  .el-dialog__header{
+    height: 8% !important;
+  }
+  .tvPicHighlight{
+    border: 6px solid #B8741A;
+  }
+  .tvPicNotHighlight{
+    border: none;
+  }
+  .container{
+    height: 100%;
+    display: flex;
+    background: url('~@/assets/images/tvWallBg.png') 0 0 no-repeat;
+    background-size:100% 100% ;
+    .leftContain{
+      width: 24.2%;
+      border-right: 2px solid #153E42;
+      .deviceInfo{
+        height:71%;
+        overflow-x: scroll;
+        white-space: nowrap;
+        >div{
+          text-indent: 42px;
+          height: 10%;
+          font-size:15px;
+          color: #A4A4A4;
+          font-weight: 700;
+        }
+        >div:nth-child(1){
+          margin-top: 7%;
+        }
+      }
+      .deviceInfo::-webkit-scrollbar{
+        display: block !important;
+        background-color: #101823;
+        // border: 1px solid #fff;
+        height: 10px !important;
+      }
+      .deviceInfo::-webkit-scrollbar-thumb {
+        background-color: #183974;
+      }
+      .deviceIcon{
+        width: 30%;
+        margin: 7% 0 0 35%;
+        cursor: pointer;
+      }
+    }
+    .rightContain{
+      width: 64%;
+      height: 96%;
+      margin: 2% auto 0;
+      .bigPicContain{
+        width: 100%;
+        height: 67%;
+        .bigPic{
+          object-fit: contain;
+          width: 100%;
+          height: 100%;
+        }
+        .noHavePic{
+          margin: 9% 0 0 35%;
+        }
+      }
+      .scrollBottomBar{
+        display: flex;
+        width: 100%;
+        overflow: hidden;
+        overflow-x: scroll;
+        height: 24%;
+        margin-top: 6%;
+        border: 1px solid #244BB7;
+        .bottomPic{
+          width: 90px;
+          height: 90px;
+          margin-top: 2%;
+          cursor: pointer;
+        }
+        .bottomPic:nth-child(1){
+          margin-left: 2%;
+        }
+        .bottomPic:not(:nth-child(1)){
+          margin-left: 3%;
+        }
+      }
+      .scrollBottomBar::-webkit-scrollbar{
+        display: block !important;
+        background-color: #101823;
+        // border: 1px solid #fff;
+        height: 10px !important;
+      }
+      .scrollBottomBar::-webkit-scrollbar-thumb {
+        background-color: #183974;
+      }
+    }
+  }
+}.leader-info-container{
+   .el-descriptions-item__label{
+     width: 77px !important;
+   }
+ }
+</style>

src/views/forest.vue

@@ -6,78 +6,53 @@
     <!--主体-->
     <div class="visual-body">
       <!-- 左侧 -->
-      <div class="leftbar" ref="left">
+      <div class="leftbar" ref="left" style="height: 82%;">
         <!-- 通知公告 -->
         <Notification></Notification>
-        <!-- 2 事件统计-->
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
-            <div class="i-list-con h-29-5">
-              <div class="d-l-con no_hover">
-                <div class="event-count">
-                  <div class="count-number">{{ totalStr.charAt(0) }}</div>
-                  <div class="count-number">{{ totalStr.charAt(1) }}</div>
-                  <div class="count-number">{{ totalStr.charAt(2) }}</div>
-                  <div class="count-number">{{ totalStr.charAt(3) }}</div>
-                  <div class="count-number">{{ totalStr.charAt(4) }}</div>
-                  <div class="count-number">{{ totalStr.charAt(5) }}</div>
-                  <dv-decoration-5 style="width:81%;height:15px;position: absolute; top:4.2rem;z-index: 0; " />
-                </div>
-              </div>
-              <div class="d-l-con-icon no_hover">
-                <div class="icon-con w-33 flex-d t-a-center">
-                  <dv-decoration-9
-                    style="width: 5.5rem;height: 5.5rem; color:#16e29e;font-size: 1rem;font-weight: bolder;">
-                    {{ newReportPre }}%
-                  </dv-decoration-9>
-                  <div class="e-state"
-                    :style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
-                    <span>未签收</span> <span>{{ newReport }}</span>
-                  </div>
-                </div>
-                <div class="icon-con w-33 flex-d t-a-center">
-                  <dv-decoration-9
-                    style="width: 5.5rem;height: 5.5rem; color:#f18425;font-size: 1rem;font-weight: bolder;">
-                    {{ readySurePre }}%
-                  </dv-decoration-9>
-                  <div class="e-state"
-                    :style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
-                    <span>处理中</span> <span>{{ readySure }}</span>
-                  </div>
-                </div>
-                <div class="icon-con w-33 flex-d t-a-center">
-                  <dv-decoration-9
-                    style="width: 5.5rem;height: 5.5rem; color:#9179f1;font-size: 1rem;font-weight: bolder;">
-                    {{ readyFinishPre }}%
-                  </dv-decoration-9>
-                  <div class="e-state"
-                    :style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
-                    <span>办结归档</span> <span>{{ readyFinish }}</span>
-                  </div>
-                </div>
-              </div>
-              <div class="d-l-con no_hover">
-                <div id="chart-event-ai" style="width: 100%;height:6vh;"></div>
-              </div>
-            </div>
-          </dv-border-box-13>
-        </div>
-        <!-- 3 组织机构 -->
-        <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
-            <div class="i-list-con h-27">
-              <div class="d-l-con " v-for="(item,index) in forestFarm" :key="index"
-                :class="{on:listCurrentIndex1==item.deptId}" v-on:click="selectCameraByDeptId(item.deptId)">
-                <div class="d-l-l-text">
-                  <i class="i-small"></i>
-                  <h4>{{ item.deptName }}</h4>
-                </div>
-                <div class="d-l-l-count">{{ item.eventCount }}</div>
+
+        <!-- 公司列表 -->
+        <div class="third_contain">
+          <!-- 三级搜索框 -->
+          <el-input v-model="thirdInput" class="thirdInputModel"  placeholder="按企业名称搜索 " style="color:white" @change="thirdLevelSearch">
+          </el-input>
+          <div style="height: 4%;"></div>
+          <div class="sp_sbg">
+            <div
+              style="width: 100%;height: 9%;display: flex;"
+              v-for="(e,index) in companyList"
+              :key="index"
+             class="sp_sbg_div"
+             :class=" deviceBtn == index ? 'on': 'onno'"
+            >
+              <el-button
+                :style="deviceBtn == index ? 'color:#38CCEA' : 'color:#fff'"
+                :class=" deviceBtn == index ? 'highlightedBtn': 'notHighlightedBtn'"
+                @click="getDeviceList(e,index)">
+                <el-tooltip :content="e.name" placement="top" v-if="(e.name!=null||e.name!='')&&e.name.length>8">
+                  <span style="position: relative;left: -18%;">
+                  {{ e.name.substring(0,8) }}...
+                </span>
+                </el-tooltip>
+                <span style="position: relative;left: -18%;" v-else>
+                  {{ e.name }}
+                </span>
+              </el-button>
+              <div
+                class="thirdDevice_icon thirdHighlightedBtn"
+                @click="thirdDeviceHashighLighted(e,index)"
+                >
               </div>
             </div>
-          </dv-border-box-13>
+          </div>
+          <!--分页-->
+          <div class="paging">
+            <el-button type="button" @click="getCompanyList(10,queryParams.pageNum-1)">上一页
+            </el-button>
+            <span>第{{ queryParams.pageNum }}页</span>
+            <el-button type="button" :disabled="nextbutton"
+                      @click="getCompanyList(10,queryParams.pageNum+1)">下一页
+            </el-button>
+          </div>
         </div>
       </div>
       <!-- 地图 -->
@@ -104,7 +79,7 @@
       </div>
 
       <!-- 右侧 -->
-      <div class="rightbar rightbar-index" ref="right">
+      <div class="rightbar rightbar-index" ref="right" style="height: 81%;">
         <div class="right-item1">
           <!-- 天气 -->
           <div class="forthis">
@@ -235,62 +210,42 @@
               </div>
             </dv-border-box-13>
           </div>
-          <!-- 曝光台  -->
-          <!-- <ExceedEvent class="forthis" :exposureStageList="exposureStageList"></ExceedEvent> -->
-          <!-- 事件列表 -->
-          <EventList
-            :eventList="eventList"
-            :nextbutton="nextbutton"
-            class="forthis"
-            :pageNumOfParent="currentPageNum"
-            :newPageNum="newPageNum"
-            :currentDayOfParent="calendarDay"
-            ref="eventCom"
-            ></EventList>
-        </div>
-        <div class="right-item2">
-          <!-- 日历 -->
-          <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-              <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
-              <div class="i-list-con small-bottom-margin h-30">
-                <dateChoose @selectDay="selectDay" :canSelectDate="this.canSelectDate"></dateChoose>
-              </div>
-            </dv-border-box-13>
-          </div>
-          <!-- 事件分类 -->
-          <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-              <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
-              <div class="this-title" style="cursor: pointer"
-                @click="setEventTypeId({eventTypeIdDl: [], eventTypeId: []})">
-                <span title="点击查询全部事件类型">事件分类</span>
-                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
-              </div>
-              <div class="i-list-con small-bottom-margin h-19">
-                <chart v-if="showEventKind" :config="eventKind" @setEventTypeId="setEventTypeId"
-                  style="width: 90%;height: 18vh; padding:.5rem 1rem" />
+          <!-- 设备列表 -->
+          <div class="container">
+            <div class="topBar">设备列表</div>
+            <!-- 输入框 -->
+            <el-input v-model="input" class="inputModel" placeholder="请输入要查询的设备名称 " clearable style="color:white" @change="search" >
+            </el-input>
+            <!-- 菜单 -->
+            <div class="mainContainer">
+              <!-- 列表 -->
+              <div class="listItem" v-for="(e,idx) in cameraListSearch" :key="idx" @click="dropLocation(e.latitude, e.longitude, idx,e.cameraRadius)">
+                  <img class="itemPic"
+                    v-bind:src="e.cameraImg == null ? require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png'):fileUrl+e.cameraImg" >
+                  <div class="itemArea" >
+                      <h4>{{ e.sbName }}</h4>
+                  </div>
               </div>
-            </dv-border-box-13>
+            </div>
           </div>
-
-          <!-- 上报排行 -->
-          <!-- <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-              <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
-              <div class="this-title">
-                <span>上报排行</span>
-                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
-              </div>
-              <div class="i-list-con small-bottom-margin h-19">
-                <dv-scroll-ranking-board :config="reportList" style="width: 100%;height: 300px; padding:.5rem 1rem" />
-              </div>
-            </dv-border-box-13>
-          </div> -->
-          <ReportRanking class="forthis" :reportList="reportList"></ReportRanking>
-
         </div>
 
+        <!-- 设备列表 -->
+        <div class="container1">
+          <div class="topBar">企业信息</div>
+          <!-- 输入框 -->
+          <el-input v-model="input" class="inputModel" placeholder="请输入要查询的企业信息 " clearable style="color:white" @change="search" >
+          </el-input>
+          <!-- 菜单 -->
+          <div class="mainContainer">
+            <!-- 列表 -->
+            <div class="listItem" v-for="(e,idx) in cameraListSearch" :key="idx" @click="showCompanyDialog(e)">
+                <div class="itemArea">
+                    <h4>{{ e.sbName }}</h4>
+                </div>
+            </div>
+          </div>
+        </div>
       </div>
       <vBottomMenu ref="bottomMenu" @stopAudio="stopAudio"></vBottomMenu>
     </div>
@@ -305,6 +260,7 @@
     <TVWall ref="TVWall"></TVWall>
     <TVWalls ref="TVWalls"></TVWalls>
     <wrj ref="wrj"></wrj>
+    <CompanyProjectDialog ref="companyProjectDialog"></CompanyProjectDialog>
   </div>
 </template>
 
@@ -346,6 +302,7 @@
   import firespread from '@/views/firespread.vue' //事件详情弹窗
   import chart from './from/dvCapsuleChart.vue'
   import {getUserProfile} from "@/api/system/user";
+  import CompanyProjectDialog from '@/components/companyProjectDialog'
 
   /** ----------------------------------摄像头预览开始------------------------------------- */
   import {
@@ -380,6 +337,7 @@
       // ExceedEvent,    // 超期事件栏
       EventList,      // 事件列表
       ReportRanking,  // 上报排行
+      CompanyProjectDialog
     },
     created() {
       this.selectByMenuId()
@@ -508,6 +466,106 @@
           lat: ""
         },
         /** ----------------------------------定位功能-----------------------------------------*/
+        thirdInput:'',                // 输入框label(三级)
+        companyList:[
+          {
+            name:'测试测试测试测试测试测试'
+          },
+          {
+            name:'测试测试测试测试测试测试'
+          },
+          {
+            name:'测试测试测试测试测试测试'
+          },
+          {
+            name:'测试测试测试测试测试测试'
+          },
+          {
+            name:'测试测试测试测试测试测试'
+          },
+          {
+            name:'测试测试测试测试测试测试'
+          },
+          {
+            name:'测试测试测试测试测试测试'
+          },
+          {
+            name:'测试测试测试测试测试测试'
+          },
+          {
+            name:'测试测试测试测试测试测试'
+          },
+        ],               // 企业列表
+        cameraListSearch:[
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+        ],
+        queryParams:{
+          pageNum:1
+        },               // 企业列表参数
+        deviceBtn:null
       }
     },
     /** ----------------------------------weosocket开始------------------------------------- */
@@ -532,6 +590,20 @@
     },
     /** ----------------------------------weosocket结束------------------------------------- */
     methods: {
+      showCompanyDialog(e){
+        this.$refs.companyProjectDialog.open({label:'测试',value:'测试'})
+      },
+      // 查询收藏列表
+      getCompanyList(pageSize, pageNum) {
+      },
+      //三级列表选择（获取列表）
+      async getDeviceList(e,idx){
+        this.deviceBtn=idx
+        // this.$emit('setcameraDataList',[])
+        // const resdata = await getCameraById({labelId:e.id});
+        // this.cameraList = resdata.data?resdata.data:[]
+        // await this.$emit('setcameraDataList',resdata.data?resdata.data:[])
+      },
       getLocation(event) {
         this.visible_dw = !this.visible_dw
         if (!this.visible_dw) {
@@ -1413,35 +1485,224 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   @import '@/assets/styles/base.scss';
-  .paging {
-    padding: .5rem .3rem;
-    display: flex;
-    justify-content: center;
-    align-content: center;
 
-    span {
-      color: #2bacf7;
+  .highlightedBtn{
+    background: url('~@/assets/images/video-plaza/highLightBtn.png') 0 0 no-repeat; /* 高亮背景 */
+    background-size: cover;
+  }
+  .notHighlightedBtn{
+    background: none;
+  }
+
+  .third_contain{
+    overflow: hidden;
+    overflow-y: scroll;
+    width: 99%;
+    height: 100%;
+    padding-left:10px;
+    ::v-deep .el-button{
+      width: 80%;
+      height: 100%;
+      margin-left: 0 !important;
+      >span{
+        display: inline-block;
+        width: 100%;
+        text-align: center;
+      }
+      >span >span{
+        left: 0 !important;
+        display: inline-block;
+        width: 100%;
+        text-align: center;
+      }
+    }
+    ::v-deep .el-button:not(:nth-child(1)){
+    }
+    .thirdDevice_icon{
+      width: 10%;
+      margin: 1.7% 15px 0 2%;
+      height: 70%;
+      cursor: pointer;
+    }
+
+    .paging {
+      height: 4%;
+      padding: 0rem .3rem;
       display: flex;
-      align-items: center;
-      padding: 0 1rem;
+      justify-content: center;
+      align-content: center;
+
+      span {
+        color: #2bacf7;
+        display: flex;
+        align-items: center;
+        padding: 0 1rem;
+      }
+
+      button {
+        width: 70px;
+        padding: 0 0.3rem;
+        height: 1.5rem;
+        background-color: #112543;
+        color: #2bacf7;
+        border: 1px solid #33467f;
+      }
+
+      button:hover {
+        padding: 0 0.3rem;
+        height: 1.5rem;
+        background-color: #112543;
+        color: #0ff7c5;
+        border: 1px solid #1d657f;
+      }
+    }
+  }
+
+  .thirdInputModel{
+    margin-top: 10px;
+    // margin-left: 8%;
+    // width: 95%;
+  }
+  .sp_sbg{
+    overflow: hidden;
+    overflow-y: scroll;
+    width: 100%;
+    height: 80%;
+    .sp_sbg_div{
+      background-color: rgb(35, 76, 172,0.2);
+      margin: 5px 0px;
+      border-radius: 5px;
+
+      .el-button{
+        background: none;
+        outline: 0px;
+        border: 0px;
+      }
     }
 
-    button {
-      padding: 0 0.3rem;
-      height: 1.5rem;
-      background-color: #112543;
-      color: #2bacf7;
-      border: 1px solid #33467f;
+    .sp_sbg_div.on{
+      background-color: rgb(35, 76, 172,0.4);
+      .el-button{
+        span{
+          color: #01FBFE!important;
+          text-shadow: 0px 0px 3px #01FBFE;
+        }
+      }
     }
 
-    button:hover {
-      padding: 0 0.3rem;
-      height: 1.5rem;
-      background-color: #112543;
-      color: #0ff7c5;
-      border: 1px solid #1d657f;
+  }
+  .sip_img{
+    opacity: 0.8;
+  }
+  .sip_imgon{
+    opacity: 1;
+    box-shadow: 0px 5px 5px #0b3555;
+  }
+  .thirdHighlightedBtn{
+    background: url('~@/assets/images/video-plaza/camera1_on.png') 0 0 no-repeat; /* 高亮背景 */
+    background-size: 100% 100%;
+  }
+  .thirdDevice_icon{
+    width: 10%;
+    margin: 1.7% 15px 0 2%;
+    height: 70%;
+    cursor: pointer;
+  }
+
+  .container{
+    width:98%;
+    height:70%;
+    position: relative;
+    left: 1%;
+    z-index: 20;
+	  background: url('~@/assets/images/video-plaza/bg-sl.png') 0 0 no-repeat; /* 高亮背景 */
+	  border-bottom: 1px solid #1b497d;
+	  border-right: 1px solid #1b497d;
+  }
+
+  .container1{
+    width:48%;
+    height:95%;
+    position: relative;
+    left: 1%;
+    z-index: 20;
+	  background: url('~@/assets/images/video-plaza/bg-sl.png') 0 0 no-repeat; /* 高亮背景 */
+	  border-bottom: 1px solid #1b497d;
+	  border-right: 1px solid #1b497d;
+    .listItem{
+      cursor: pointer;
     }
   }
+
+  .topBar{
+    position: absolute;
+    top: 0;
+    z-index: 99;
+    width: 100%;
+    height: 4%;
+    text-indent: 23px;
+    line-height: 1.1;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 700;
+    background: url('~@/assets/images/video-plaza/rightBar.png') 0 0 no-repeat
+  }
+
+  .mainContainer{
+    overflow: hidden scroll;
+    position: absolute;
+    width: 90%;
+    height: 80%;
+    margin:  7% auto auto 5%;
+  }
+  .listItem{
+    display: flex;
+    justify-content: space-around;
+    height: 9%;
+    width: 100%;
+    margin: 0 auto;
+  }
+  .listItem:not(:nth-child(1)){
+    margin-top: 6%;
+  }
+  .itemPic{
+    width: 24%;
+    height: 100%;
+  }
+  .itemArea{
+    font-size: 15px;
+    white-space: nowrap;
+    width: 73%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin:auto auto auto 2%;
+    color: #fff;
+  }   
+  .itemArea:hover {
+    white-space: normal;
+    overflow: visible;
+  }
+  .itemArea >h3{
+    font-size: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .itemArea >span{
+    font-size: 16px;
+  }
+
+  .inputModel{
+    width: 100%;
+    margin-top: 14%;
+    padding: 0 5%;
+  }
+  ::v-deep .el-input__inner{
+   background-color: #0e3271ba ;
+      box-shadow: inset 0 0 10px 2px #1b497d;
+      border: 1px solid #205b8b;
+    color: white;
+  }
 </style>
 
 <style lang="scss">

src/views/monitor.vue

@@ -35,48 +35,28 @@
       >
       </supermap>
       <!-- 右侧 -->
-      <div class="rightbar" :class="indentright" ref="right">
-        <div class="forthis">
-          <dv-border-box-13
-            backgroundColor="rgba(12, 19, 38, .90)"
-            style="padding-bottom: 1rem;height: 80vh"
-          >
-            <img
-              src="../assets/images/integrated/light.png"
-              style="width: 100%; margin-top: 0.4rem"
-            />
-            <div class="this-title">
-              <span>列表</span>
-              <dv-decoration-3
-                style="width: 150px; height: 15px; margin-right: 1rem"
-              />
-            </div>
-            <div class="sj-search">
-              <el-input
-                v-model="rightDeptName"
-                :placeholder="placeholderMsg"
-                clearable
-                size="small"
-                prefix-icon="el-icon-search"
-              />
-            </div>
-            <div class="i-list-con" style="height: 70vh;">
-              <div
-                class="d-l-con"
-                v-for="(item, index) in visuForestCloudCameraBOListSearch"
-                :class="{ on: listCurrentIndex2 == index }"
-                v-on:click="dropLocation(item.latitude, item.longitude, index,item.cameraRadius)"
-              >
-                <div class="d-l-l-text">
-                  <i class="iconfont icon-sxt" :class="jkListIcon"></i>
-                  <h4>{{ item.cameraName }}</h4>
-                  <!-- <h4 v-if="onChuan" v-html="cgqData[index]"></h4> -->
-                </div>
+      <div class="rightbar" :class="indentright" ref="right" style="height: 81%;">
+        <!-- <div class="forthis"> -->
+          <!-- 设备列表 -->
+          <div class="container">
+            <div class="topBar">设备列表</div>
+            <!-- 输入框 -->
+            <el-input v-model="input" class="inputModel" placeholder="请输入要查询的设备名称 " clearable style="color:white" @change="search" >
+            </el-input>
+            <!-- 菜单 -->
+            <div class="mainContainer">
+              <!-- 列表 -->
+              <div class="listItem" v-for="(e,idx) in cameraListSearch" :key="idx" @click="dropLocation(e.latitude, e.longitude, idx,e.cameraRadius)">
+                  <img class="itemPic"
+                    v-bind:src="e.cameraImg == null ? require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png'):fileUrl+e.cameraImg" >
+                  <div class="itemArea" >
+                      <h4>{{ e.sbName }}</h4>
+                  </div>
               </div>
             </div>
-          </dv-border-box-13>
+          <!-- </div> -->
         </div>
-        <div class="forthis" v-show="false">
+        <!-- <div class="forthis" v-show="false">
           <dv-border-box-13
             backgroundColor="rgba(12, 19, 38, .90)"
             style="padding-bottom: 1rem"
@@ -106,7 +86,7 @@
               </div>
             </div>
           </dv-border-box-13>
-        </div>
+        </div> -->
       </div>
       <vBottomMenu ref="bottomMenu"></vBottomMenu>
       <!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
@@ -271,6 +251,72 @@ export default {
       cgqTimer: null,
       values: Math.random(),
       currentCameraParam: null,
+      cameraListSearch:[
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+          {
+            sbName:'测试测试测试测试测试测试',
+            cameraImg:null
+          },
+        ],
     };
   },
   watch: {
@@ -1739,4 +1785,84 @@ function cbIntegrationCallBack(oData) {
   height: 600px;
   border: 1px solid red;
 }
+
+.inputModel{
+    width: 100%;
+    margin-top: 14%;
+    padding: 0 5%;
+  }
+  ::v-deep .el-input__inner{
+   background-color: #0e3271ba ;
+      box-shadow: inset 0 0 10px 2px #1b497d;
+      border: 1px solid #205b8b;
+    color: white;
+  }
+.container{
+    width:98%;
+    height:100%;
+    position: relative;
+    left: 1%;
+    z-index: 20;
+	  background: url('~@/assets/images/video-plaza/bg-sl.png') 0 0 no-repeat; /* 高亮背景 */
+	  border-bottom: 1px solid #1b497d;
+	  border-right: 1px solid #1b497d;
+  }
+.topBar{
+  position: absolute;
+  top: 0;
+  z-index: 99;
+  width: 100%;
+  height: 4%;
+  text-indent: 23px;
+  line-height: 1.1;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  background: url('~@/assets/images/video-plaza/rightBar.png') 0 0 no-repeat
+}
+
+.mainContainer{
+    overflow: hidden scroll;
+    position: absolute;
+    width: 90%;
+    height: 85%;
+    margin:  7% auto auto 5%;
+  }
+
+  .listItem{
+    display: flex;
+    justify-content: space-around;
+    height: 9%;
+    width: 100%;
+    margin: 0 auto;
+  }
+  .listItem:not(:nth-child(1)){
+    margin-top: 6%;
+  }
+  .itemPic{
+    width: 30%;
+    height: 100%;
+  }
+  .itemArea{
+    font-size: 15px;
+    white-space: nowrap;
+    width: 73%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin:auto auto auto 2%;
+    color: #fff;
+  }   
+  .itemArea:hover {
+    white-space: normal;
+    overflow: visible;
+  }
+  .itemArea >h3{
+    font-size: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .itemArea >span{
+    font-size: 16px;
+  }
 </style>