增加点击出现小弹框功能

75d92c01 · 纪泽龙 · 41913163 · 75d92c01 · 75d92c01 · 75d92c01
Commit 75d92c01 authored Mar 28, 2022 by 纪泽龙
8 changed files
--- a/gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css
+++ b/gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css
 @font-face {
  font-family: "iconfont"; /* Project id 3276749 */
-  src: url('iconfont.woff2?t=1648286292510') format('woff2'),
-       url('iconfont.woff?t=1648286292510') format('woff'),
-       url('iconfont.ttf?t=1648286292510') format('truetype');
+  src: url('//at.alicdn.com/t/font_3276749_mh99rhny3b.woff2?t=1648459448822') format('woff2'),
+       url('//at.alicdn.com/t/font_3276749_mh99rhny3b.woff?t=1648459448822') format('woff'),
+       url('//at.alicdn.com/t/font_3276749_mh99rhny3b.ttf?t=1648459448822') format('truetype');
 }

 .iconfont {
@@ -13,6 +13,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-guanbi:before {
+  content: "\e661";
+}
+
 .icon-jt:before {
  content: "\e8f1";
 }
@@ -36,4 +40,3 @@
 .icon-b:before {
  content: "\e61f";
 }
-
--- a/gassafetyprogress-web/src/assets/styles/all.scss
+++ b/gassafetyprogress-web/src/assets/styles/all.scss
@@ -56,8 +56,8 @@
 .el-dialog:not(.is-fullscreen) {
  margin-top: 6vh !important;
 }
-.el-dialog__header{
-  border-bottom:1px solid #cccccc;
+.el-dialog__header {
+  border-bottom: 1px solid #cccccc;
 }
 .bigwindow {
  // 全局表格样式
@@ -613,19 +613,17 @@

    // overflow-y: none !important;
  }
-
-
 }
 // map里的label
 .amap-info {
  position: fixed !important;
  z-index: 999 !important;
 }
-.amap-marker-label{
-    background-color: rgba(9, 18, 32, 0.6) !important;
-    color: #fff !important;
-    border:none !important;
-    padding:10px;
+.amap-marker-label {
+  background-color: rgba(9, 18, 32, 0.6) !important;
+  color: #fff !important;
+  border: none !important;
+  padding: 10px;
 }
 .left {
  .el-table__body-wrapper {
@@ -668,16 +666,20 @@
  padding: 0 2px !important;
 }
 //去除高德logo
-.amap-logo{
+.amap-logo {
  display: none;
-  opacity:0 !important;
+  opacity: 0 !important;
 }
 .amap-copyright {
-  opacity:0;
+  opacity: 0;
+}
+
+.paddingnone {
+  padding: 0 !important;
 }

 .zzz {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
-}
\ No newline at end of file
+}
--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue
+++ b/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue
 <!--
 * @Author: your name
 * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-28 13:59:37
+ * @LastEditTime: 2022-03-28 18:05:38
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
 -->

 <template>
-  <div class="czcard">
+  <div class="chars-card">
    <my-collapse
      title="储罐"
      ref="myCollapse"
@@ -34,16 +34,56 @@
        <div class="container flex">
          <div
            class="com"
-            v-for="item in czList"
+            v-for="(item, index) in czList"
            :key="item.deviceName"
            v-show="item.show"
          >
-            <div :title="item.companyName" class="left zzz">
+            <el-popover
+              :ref="'popo' + index"
+              placement="right-end"
+              width="330"
+              trigger="click"
+              popper-class="paddingnone"
+            >
+              <div class="cz-item">
+                <div class="title">
+                  <div class="text">
+                    {{ item.companyName }}
+                  </div>
+                  <div @click="change(index)" class="x">
+                    <i class="iconfont icon-x"></i>
+                  </div>
+                </div>
+                <CzItem
+                  ref="czItem"
+                  :list="item"
+                  :changeStyle="true"
+                  :stateType="stateType"
+                />
+              </div>
+              <template slot="reference">
+                <div class="flex">
+                  <div :title="item.companyName" class="left zzz">
+                    {{ item.companyName }}
+                  </div>
+                  <div
+                    :class="`one-${item.state}`"
+                    class="state"
+                    @click="change"
+                  >
+                    {{ typeState[item.state - 1] }}
+                  </div>
+                </div>
+              </template>
+
+              <!-- <el-button slot="reference">click 激活</el-button> -->
+            </el-popover>
+            <!-- <div :title="item.companyName" class="left zzz">
              {{ item.companyName }}
            </div>
            <div :class="`one-${item.state}`" class="state">
              {{ typeState[item.state - 1] }}
-            </div>
+            </div> -->
          </div>
        </div>
      </template>
@@ -63,6 +103,7 @@ export default {
  data() {
    return {
      carHide: true,
+      visible: true,
      addStartNum: 3,
      filterList: [
        { value: "正常", count: 100, state: 1 },
@@ -72,25 +113,148 @@ export default {
      typeState: ["正常", "报警", "离线"],
      deviceTypeArr: [1, 2, 3],
      czList: [
-        { companyName: "河北泽宏股份储罐", state: 1, show: true },
-        { companyName: "河北泽宏股份储罐", state: 2, show: true },
-        { companyName: "河北泽宏股份储罐", state: 3, show: true },
-        { companyName: "河北泽宏股份储罐", state: 1, show: true },
-        { companyName: "河北泽宏股份储罐", state: 2, show: true },
-        { companyName: "河北泽宏股份储罐", state: 3, show: true },
-        { companyName: "河北泽宏股份储罐", state: 1, show: true },
-        { companyName: "河北泽宏股份储罐", state: 2, show: true },
-        { companyName: "河北泽宏股份储罐", state: 3, show: true },
-        { companyName: "河北泽宏股份储罐", state: 1, show: true },
-        { companyName: "河北泽宏股份储罐", state: 2, show: true },
-        { companyName: "河北泽宏股份储罐", state: 3, show: true },
-        { companyName: "河北泽宏股份储罐", state: 1, show: true },
-        { companyName: "河北泽宏股份储罐", state: 2, show: true },
-        { companyName: "河北泽宏股份储罐", state: 3, show: true },
-        { companyName: "河北泽宏股份储罐", state: 1, show: true },
-        { companyName: "河北泽宏股份储罐", state: 2, show: true },
-        { companyName: "河北泽宏股份储罐", state: 3, show: true },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: true,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: false,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: false,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: false,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份储罐",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
      ],
+      stateType: {
+        1: "正常",
+        2: "报警",
+        3: "离线",
+      },
    };
  },
  computed: {
@@ -106,6 +270,9 @@ export default {
    hide() {
      this.carHide = !this.carHide;
    },
+    change(index) {
+      this.$refs["popo" + index][0].showPopper = false;
+    },
    // 根据父子元素自动计算是否需要添加值start
    changeAddStartNum() {
      const czItem = this.$refs.czItem;
@@ -227,12 +394,12 @@ $active: #06d7b1 !important;
  margin-left: 35px;

  &.start {
-    justify-content: flex-start;
+    // justify-content: flex-start;
    & > div {
      // margin-right: 50px;
    }
  }
-  & > div {
+  .com {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
@@ -240,10 +407,12 @@ $active: #06d7b1 !important;
    width: 15%;
    min-width: 190px;
    margin-right: 1.5%;
+
    .left {
      margin-right: 4px;
      font-size: 14px;
      max-width: 112px;
+      cursor: pointer;
    }
    .state {
      font-size: 8px;
@@ -270,8 +439,38 @@ $active: #06d7b1 !important;
    }
  }
 }
+
 .flex {
  display: flex;
-  justify-content: flex-start;
+  // justify-content: flex-start;
+}
+.cz-item {
+  .title {
+    display: flex;
+    justify-content: space-between;
+    // height: 20px;
+    border-bottom: 1px solid #e6ebf5;
+    box-sizing: border-box;
+    padding: 13px 0px 6px 10px;
+    .text {
+      font-size: 13px;
+      color: #666666;
+      padding-left: 10px;
+    }
+    .x {
+      color: #666666;
+      padding-right: 10px;
+      cursor: pointer;
+      .iconfont {
+        font-size: 12px;
+        &::hover {
+          color: #000000;
+        }
+      }
+    }
+  }
+}
+.paddingnone {
+  padding: 0;
 }
 </style>
\ No newline at end of file
--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
+++ b/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
 <!--
 * @Author: your name
 * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-28 14:33:23
+ * @LastEditTime: 2022-03-28 18:04:53
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
@@ -27,7 +27,11 @@
      </template>
      <template #container>
        <div class="container" :class="{ start: getShowNum }">
-          <div v-for="(item,index) in czList" :key="item.deviceName+index" v-show="item.show">
+          <div
+            v-for="(item, index) in czList"
+            :key="item.deviceName + index"
+            v-show="item.show"
+          >
            <CzItem ref="czItem" :list="item" v-if="item.show" />
          </div>
        </div>
@@ -73,7 +77,7 @@ export default {
        },
        {
          deviceName: "门站",
-          state: 1,
+          state: 2,
          a: 25,
          b: 56,
          c: 54,
@@ -144,6 +148,7 @@ export default {
          type: 4,
        },
      ],
+    
    };
  },
  computed: {
@@ -247,6 +252,10 @@ export default {
    margin-left: 1%;
    width: 24%;
    min-width: 295px;
+    border: 1px solid #e6ebf5;
+    border-radius: 4px;
+
+    box-sizing: border-box;
  }
 }
 .flex {

--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
+++ b/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
 <!--
 * @Author: your name
 * @Date: 2022-03-26 10:27:00
- * @LastEditTime: 2022-03-28 13:59:11
+ * @LastEditTime: 2022-03-28 18:03:04
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
 -->

 <template>
-  <div class="czitem flex">
+  <div class="czitem flex" :class="{nopadding:changeStyle}">
    <div class="left">
      <div class="img">
-        <div class="state">
-          {{ list.state == "0" ? "正常" : "报警" }}
+        <div class="state" :class="{active1:list.state=='1',active2:list.state=='2',active3:list.state=='3'}">
+          {{ stateType[list.state]  }}
        </div>
        <img v-if="list.src" src="" alt="" />
        暂无图片
      </div>
-      <div v-unValue class="device-name zzz">{{ list.deviceName }}</div>
+      <div v-if="!changeStyle" v-unValue class="device-name zzz">{{ list.deviceName }}</div>
    </div>

    <div class="right">
-      <div>温度：<span :class="{active:list.a>50}">{{list.a}}°C</span></div>
-      <div>水温：<span :class="{active:list.b>50}">{{list.b}}°C</span></div>
-      <div>压力：<span :class="{active:list.c>50}">{{list.c}}Pa</span></div>
-      <div>湿度：<span :class="{active:list.d>50}">{{list.d}}°C</span></div>
-      <div>水温：<span :class="{active:list.e>50}">{{list.e}}°C</span></div>
+      <div>
+        温度：<span :class="{ active: list.a > 50 }">{{ list.a }}°C</span>
+      </div>
+      <div>
+        水温：<span :class="{ active: list.b > 50 }">{{ list.b }}°C</span>
+      </div>
+      <div>
+        压力：<span :class="{ active: list.c > 50 }">{{ list.c }}Pa</span>
+      </div>
+      <div>
+        湿度：<span :class="{ active: list.d > 50 }">{{ list.d }}°C</span>
+      </div>
+      <div>
+        水温：<span :class="{ active: list.e > 50 }">{{ list.e }}°C</span>
+      </div>
    </div>
  </div>
 </template>
@@ -37,6 +47,16 @@ export default {
    list: {
      type: Object,
    },
+    // 从外部传一个值，来改变一些样式
+    changeStyle:{
+      type:Boolean,
+      default:false,
+    },
+    stateType:{
+      type:Object,
+      default:()=>({"1":"正常",2:"报警"})
+    }
+
  },
 };
 </script>
@@ -48,8 +68,6 @@ export default {
  min-height: 191px;
  padding: 14px 12px 18px 25px;
  box-sizing: border-box;
-  border-radius: 4px;
-  border: 1px solid #e6ebf5;
  // display: flex;
  .left {
    // margin-right: 48px;
@@ -75,6 +93,15 @@ export default {
        line-height: 28px;
        color: #06d7b1;
        font-size: 14px;
+        &.active1 {
+          color: #06d7b1;
+        }
+        &.active2 {
+          color: #FF6C68;
+        }
+        &.active3 {
+          color: #bbbbbb;
+        }
      }
      img {
        width: 100%;
@@ -92,7 +119,7 @@ export default {
    min-width: 80px;
    & > div {
      margin-bottom: 10px;
-      span.active{
+      span.active {
        color: red;
      }
    }
@@ -102,4 +129,8 @@ export default {
  display: flex;
  justify-content: space-between;
 }
+.nopadding{
+  padding-bottom:0 !important;
+  min-height:170px;
+}
 </style>
\ No newline at end of file
--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue
+++ b/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue
 <!--
 * @Author: your name
 * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-28 13:46:49
+ * @LastEditTime: 2022-03-28 15:03:20
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
@@ -119,7 +119,7 @@ export default {
    height: 60px !important;
  }
  .title {
-    margin-bottom: 12px;
+    margin-bottom: 16px;
    margin-left: 40px;
    .left {
      display: flex;

--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
+++ b/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
 <!--
 * @Author: your name
 * @Date: 2022-03-25 13:46:23
- * @LastEditTime: 2022-03-28 13:50:56
+ * @LastEditTime: 2022-03-28 15:05:04
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
@@ -48,5 +48,6 @@ export default {
 .chars-data {
  // padding: 26px 108px 0 88px;
  padding: 20px;
+  padding-right: 50px;
 }
 </style>
\ No newline at end of file
--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
+++ b/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
 <!--
 * @Author: your name
 * @Date: 2022-03-08 17:28:57
- * @LastEditTime: 2022-03-28 13:54:22
+ * @LastEditTime: 2022-03-28 17:20:55
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
@@ -32,7 +32,7 @@ export default {
    return {
      // currentTabComponent: tabledata,
      changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
-      isCom: 0,
+      isCom: 1,
    };
  },
  computed: {
@@ -54,7 +54,7 @@ export default {
  display: flex;
  justify-content: right;
  margin-right: 37px;
-  padding-top: 38px;
+  padding-top: 15px;
  div {
    cursor: pointer;
    padding: 4px;