✨ feat(dashboard): 大屏素材准备

klp-ui/src/views/dashboard/indexs/right-center.vue

@@ -0,0 +1,163 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-03-01 15:51:43
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-09-29 15:12:46
+ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-bottom.vue
+-->
+<template>
+  <div class="right_bottom">
+    <dv-capsule-chart :config="config" style="width:100%;height:260px" />
+  </div>
+</template>
+
+<script>
+import { currentGET } from 'api/modules'
+export default {
+  data() {
+    return {
+      gatewayno: '',
+      config: {
+        showValue: true,
+        unit: "次",
+        data: []
+      },
+
+    };
+  },
+  created() {
+    this.getData()
+
+  },
+  computed: {
+  },
+  mounted() { },
+  beforeDestroy() {
+    this.clearData()
+  },
+  methods: {
+    clearData() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+    //轮询
+    switper() {
+      if (this.timer) {
+        return
+      }
+      let looper = (a) => {
+        this.getData()
+      };
+      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
+    },
+    getData() {
+      this.pageflag = true
+      // this.pageflag =false
+      currentGET('big7', { gatewayno: this.gatewayno }).then(res => {
+
+        if (!this.timer) {
+          console.log('报警排名', res);
+        }
+        if (res.success) {
+          this.config = {
+            ...this.config,
+            data: res.data
+          }
+          this.switper()
+        } else {
+          this.pageflag = false
+          this.srcList = []
+          this.$Message({
+            text: res.msg,
+            type: 'warning'
+          })
+        }
+      })
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.list_Wrap {
+  height: 100%;
+  overflow: hidden;
+  :deep(.kong)   {
+    width: auto;
+  }
+}
+
+.sbtxSwiperclass {
+  .img_wrap {
+    overflow-x: auto;
+  }
+
+}
+
+.right_bottom {
+  box-sizing: border-box;
+  padding: 0 16px;
+
+  .searchform {
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .searchform_item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      label {
+        margin-right: 10px;
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      button {
+        margin-left: 30px;
+      }
+
+      input {}
+    }
+  }
+
+  .img_wrap {
+    display: flex;
+    // justify-content: space-around;
+    box-sizing: border-box;
+    padding: 0 0 20px;
+    // overflow-x: auto;
+
+    li {
+      width: 105px;
+      height: 137px;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      // background: #84ccc9;
+      // border: 1px solid #ffffff;
+      overflow: hidden;
+      flex-shrink: 0;
+      margin: 0 10px;
+
+      img {
+        flex-shrink: 0;
+      }
+    }
+
+
+
+
+  }
+
+  .noData {
+    width: 100%;
+    line-height: 100px;
+    text-align: center;
+    color: rgb(129, 128, 128);
+
+  }
+}
+</style>