emm...

src/views/screen/engineering/cameraScreen.vue

@@ -0,0 +1,86 @@
+<script>
+export default {
+  name: "CameraScreen",
+  data() {
+    return {}
+  },
+  methods:{
+    leave(){
+      this.$emit("leave");
+    },
+    issue(){
+      this.$emit("issue");
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="first">
+    <div style="color: white;margin: 20px 0 0 20px;font-size: 24px">电科院西侧球机</div>
+    <i style="color: white;position: absolute;right: 20px;top: 20px;font-size: 27px" class="el-icon-time">
+      <span style="margin-left: 8px;font-size: 24px">2024/11/11 18:00:00</span>
+    </i>
+    <div class="c1" style="right: 20px;top: 70px;" @click="leave()">
+      <img src="../../../assets/camera/leave.png" width="20px">
+    </div>
+    <div class="c1" style="right: 20px;top: 120px;" @click="issue()">
+      <img src="../../../assets/camera/cut.png" width="20px">
+    </div>
+    <div class="c1" style="right: 20px;top: 170px;">
+      <img src="../../../assets/camera/bigger.png" width="20px">
+    </div>
+    <div class="c1" style="right: 20px;top: 220px;">
+      <img src="../../../assets/camera/smaller.png" width="20px">
+    </div>
+    <div class="c2" style="right: 20px;top: 420px;">
+      <div style="position: absolute;left: 0;">
+        <img src="../../../assets/camera/left.png" width="60px">
+      </div>
+      <div style="position: absolute;right: 0;">
+        <img src="../../../assets/camera/right.png" width="60px">
+      </div>
+      <div style="position: absolute;top: 0;">
+        <img src="../../../assets/camera/up.png" width="80px">
+      </div>
+      <div style="position: absolute;bottom: 0;">
+        <img src="../../../assets/camera/down.png" width="80px">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.first{
+  background-color: black;
+  width: 1200px;
+  height: 700px;
+  display: flex;
+  position:relative;
+  border: 2px solid transparent;
+  box-shadow: 0 0 10px rgb(0,153,184) inset,0 0 30px rgb(0,153,184);
+}
+.c1{
+  width: 50px;
+  height: 30px;
+  background-color: rgba(88,139,196,0.37);box-shadow: 0 0 15px rgb(47,113,124);
+  display: flex;
+  position:absolute;
+  justify-content: center;
+  align-items: center;
+}
+.c1:hover{
+  cursor: pointer;
+}
+.c2{
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background-color: rgba(88,139,196,0.37);box-shadow: 0 0 15px rgb(47,113,124);
+  display: flex;
+  position:absolute;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

src/views/screen/engineering/issueListDia.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="myDia">
+    <div style="margin-bottom: 10px;display: flex;position: relative;width: 100%">
+      <el-date-picker
+        v-model="value"
+        type="date"
+        placeholder="选择日期">
+      </el-date-picker>
+      <div style="border: 1px #00ffff solid;display: flex;justify-content: center;align-items: center;margin-left: 10px;width: 100px;color: #00ffff;cursor: pointer" @click="choose">
+        <i class="el-icon-plus"><span style="margin-left: 10px">上报问题</span></i>
+      </div>
+      <i class="el-icon-circle-close" style="position: absolute;right: 10px;color: #00ffff;font-size: 25px;cursor: pointer" @click="close"></i>
+    </div>
+    <div class="table-cont">
+      <div class="table-top">
+        <div class="fir">时间</div>
+        <div class="snd">标题</div>
+        <div class="fir">问题内容</div>
+        <div class="snd">发起人</div>
+        <div class="fir">问题状态</div>
+        <div class="snd">操作</div>
+      </div>
+      <div class="table-bot">
+        <div class="table-list" v-for="(item,index) in dataList" :key="index" @click="choose()">
+          <div class="fir"><div class="said"></div>{{item.a}}</div>
+          <div class="snd">{{item.b}}</div>
+          <div class="snd">{{item.c}}</div>
+          <div class="snd">{{item.d}}</div>
+          <div class="snd">{{item.e}}</div>
+          <div class="snd">{{item.f}}</div>
+        </div>
+      </div>
+    </div>
+    <div style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 10px;">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { getFoodsList } from "@/api/screen/service";
+import pinyin from "../data/pinyin.js";
+
+export default {
+  name: "UnitCamera",
+  data() {
+    return {
+      value:"2020-02-09",
+      dataList:[
+        {a:1,b:1,c:1,d:1,f:1,e:1},
+        {a:1,b:1,c:1,d:1,f:1,e:1},
+        {a:1,b:1,c:1,d:1,f:1,e:1},
+        {a:1,b:1,c:1,d:1,f:1,e:1},
+        {a:1,b:1,c:1,d:1,f:1,e:1},
+        {a:1,b:1,c:1,d:1,f:1,e:1},
+        {a:1,b:1,c:1,d:1,f:1,e:1},
+        {a:1,b:1,c:1,d:1,f:1,e:1},
+      ]
+    };
+  },
+  mounted() {},
+  methods: {
+    choose(){
+      this.$emit("subIssue");
+    },
+
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.me{
+  display: flex;flex-wrap: wrap;justify-content: space-around;height: 380px;overflow: auto;
+}
+.me::-webkit-scrollbar {
+  display: none;
+}
+.said{
+  width: 2px;
+  margin-right: 8px;
+  height: 16px;
+  background-color: #00FFFF;
+}
+.table-cont{
+  width:100%;
+
+  .table-top{
+    width:100%;
+    height: 26px;
+    background: url("../../../assets/images/building_guarantee/img_11.png") no-repeat;
+    background-size: 100% 100%;
+    padding:0 4px 0 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size:14px;
+    color:#00FFFF;
+  }
+  .table-bot{
+    width:100%;
+    height: 300px;
+    overflow: auto;
+    .table-list{
+      margin-bottom: 10px;
+      align-items: center;
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(21, 105, 107, 0.54) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      width:100%;
+      height:30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size:14px;
+      color:#FFFFFF;
+      font-weight: 500;
+    }
+    .table-list:hover{
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(47, 204, 208, 0.74) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      cursor: pointer;
+    }
+  }
+  .table-bot::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条 */
+  }
+
+  .fir{
+    width:40%;
+    text-align: left;
+    display: flex;
+  }
+  .snd{
+    width:30%;
+    text-align: left;
+  }
+  .thd{
+    width:30%;
+    text-align: left;
+  }
+}
+
+.el-scrollbar {
+  background: #15696b;
+  border: 1px solid #00ffff;
+  ul {
+    li {
+      color: #fff;
+    }
+  }
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: #15696b;
+  color: #00ffff;
+}
+.el-select-dropdown__item.selected {
+  color: #00ffff;
+}
+.el-select .el-input .el-select__caret {
+  display: none;
+}
+.myDia{
+  padding-top: 5px;
+  width: 668px;
+  height: 432px;
+  background-color: rgba(21, 105, 107, 0.5);
+  box-shadow: 0 0 15px 5px rgba(21, 105, 107, 1); /* 发光效果 */
+}
+</style>
+

src/views/screen/engineering/issueSubDia.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="main-data data-weeks-foods">
+    <div class="myTitle">问题上报</div>
+    <div class="close-btn" @click="close"></div>
+    <div class="me">
+      <div style="width: 35%;color: #00ffff;">
+        <div style="text-align: right;margin-bottom: 10px;height: 32px;line-height: 32px">时间：</div>
+        <div style="text-align: right;margin-bottom: 20px;height: 32px;line-height: 32px">问题：</div>
+        <div style="text-align: right;margin-bottom: 145px;">问题内容：</div>
+        <div style="text-align: right">选项：</div>
+      </div>
+      <div style="width: 65%;">
+        <el-date-picker
+          style="margin-bottom: 10px"
+          v-model="value"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+        <el-input placeholder="请输入内容" style="margin-bottom: 10px"></el-input>
+        <el-input type="textarea" :rows=8 placeholder="请输入内容" resize="none" style="margin-bottom: 10px"></el-input>
+        <el-checkbox v-model="check" @change="change">备选项1</el-checkbox>
+        <el-checkbox v-model="checked" @change="changed" style="margin-right: 200px">备选项</el-checkbox>
+        <el-button style="width: 100px;margin-top: 10px">提交</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFoodsList } from "@/api/screen/service";
+import pinyin from "../data/pinyin.js";
+
+export default {
+  name: "UnitCamera",
+  data() {
+    return {
+      check:false,
+      checked:false
+    };
+  },
+  mounted() {},
+  methods: {
+    change(){
+      this.checked = !this.check
+    },
+    changed(){
+      this.check = !this.checked
+    },
+    choose(){
+      this.$emit("choose");
+    },
+
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.myTitle{
+  color: #00F6EC;
+  font-size: 20px;
+  margin-left: 30px;
+  margin-top: 13px;
+  margin-bottom: 18px;
+}
+.me{
+  display: flex;flex-wrap: wrap;justify-content: space-around;height: 380px;overflow: auto;
+}
+.me::-webkit-scrollbar {
+  display: none;
+}
+.said{
+  width: 2px;
+  margin-right: 8px;
+  height: 16px;
+  background-color: #00FFFF;
+}
+
+.el-scrollbar {
+  background: #15696b;
+  border: 1px solid #00ffff;
+  ul {
+    li {
+      color: #fff;
+    }
+  }
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: #15696b;
+  color: #00ffff;
+}
+.el-select-dropdown__item.selected {
+  color: #00ffff;
+}
+.el-select .el-input .el-select__caret {
+  display: none;
+}
+.data-weeks-foods {
+  position: relative;
+  width: 668px;
+  height: 432px;
+  background: rgba(59, 92, 119, 0.37) url("../../../assets/images/main/dialog-bg.png") no-repeat;
+  background-size: cover;
+  .close-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+  }
+  .choose-area {
+    position: absolute;
+    right: 100px;
+    top: 7px;
+    width: 80.05px;
+    height: 30px;
+    line-height: 30px;
+    padding-left: 15px;
+    font-size: 14px;
+    color: #00ffff;
+    background: url("../../../assets/images/main/choose_short.png") no-repeat;
+    cursor: pointer;
+  }
+  .choose-area.choose-week{
+    right: 200px;
+  }
+  .content-area {
+    display: flex;
+    flex-direction: column;
+    padding: 15px 20px 0 15px;
+    padding-top: 0 !important;
+  }
+
+  .content-title {
+    width: 515px;
+    height: 26px;
+    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 17px;
+    .title {
+      display: block;
+    }
+  }
+
+  .content {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .data-list {
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(21, 105, 107, 0.54) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      width: 100%;
+      height: 492px;
+      padding: 20px;
+      overflow: auto;
+      white-space: pre-wrap;
+      .data-item {
+        display: inline-block;
+        color: #00ffff;
+        font-weight: bold;
+        margin: 0 20px 20px 0;
+        font-size: 14px;
+        img {
+          width: 80px;
+          height: 80px;
+          object-fit: cover;
+        }
+        .name {
+          width: 80px;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .title-format {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    img {
+      width: 6px;
+      height: 24px;
+      margin-right: 6px;
+    }
+    .title-info {
+      display: flex;
+      flex-direction: column;
+      font-size: 12px;
+      color: #ffffff;
+      .title-en {
+        font-size: 8px;
+        color: #ffffff;
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .choose-area {
+    .el-select {
+      width: 90%;
+    }
+    .el-input {
+      input {
+        background: rgba(255, 255, 255, 0);
+        color: #00ffff;
+        border: none;
+        padding: 0;
+        width: 30px;
+      }
+    }
+  }
+
+  .no-data{
+    text-align: center;
+    color: #62ffe5;
+    font-size: 25px;
+    margin-top: 150px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    //滑块部分
+    // border-radius: 5px;
+    background-color: #58cbbb;
+  }
+
+  ::-webkit-scrollbar-track {
+    //轨道部分
+    // box-shadow: inset 0 0 5px #ddd;
+    background: #ddd;
+    // border-radius: 5px;
+  }
+}
+</style>
+

src/views/screen/engineering/main.vue

@@ -27,7 +27,7 @@
             <div class="cont-title">现场监控接入情况</div>
           </div>
           <div class="components-item">
-            <unit-access-to :key="appOrg"></unit-access-to>
+            <unit-access-to @chooseUnit="onChooseUnit" :key="appOrg"></unit-access-to>
           </div>
           <!-- <monitoring v-if="menu === 1"></monitoring>
           <monitoring-video v-if="menu === 2"></monitoring-video> -->
@@ -167,10 +167,52 @@
         ></monitor-live-list>
       </div>
     </div>
+
+    <!-- 监控区域 -->
+    <div v-if="showC" class="dialog-2">
+      <div class="dialog-center">
+        <unit-project-dia
+          v-if="showProject === 1"
+          @close="onCloseProject"
+          @choose="onChooseProject"
+        ></unit-project-dia>
+        <project-camera-dia
+          v-if="showCamera === 1"
+          @close="onCloseCamera"
+          @choose="onChooseCamera"
+        ></project-camera-dia>
+        <camera-screen
+          v-if="showCameraScreen === 1"
+          @leave="onCloseCameraScreen"
+          @issue="onChooseIssue">
+        </camera-screen>
+        <issue-list-dia
+          v-if="showIssue === 1"
+          @close="onCloseIssue"
+          @subIssue="onSubIssue"
+          :monitorInfo="this.monitorInfo">
+        </issue-list-dia>
+        <issue-sub-dia
+          v-if="showIssueSub === 1"
+          @close="onCloseIssueSub"
+          :monitorInfo="this.monitorInfo">
+        </issue-sub-dia>
+        <resource-list
+          v-if="showRes === 1"
+          @closeRes="onCloseRes"
+          :monitorInfo="this.monitorInfo">
+        </resource-list>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import IssueSubDia from './issueSubDia.vue'
+import CameraScreen from './cameraScreen.vue'
+import IssueListDia from "./issueListDia.vue"
+import ProjectCameraDia from "./projectCameraDia.vue";
+import UnitProjectDia from "./unitProjectDia.vue";
 import Province from "../map/province.vue";
 import UnitAccess from "./unitAccess.vue";
 import UnitAccessTo from "./unitAccessto.vue";
@@ -187,6 +229,12 @@ import company from "../data/company.json";
 export default {
   name: "EngineeringMain",
   components: {
+    ResourceList,
+    IssueSubDia,
+    CameraScreen,
+    IssueListDia,
+    ProjectCameraDia,
+    UnitProjectDia,
     Province,
     UnitAccess,
     UnitAccessTo,
@@ -202,6 +250,13 @@ export default {
   props: {},
   data() {
     return {
+      showRes:0,
+      showC:false,
+      showIssue:0,
+      showIssueSub:0,
+      showCameraScreen:0,
+      showCamera:0,
+      showProject:0,
       menu: 0,
       leftShow: true,
       rightShow: true,
@@ -252,6 +307,58 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    onChooseUnit(){
+      this.showC = true;
+      this.showProject = 1;
+    },
+
+    onChooseProject(){
+      this.showCamera = 1;
+      this.showProject = 0;
+    },
+    onCloseProject(){
+      this.showC = false;
+      this.showProject = 0;
+    },
+
+    onChooseCamera(){
+      this.showCameraScreen = 1;
+      this.showCamera = 0;
+    },
+    onCloseCamera(){
+      this.showProject = 1;
+      this.showCamera = 0;
+    },
+
+    onCloseCameraScreen(){
+      this.showCameraScreen = 0;
+      this.showCamera = 1;
+    },
+    onChooseIssue(){
+      this.showCameraScreen = 0;
+      this.showIssue = 1;
+    },
+
+    onCloseIssue(){
+      this.showCameraScreen = 1
+      this.showIssue = 0
+    },
+    onSubIssue(){
+      this.showIssueSub = 1
+      this.showIssue = 0
+    },
+
+    onCloseIssueSub(){
+      this.showIssueSub = 0
+      this.showIssue = 1
+    },
+
+    onCloseRes(){
+      this.showC = false;
+      this.showRes = 0
+    },
+
+
     showDialog(type) {
       if (type < 4) {
         this.leftShow = false;

src/views/screen/engineering/projectCameraDia.vue

@@ -0,0 +1,378 @@
+<template>
+  <div class="main-data data-weeks-foods">
+    <div class="title-area">摄像头列表</div>
+    <div class="close-btn" @click="close"></div>
+    <div class="me">
+      <div v-for="(item, index) in unitDataList" :key="index">
+        <img src="../../../assets/camera/camera.png" width="200px" @click="choose" style="cursor: pointer">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFoodsList } from "@/api/screen/service";
+import pinyin from "../data/pinyin.js";
+
+export default {
+  name: "UnitCamera",
+  data() {
+    return {
+      unitDataList: [
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        }],
+    };
+  },
+  mounted() {},
+  methods: {
+    choose(){
+      this.$emit("choose");
+    },
+
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.me{
+  display: flex;flex-wrap: wrap;justify-content: space-around;height: 380px;overflow: auto;
+}
+.me::-webkit-scrollbar {
+  display: none;
+}
+.said{
+  width: 2px;
+  margin-right: 8px;
+  height: 16px;
+  background-color: #00FFFF;
+}
+.table-cont{
+  width:100%;
+
+  .table-top{
+    width:100%;
+    height: 26px;
+    background: url("../../../assets/images/building_guarantee/img_11.png") no-repeat;
+    background-size: 100% 100%;
+    padding:0 4px 0 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size:14px;
+    color:#00FFFF;
+  }
+  .table-bot{
+    width:100%;
+    height: 300px;
+    overflow: auto;
+    .table-list{
+      margin-bottom: 10px;
+      align-items: center;
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(21, 105, 107, 0.54) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      width:100%;
+      height:30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size:14px;
+      color:#FFFFFF;
+      font-weight: 500;
+    }
+    .table-list:hover{
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(47, 204, 208, 0.74) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      cursor: pointer;
+    }
+  }
+  .table-bot::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条 */
+  }
+
+  .fir{
+    width:40%;
+    text-align: left;
+    display: flex;
+  }
+  .snd{
+    width:30%;
+    text-align: left;
+  }
+  .thd{
+    width:30%;
+    text-align: left;
+  }
+}
+
+.el-scrollbar {
+  background: #15696b;
+  border: 1px solid #00ffff;
+  ul {
+    li {
+      color: #fff;
+    }
+  }
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: #15696b;
+  color: #00ffff;
+}
+.el-select-dropdown__item.selected {
+  color: #00ffff;
+}
+.el-select .el-input .el-select__caret {
+  display: none;
+}
+.data-weeks-foods {
+  position: relative;
+  width: 668px;
+  height: 432px;
+  background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
+  background-size: cover;
+  .close-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+  }
+  .choose-area {
+    position: absolute;
+    right: 100px;
+    top: 7px;
+    width: 80.05px;
+    height: 30px;
+    line-height: 30px;
+    padding-left: 15px;
+    font-size: 14px;
+    color: #00ffff;
+    background: url("../../../assets/images/main/choose_short.png") no-repeat;
+    cursor: pointer;
+  }
+  .choose-area.choose-week{
+    right: 200px;
+  }
+  .content-area {
+    display: flex;
+    flex-direction: column;
+    padding: 15px 20px 0 15px;
+    padding-top: 0 !important;
+  }
+
+  .content-title {
+    width: 515px;
+    height: 26px;
+    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 17px;
+    .title {
+      display: block;
+    }
+  }
+
+  .content {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .data-list {
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(21, 105, 107, 0.54) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      width: 100%;
+      height: 492px;
+      padding: 20px;
+      overflow: auto;
+      white-space: pre-wrap;
+      .data-item {
+        display: inline-block;
+        color: #00ffff;
+        font-weight: bold;
+        margin: 0 20px 20px 0;
+        font-size: 14px;
+        img {
+          width: 80px;
+          height: 80px;
+          object-fit: cover;
+        }
+        .name {
+          width: 80px;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .title-format {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    img {
+      width: 6px;
+      height: 24px;
+      margin-right: 6px;
+    }
+    .title-info {
+      display: flex;
+      flex-direction: column;
+      font-size: 12px;
+      color: #ffffff;
+      .title-en {
+        font-size: 8px;
+        color: #ffffff;
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .choose-area {
+    .el-select {
+      width: 90%;
+    }
+    .el-input {
+      input {
+        background: rgba(255, 255, 255, 0);
+        color: #00ffff;
+        border: none;
+        padding: 0;
+        width: 30px;
+      }
+    }
+  }
+
+  .no-data{
+    text-align: center;
+    color: #62ffe5;
+    font-size: 25px;
+    margin-top: 150px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    //滑块部分
+    // border-radius: 5px;
+    background-color: #58cbbb;
+  }
+
+  ::-webkit-scrollbar-track {
+    //轨道部分
+    // box-shadow: inset 0 0 5px #ddd;
+    background: #ddd;
+    // border-radius: 5px;
+  }
+}
+</style>
+

src/views/screen/engineering/resourceList.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/screen/engineering/unitAccessto.vue

@@ -13,7 +13,7 @@
             <div class="thd">已接入摄像头数量</div>
           </div>
           <div class="table-bot">
-            <div class="table-list" v-for="(item,index) in unitDataList" :key="index">
+            <div class="table-list" v-for="(item,index) in unitDataList" :key="index" @click="choose">
               <div class="said"></div>
               <div class="fir">{{item.name}}</div>
               <div class="snd">{{item.num}}</div>
@@ -155,7 +155,9 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
-
+    choose(){
+      this.$emit('chooseUnit')
+    },
     handleDataList() {
       this.dataList = [];
       setTimeout(()=>{
@@ -507,6 +509,9 @@ export default {
         color:#FFFFFF;
         font-weight: 500;
       }
+      .table-list:hover{
+        cursor: pointer;
+      }
     }
 
     .fir{

src/views/screen/engineering/unitProjectDia.vue

@@ -0,0 +1,393 @@
+<template>
+  <div class="main-data data-weeks-foods">
+    <div class="title-area">工程现场监控接入情况</div>
+    <div class="close-btn" @click="close"></div>
+    <div class="content-area">
+      <div class="content">
+        <div class="table-cont">
+          <div class="table-top">
+            <div class="fir">项目名称</div>
+            <div class="snd">已接入摄像头数量</div>
+          </div>
+          <div class="table-bot">
+            <div class="table-list" v-for="(item,index) in unitDataList" :key="index" @click="choose()">
+              <div class="fir"><div class="said"></div>{{item.name}}</div>
+              <div class="snd">{{item.num}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFoodsList } from "@/api/screen/service";
+import pinyin from "../data/pinyin.js";
+
+export default {
+  name: "UnitCamera",
+  props: {
+    week: {
+      type: String,
+      default: "",
+    },
+    appOrg: {
+      type: String,
+      default: "10001",
+    },
+  },
+  data() {
+    return {
+      unitDataList: [
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        },
+        {
+          name: "国网山西省电力公司",
+          num: 56,
+          onLineNum: 46
+        },
+        {
+          name: "国网太原供电公司",
+          num: 10,
+          onLineNum: 8
+        },
+        {
+          name: "国网运城供电公司",
+          num: 8,
+          onLineNum: 4
+        }],
+    };
+  },
+  mounted() {},
+  methods: {
+    choose(){
+      this.$emit("choose");
+    },
+
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.said{
+  width: 2px;
+  margin-right: 8px;
+  height: 16px;
+  background-color: #00FFFF;
+}
+.table-cont{
+  width:100%;
+
+  .table-top{
+    width:100%;
+    height: 26px;
+    background: url("../../../assets/images/building_guarantee/img_11.png") no-repeat;
+    background-size: 100% 100%;
+    padding:0 4px 0 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size:14px;
+    color:#00FFFF;
+  }
+  .table-bot{
+    width:100%;
+    height: 300px;
+    overflow: auto;
+    .table-list{
+      margin-bottom: 10px;
+      align-items: center;
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(21, 105, 107, 0.54) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      width:100%;
+      height:30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size:14px;
+      color:#FFFFFF;
+      font-weight: 500;
+    }
+    .table-list:hover{
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(47, 204, 208, 0.74) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      cursor: pointer;
+    }
+  }
+  .table-bot::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条 */
+  }
+
+  .fir{
+    width:40%;
+    text-align: left;
+    display: flex;
+  }
+  .snd{
+    width:30%;
+    text-align: left;
+  }
+  .thd{
+    width:30%;
+    text-align: left;
+  }
+}
+
+.el-scrollbar {
+  background: #15696b;
+  border: 1px solid #00ffff;
+  ul {
+    li {
+      color: #fff;
+    }
+  }
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: #15696b;
+  color: #00ffff;
+}
+.el-select-dropdown__item.selected {
+  color: #00ffff;
+}
+.el-select .el-input .el-select__caret {
+  display: none;
+}
+.data-weeks-foods {
+  position: relative;
+  width: 668px;
+  height: 432px;
+  background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
+  background-size: cover;
+  .close-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+  }
+  .choose-area {
+    position: absolute;
+    right: 100px;
+    top: 7px;
+    width: 80.05px;
+    height: 30px;
+    line-height: 30px;
+    padding-left: 15px;
+    font-size: 14px;
+    color: #00ffff;
+    background: url("../../../assets/images/main/choose_short.png") no-repeat;
+    cursor: pointer;
+  }
+  .choose-area.choose-week{
+    right: 200px;
+  }
+  .content-area {
+    display: flex;
+    flex-direction: column;
+    padding: 15px 20px 0 15px;
+    padding-top: 0 !important;
+  }
+
+  .content-title {
+    width: 515px;
+    height: 26px;
+    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 17px;
+    .title {
+      display: block;
+    }
+  }
+
+  .content {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .data-list {
+      background: radial-gradient(
+          190% 71% at 50% 49%,
+          rgba(21, 105, 107, 0.54) 0%,
+          rgba(27, 95, 97, 0) 100%
+      );
+      width: 100%;
+      height: 492px;
+      padding: 20px;
+      overflow: auto;
+      white-space: pre-wrap;
+      .data-item {
+        display: inline-block;
+        color: #00ffff;
+        font-weight: bold;
+        margin: 0 20px 20px 0;
+        font-size: 14px;
+        img {
+          width: 80px;
+          height: 80px;
+          object-fit: cover;
+        }
+        .name {
+          width: 80px;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .title-format {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    img {
+      width: 6px;
+      height: 24px;
+      margin-right: 6px;
+    }
+    .title-info {
+      display: flex;
+      flex-direction: column;
+      font-size: 12px;
+      color: #ffffff;
+      .title-en {
+        font-size: 8px;
+        color: #ffffff;
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .choose-area {
+    .el-select {
+      width: 90%;
+    }
+    .el-input {
+      input {
+        background: rgba(255, 255, 255, 0);
+        color: #00ffff;
+        border: none;
+        padding: 0;
+        width: 30px;
+      }
+    }
+  }
+
+  .no-data{
+    text-align: center;
+    color: #62ffe5;
+    font-size: 25px;
+    margin-top: 150px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    //滑块部分
+    // border-radius: 5px;
+    background-color: #58cbbb;
+  }
+
+  ::-webkit-scrollbar-track {
+    //轨道部分
+    // box-shadow: inset 0 0 5px #ddd;
+    background: #ddd;
+    // border-radius: 5px;
+  }
+}
+</style>
+