中建四局(监控大屏):页面更改

src/views/projectAdmin/fourEngin/components/Card.vue

@@ -24,9 +24,9 @@ export default {
   height: 100%;
   .title {
     height: 34px;
-    line-height: 28px;
+    line-height: 25px;
     text-align: center;
-    font-size: 20px;
+    font-size: 14px;
     color: #ffffff;
     background-image: url('../assets/images/common/bg-card.png');
     background-size: 100% 100%;

src/views/projectAdmin/fourEngin/monitor/index.vue

@@ -1,26 +1,35 @@
 <template>
   <div class="monitor">
     <!-- <div class="video" v-for="i in 12" :key="i"></div> -->
+    <div class="left">
+      <Left />
+    </div>
+    <div class="right">
+      <Right />
+    </div>
   </div>
 </template>
 
 <script>
-export default {}
+import Left from "./left.vue";
+import Right from "./right.vue"
+export default {
+  components: { Left,Right},
+}
 </script>
 
 <style lang="less" scoped>
 .monitor {
   width: 100%;
   height: 100%;
-  background: url(../assets/temp/8.png) no-repeat;
-  background-size: 100% 100%;
   display: flex;
-  flex-wrap: wrap;
+  .left{
-  justify-content: space-between;
+    width: 15%;
-  .video {
+    box-sizing: border-box;
-    width: 24.5%;
+    padding-right: 2%;
-    height: 32%;
+  }
-    border: 1px solid skyblue;
+  .right{
+    width: 85%;
   }
 }
 </style>

src/views/projectAdmin/fourEngin/monitor/left.vue

@@ -0,0 +1,153 @@
+<template>
+  <Card title="监控设备列表">
+    <vue-scroll class="treeList">
+      <div style="padding-top: 10px">
+        <ul style="margin:20px" v-for="(name, index) in dataList" :key="index">
+          <li :class="{ active: index == current && currentTwo == -1 }">
+            <div
+              class="clickName"
+              @click="next(index, $event, name, 1)"
+              style="display: inline-block"
+            >
+              <el-popover
+                placement="top-start"
+                v-model="name.visible"
+                :content="name.dangerName"
+              >
+                <span
+                  slot="reference"
+                  @mouseenter="
+                    name.visible = name.dangerName.length > 9 ? true : false
+                  "
+                  @mouseleave="name.visible = false"
+                  >{{
+                    name.dangerName.length > 9
+                      ? name.dangerName.substring(0, 8) + "..."
+                      : name.dangerName
+                  }}</span>
+              </el-popover>
+              <span class="imgbox" style="margin-left:145px">
+                <i v-if="current != index" class="el-icon-arrow-right"></i>
+                <i v-else class="el-icon-arrow-down"></i>
+              </span>
+            </div>
+          </li>
+          <ul
+            style="margin:20px;color:#66D4D9;"
+            v-for="(item, i) in name.list"
+            id="child"
+            v-if="current == index"
+            :key="i"
+          >
+            <li
+              :class="{ active: i == currentTwo && current != -1 }"
+              @click="next2(item)"
+            >
+              <el-popover
+                placement="top-start"
+                v-model="item.visible"
+                :content="item.dangerName"
+              >
+                <div
+                  slot="reference"
+                  @mouseenter="
+                    item.visible = item.dangerName.length > 9 ? true : false
+                  "
+                  @mouseleave="item.visible = false"
+                  style="display: inline-block; width: 60%"
+                  @click="showThree(item, i)"
+                >
+                  {{
+                    item.dangerName.length > 10
+                      ? item.dangerName.substring(0, 9) + "..."
+                      : item.dangerName
+                  }}
+                </div>
+              </el-popover>
+            </li>
+          </ul>
+        </ul>
+        <li
+          class="title"
+          style="text-align: center; line-height: 140px"
+          v-show="dataList.length == 0"
+        >
+          暂无数据
+        </li>
+      </div>
+    </vue-scroll>
+  </Card>
+</template>
+<script>
+import Card from "../components/Card.vue";
+export default {
+  components: { Card },
+  data() {
+    return {
+      current: -1,
+      threeIndex: -1,
+      currentTwo: -1,
+      dataList: [
+        { dangerName: "设备1", list: [{ dangerName: "塔吊设备" }] },
+        { dangerName: "设备2", list: [{ dangerName: "塔吊设备" }] },
+        { dangerName: "设备3", list: [{ dangerName: "塔吊设备" }] },
+      ],
+    };
+  },
+  methods:{
+    next2(item) {
+    //   this.secondId = item.id;
+    //   this.loadRigthtList();
+    },
+    next(index, $event, data, type) {
+      console.log("data", data);
+      this.currentTwo = -1;
+      // 
+      if (this.current != index) {
+        this.threeIndex = -1;
+      }
+
+      this.threeData = [];
+      this.type = type;
+      this.parentid1 = data.id;
+      if (this.current == index) {
+        this.current = -1;
+      } else {
+        this.current = index;
+      }
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+.maxbox {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  box-sizing: border-box;
+  padding-top: 8%;
+  .treeList {
+    background-color: rgb(255,255,255);
+    height: calc(100% - 42px) !important;
+  }
+  li{
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 32px;
+    letter-spacing: 1px;
+    font-weight: bold;
+  }
+  li:hover,
+  .active {
+    background-color: rgba(81, 129, 246, 0.14);
+    color: @--color-primary;
+  }
+  #child {
+    li {
+      font-size: 15px;
+      padding-left: 39px;
+      font-weight: normal;
+    }
+  }
+}
+</style>

src/views/projectAdmin/fourEngin/monitor/right.vue

@@ -0,0 +1,83 @@
+<template>
+    <Card title="视频监控">
+        <div class="top">
+            <el-select size="mini" v-model="value1" placeholder="请选择">
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        </div>
+        <div class="maxbox">
+            <div class="show"></div>
+            <div class="show"></div>
+            <div class="show"></div>
+            <div class="show"></div>
+        </div>
+    </Card>
+</template>
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card },
+  data() {
+    return {
+        value1:'2',
+        typeList: [{
+          value: '1',
+          label: '2屏'
+        }, {
+          value: '2',
+          label: '4屏'
+        }, {
+          value: '3',
+          label: '9屏'
+        }],
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.top{
+    box-sizing: border-box;
+    padding-top: 10px;
+    padding-right: 20px;
+    height: 6%;
+    float: right;
+}
+.maxbox{
+    width: 100%;
+    height: 94%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .show{
+        width: 49%;
+        font-size: 20px;
+        margin-left: 1%;
+        background-image: url(.././assets/temp/small.png);
+        background-size: 100%;
+        background-repeat: no-repeat;
+    }
+}
+::v-deep .el-input--mini .el-input__inner {
+    height: 33px;
+    width: 80px;
+    color:#6ba8b1;
+}
+::v-deep  .el-select,
+::v-deep  .el-input,
+::v-deep  .el-input__inner{
+background-color:#172337 ;
+background-image: url(../assets/images/common/num_bg.png);
+background-size: 100%;
+border:0px;
+border-radius:0px;
+text-align: center;
+}
+::v-deep .el-select .el-input .el-select__caret{
+  color:#6ba8b1;
+}
+</style>