配饰巡检巡查，企业数据监控，考核评价页面。

gassafetyprogress-web/src/assets/styles/zehong.scss

@@ -4,61 +4,78 @@
  */
 
  /** 基础通用 **/
-.pt5 {
+ .pt5 {
  	padding-top: 5px;
-}
-.pr5 {
+ }
+
+ .pr5 {
  	padding-right: 5px;
-}
-.pb5 {
+ }
+
+ .pb5 {
  	padding-bottom: 5px;
-}
-.mt5 {
+ }
+
+ .mt5 {
  	margin-top: 5px;
-}
-.mr5 {
+ }
+
+ .mr5 {
  	margin-right: 5px;
-}
-.mb5 {
+ }
+
+ .mb5 {
  	margin-bottom: 5px;
-}
-.mb8 {
+ }
+
+ .mb8 {
  	margin-bottom: 8px;
-}
-.ml5 {
+ }
+
+ .ml5 {
  	margin-left: 5px;
-}
-.mt10 {
+ }
+
+ .mt10 {
  	margin-top: 10px;
-}
-.mr10 {
+ }
+
+ .mr10 {
  	margin-right: 10px;
-}
-.mb10 {
+ }
+
+ .mb10 {
  	margin-bottom: 10px;
-}
-.ml0 {
+ }
+
+ .ml0 {
  	margin-left: 10px;
-}
-.mt20 {
+ }
+
+ .mt20 {
  	margin-top: 20px;
-}
-.mr20 {
+ }
+
+ .mr20 {
  	margin-right: 20px;
-}
-.mb20 {
+ }
+
+ .mb20 {
  	margin-bottom: 20px;
-}
-.m20 {
+ }
+
+ .m20 {
  	margin-left: 20px;
-}
+ }
 
-.el-dialog:not(.is-fullscreen){
+ .el-dialog:not(.is-fullscreen) {
  	margin-top: 6vh !important;
-}
+ }
+
+ .el-table {
 
-.el-table {
-	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
+ 	.el-table__header-wrapper,
+ 	.el-table__fixed-header-wrapper {
  		th {
  			word-break: break-word;
  			background-color: #f8f8f9;
@@ -67,155 +84,156 @@
  			font-size: 13px;
  		}
  	}
+
  	.el-table__body-wrapper {
-		.el-button [class*="el-icon-"] + span {
+ 		.el-button [class*="el-icon-"]+span {
  			margin-left: 1px;
  		}
  	}
-}
+ }
 
-/** 表单布局 **/
-.form-header {
-    font-size:15px;
-	color:#6379bb;
-	border-bottom:1px solid #ddd;
-	margin:8px 10px 25px 10px;
-	padding-bottom:5px
-}
+ /** 表单布局 **/
+ .form-header {
+ 	font-size: 15px;
+ 	color: #6379bb;
+ 	border-bottom: 1px solid #ddd;
+ 	margin: 8px 10px 25px 10px;
+ 	padding-bottom: 5px
+ }
 
-/** 表格布局 **/
-.pagination-container {
+ /** 表格布局 **/
+ .pagination-container {
  	position: relative;
  	height: 25px;
  	margin-bottom: 10px;
  	margin-top: 15px;
  	padding: 10px 20px !important;
-}
+ }
 
-/* tree border */
-.tree-border {
+ /* tree border */
+ .tree-border {
  	margin-top: 5px;
  	border: 1px solid #e5e6e7;
  	background: #FFFFFF none;
-    border-radius:4px;
-}
+ 	border-radius: 4px;
+ }
 
-.pagination-container .el-pagination {
+ .pagination-container .el-pagination {
  	right: 0;
  	position: absolute;
-}
+ }
 
-.el-table .fixed-width .el-button--mini {
+ .el-table .fixed-width .el-button--mini {
  	padding-left: 0;
  	padding-right: 0;
  	width: inherit;
-}
+ }
 
-.el-tree-node__content > .el-checkbox {
+ .el-tree-node__content>.el-checkbox {
  	margin-right: 8px;
-}
+ }
 
-.list-group-striped > .list-group-item {
+ .list-group-striped>.list-group-item {
  	border-left: 0;
  	border-right: 0;
  	border-radius: 0;
  	padding-left: 0;
  	padding-right: 0;
-}
+ }
 
-.list-group {
+ .list-group {
  	padding-left: 0px;
  	list-style: none;
-}
+ }
 
-.list-group-item {
+ .list-group-item {
  	border-bottom: 1px solid #e7eaec;
  	border-top: 1px solid #e7eaec;
  	margin-bottom: -1px;
  	padding: 11px 0px;
  	font-size: 13px;
-}
+ }
 
-.pull-right {
+ .pull-right {
  	float: right !important;
-}
+ }
 
-.el-card__header {
+ .el-card__header {
  	padding: 14px 15px 7px;
  	min-height: 40px;
-}
+ }
 
-.el-card__body {
+ .el-card__body {
  	padding: 15px 20px 20px 20px;
-}
+ }
 
-.card-box {
+ .card-box {
  	padding-right: 15px;
  	padding-left: 15px;
  	margin-bottom: 10px;
-}
+ }
 
-/* button color */
-.el-button--cyan.is-active,
-.el-button--cyan:active {
+ /* button color */
+ .el-button--cyan.is-active,
+ .el-button--cyan:active {
  	background: #20B2AA;
  	border-color: #20B2AA;
  	color: #FFFFFF;
-}
+ }
 
-.el-button--cyan:focus,
-.el-button--cyan:hover {
+ .el-button--cyan:focus,
+ .el-button--cyan:hover {
  	background: #48D1CC;
  	border-color: #48D1CC;
  	color: #FFFFFF;
-}
+ }
 
-.el-button--cyan {
+ .el-button--cyan {
  	background-color: #20B2AA;
  	border-color: #20B2AA;
  	color: #FFFFFF;
-}
+ }
 
-/* text color */
-.text-navy {
+ /* text color */
+ .text-navy {
  	color: #1ab394;
-}
+ }
 
-.text-primary {
+ .text-primary {
  	color: inherit;
-}
+ }
 
-.text-success {
+ .text-success {
  	color: #1c84c6;
-}
+ }
 
-.text-info {
+ .text-info {
  	color: #23c6c8;
-}
+ }
 
-.text-warning {
+ .text-warning {
  	color: #f8ac59;
-}
+ }
 
-.text-danger {
+ .text-danger {
  	color: #ed5565;
-}
+ }
 
-.text-muted {
+ .text-muted {
  	color: #888888;
-}
+ }
 
-/* image */
-.img-circle {
+ /* image */
+ .img-circle {
  	border-radius: 50%;
-}
+ }
 
-.img-lg {
+ .img-lg {
  	width: 120px;
  	height: 120px;
-}
+ }
 
-.avatar-upload-preview {
+ .avatar-upload-preview {
  	position: absolute;
  	top: 50%;
  	transform: translate(50%, -50%);
@@ -224,16 +242,23 @@
  	border-radius: 50%;
  	box-shadow: 0 0 4px #ccc;
  	overflow: hidden;
-}
+ }
 
-/* 拖拽列样式 */
-.sortable-ghost{
+ /* 拖拽列样式 */
+ .sortable-ghost {
  	opacity: .8;
-	color: #fff!important;
-	background: #42b983!important;
-}
+ 	color: #fff !important;
+ 	background: #42b983 !important;
+ }
 
-.top-right-btn {
+ .top-right-btn {
  	position: relative;
  	float: right;
-}
+ }
+
+ @media (max-width: 1100px) {
+ 	.amap-info {
+ 		transform-origin: 5% -100% !important;
+ 		transform: scale(.6) !important;
+ 	}
+ }
\ No newline at end of file

gassafetyprogress-web/src/views/bigWindow/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2022-08-24 11:23:42
+ * @LastEditTime: 2022-08-24 13:43:01
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
@@ -739,13 +739,12 @@ export default {
 .typelist-divZ {
   width: 400px;
   // height: 30px;
-  z-index: 9999;
+  z-index: 9998;
   position: fixed;
   top: 85px;
   left: 50%;
   margin-left: -200px;
   .list {
-    z-index: 9999;
     float: left;
     margin-left: 15px;
     color: #fff;

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCardZ.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 17:15:31
+ * @LastEditTime: 2022-03-29 10:09:52
+ * @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">
+    <my-collapse
+      title="场站"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
+      <template v-slot:chackbox>
+        <FilterVue
+          :filterList="filterList"
+          @fliterTypeChange="fliterTypeChange"
+        />
+      </template>
+      <template #container>
+        <div class="container" :class="{ start: getShowNum }">
+          <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>
+      </template>
+    </my-collapse>
+  </div>
+</template>
+
+<script>
+import MyCollapse from "./MyCollapse";
+import CzItem from "./CzItem";
+import FilterVue from "./FilterVue";
+
+export default {
+  // 场站
+  components: {
+    MyCollapse,
+    CzItem,
+    FilterVue,
+  },
+  data() {
+    return {
+      carHide: true,
+      addStartNum: 3,
+      filterList: [
+        { value: "全部", count: 6, type: "all" },
+        { value: "加气站", count: 2, type: 1 },
+        { value: "门站", count: 0, type: 2 },
+        { value: "调压站", count: 0, type: 3 },
+        { value: "储备站", count: 0, type: 4 },
+        { value: "气化站", count: 4, type: 5 },
+      ],
+      deviceTypeArr: [1, 2, 3, 4],
+      czList: [
+        {
+          deviceName: "中诚燃气门站",
+          state: 1,
+          a: 12,
+          b: 57.7,
+          c: 0.46,
+          d: 54.2,
+          // e: 56,
+          image: "",
+          show: true,
+          type: 1,
+        },
+        {
+          deviceName: "平山中燃气站",
+          state: 1,
+          a: 13.1,
+          b: 64.3,
+          c: 0.51,
+          d: 48.2,
+          // e: 56,
+          image: "",
+          show: true,
+          type: 1,
+        },
+        // {
+        //   deviceName: "门站",
+        //   state: 2,
+        //   a: 25,
+        //   b: 56,
+        //   c: 54,
+        //   d: 15,
+        //   e: 56,
+        //   image: "",
+        //   show: true,
+        //   type: 2,
+        // },
+        // {
+        //   deviceName: "调压站",
+        //   state: 1,
+        //   a: 25,
+        //   b: 56,
+        //   c: 54,
+        //   d: 15,
+        //   e: 56,
+        //   image: "",
+        //   show: true,
+        //   type: 3,
+        // },
+        // {
+        //   deviceName: "储备站",
+        //   state: 1,
+        //   a: 25,
+        //   b: 56,
+        //   c: 54,
+        //   d: 15,
+        //   e: 56,
+        //   image: "",
+        //   show: true,
+        //   type: 4,
+        // },
+        {
+          deviceName: "隆和气化站",
+          state: 1,
+          a: 15.2,
+          b: 52.9,
+          c: 0.49,
+          d: 54,
+          // e: 56,
+          image: "",
+          show: true,
+          type: 5,
+        },
+        {
+          deviceName: "温塘气化站",
+          state: 1,
+          a: 12.6,
+          b: 61.8,
+          c: 0.47,
+          d: 49,
+          // e: 56,
+          image: "",
+          show: true,
+          type: 5,
+        },
+        {
+          deviceName: "93701部队气化站",
+          state: 1,
+          a: 14.6,
+          b: 56.5,
+          c: 0.58,
+          d: 47.6,
+          // e: 56,
+          image: "",
+          show: true,
+          type: 5,
+        },
+        {
+          deviceName: "隆城绿都气化站",
+          state: 1,
+          a: 12.5,
+          b: 54,
+          c: 0.52,
+          d: 50,
+          // e: 56,
+          image: "",
+          show: true,
+          type: 5,
+        },
+        // {
+        //   deviceName: "储备站",
+        //   state: 1,
+        //   a: 25,
+        //   b: 56,
+        //   c: 54,
+        //   d: 15,
+        //   e: 56,
+        //   image: "",
+        //   show: true,
+        //   type: 4,
+        // },
+      ],
+    };
+  },
+  computed: {
+    // 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
+    getShowNum() {
+      return this.czList.filter((item) => item.show).length < this.addStartNum;
+    },
+  },
+  mounted() {
+    this.changeAddStartNum();
+  },
+  methods: {
+    hide() {
+      this.carHide = !this.carHide;
+      // this.myCollapse();
+    },
+    // 根据父子元素自动计算是否需要添加值start
+    changeAddStartNum() {
+      const czItem = this.$refs.czItem;
+      let czItemWidth;
+      // 组件有可能是一个数组，所以要这样判断
+      if (Array.isArray(czItem)) {
+        const { width } = czItem[0].$el.getBoundingClientRect();
+        czItemWidth = width;
+      } else {
+        const { width } = czItem.$el.getBoundingClientRect();
+        czItemWidth = width;
+      }
+      // 取出collap的宽
+      const { width: CollapseWidth } =
+        this.$refs.myCollapse.$el.getBoundingClientRect();
+      // 得到最小的承载数量
+      this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
+    },
+    //过滤选择
+    fliterTypeChange(data) {
+      this.filter([...data]);
+      // 改变大小,因为动画原因加个延迟
+      // this.$nextTick(() => {
+      //   setTimeout(()=>{
+      //     this.myCollapse()
+      //   }, 300);
+      // });
+    },
+    myCollapse() {
+      // this.$refs.myCollapse.getHeight();
+    },
+    // 过滤对象
+    filter(arr) {
+      this.czList.forEach((item) => {
+        const { type } = item;
+        if (arr.includes(type)) {
+          item.show = true;
+        } else {
+          item.show = false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.container {
+  width: 100%;
+  flex-wrap: wrap;
+  display: flex;
+  &.start {
+    justify-content: flex-start;
+    & > div {
+      // margin-right: 50px;
+    }
+  }
+  & > div {
+    margin-bottom: 20px;
+    margin-left: 1%;
+    width: 24%;
+    min-width: 295px;
+    border: 1px solid #e6ebf5;
+    border-radius: 4px;
+
+    box-sizing: border-box;
+  }
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-29 09:41:23
- * @LastEditTime: 2022-03-29 11:08:25
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-08-25 17:06:40
+ * @LastEditors: 纪泽龙 jizelong@qq.com
  * @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/Filter.vue
 -->
@@ -14,7 +14,7 @@
         <span
           class="text"
           :class="{
-            active: deviceTypeArr.length == filterList.length - 1
+            active: deviceTypeArr.length == filterList.length - 1,
           }"
           @click="fliterTypeChange(item)"
           >{{ item.value }}
@@ -83,6 +83,11 @@ export default {
 .fliter-vue {
   display: flex;
 }
+@media (max-width: 1100px) {
+  .filter {
+    margin-right: 20px !important;
+  }
+}
 .filter {
   margin-right: 30px;
   margin-top: 5px;
@@ -112,7 +117,7 @@ export default {
         font-size: 10px;
         position: absolute;
         left: -12px;
-        color: rgba(0, 0, 0, .5);
+        color: rgba(0, 0, 0, 0.5);
       }
     }
     &.active {

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCard.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 13:46:23
- * @LastEditTime: 2022-04-28 15:59:44
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-08-25 15:32:17
+ * @LastEditors: 纪泽龙 jizelong@qq.com
  * @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
 -->

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCardZ.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 13:46:23
+ * @LastEditTime: 2022-08-25 16:27:49
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @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
+-->
+<template>
+  <div class="">
+    <div class="top-card flex">
+      <div
+        class="box-card"
+        v-for="(item, index) in cardList"
+        :key="item.deviceName"
+      >
+        <div class="top flex">
+          <div class="top-left">
+            <span
+              class="iconfont"
+              :class="`icon-` + deviceIconList[index]"
+            ></span>
+            <span class="text">{{ item.deviceName }}</span>
+          </div>
+          <div class="top-right flex">
+            <span class="text">总数</span>
+            <span class="count">{{ item.count }}</span>
+          </div>
+        </div>
+
+        <div class="middle flex">
+          <div class="first">正常</div>
+          <!-- 2是探测器，探测器只有报警，没有高低报 -->
+          <template v-if="index != 2">
+            <div>高报</div>
+            <div>低报</div>
+          </template>
+          <template v-else>
+            <div>报警</div>
+          </template>
+          <div class="last">离线数</div>
+        </div>
+
+        <div class="bottom flex">
+          <div class="first" v-if="index != 2">8</div>
+          <div class="first" v-if="index == 2">1238</div>
+          <!-- 2是探测器，探测器只有报警，没有高低报 -->
+          <template v-if="index == 0">
+            <div>2</div>
+            <div>1</div>
+          </template>
+          <template v-if="index == 1">
+            <div>0</div>
+            <div>0</div>
+          </template>
+          <template v-if="index == 2">
+            <div>0</div>
+          </template>
+          <div class="last" v-if="index != 1">0</div>
+          <div class="last" v-if="index == 1">1</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "charsData",
+  props: {
+    cardList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      deviceIconList: ["ylb", "llj", "tcq"],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.top-card {
+  margin-bottom: 22px;
+  & > div {
+    flex: 1;
+    margin-right: 20px;
+    height: 212px;
+    background: #ffffff;
+    box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid #e6ebf5;
+    box-sizing: border-box;
+    // padding: 34px 40px 38px;
+    padding: 34px 0 38px;
+    .top {
+      font-size: 15px;
+      margin-bottom: 46px;
+      padding: 0 30px;
+      // justify-content:space-between;
+      .top-left {
+        color: #1890ff;
+        .iconfont {
+          font-size: 20px;
+          margin-right: 4px;
+        }
+        .text {
+          font-weight: 500;
+        }
+      }
+
+      .top-right {
+        // padding-top: 5px;
+        font-size: 15px;
+
+        .text {
+          font-size: 16px;
+          font-weight: 500;
+          margin-right: 2px;
+          padding-top: 3px;
+        }
+        .count {
+          color: #1890ff;
+          font-size: 22px;
+          letter-spacing: 1px;
+        }
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .middle,
+  .bottom {
+    // justify-content: space-around;
+    & > div {
+      // flex: 1;
+      text-align: center;
+      font-size: 16px;
+      flex: 1;
+      &.first {
+        // text-align: left;
+      }
+      &.last {
+        // text-align: right;
+      }
+    }
+  }
+  .middle {
+    margin-bottom: 20px;
+
+    & > div {
+      font-weight: 500;
+    }
+  }
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 13:46:23
- * @LastEditTime: 2022-03-28 15:05:04
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-08-25 17:02:07
+ * @LastEditors: 纪泽龙 jizelong@qq.com
  * @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
 -->
 <template>
   <div class="chars-data">
-    <TopCard :cardList="cardList"/>
-    <CzCard/>
+    <TopCard v-if="windowInnerWidth>1100" :cardList="cardList"/>
+    <TopCardZ v-else :cardList="cardList"/>
+    <CzCard v-if="windowInnerWidth>1100" />
+    <CzCardZ v-else />
     <Cg/>
     <Fmj/>
     <Tyx/>
@@ -18,7 +20,9 @@
 
 <script>
 import TopCard from "./TopCard";
+import TopCardZ from "./TopCardZ";
 import CzCard from "./CzCard";
+import CzCardZ from "./CzCardZ";
 import Cg from "./Cg";
 import Fmj from "./Fmj";
 import Tyx from "./Tyx";
@@ -26,7 +30,9 @@ export default {
   name: "charsData",
   components: {
     TopCard,
+    TopCardZ,
     CzCard,
+    CzCardZ,
     Cg,
     Fmj,
     Tyx
@@ -39,8 +45,12 @@ export default {
         { deviceName: "探测器", count: 1238 },
       ],
       deviceIconList: ["ylb", "llj", "tcq"],
+      windowInnerWidth:0,
     };
   },
+  created() {
+    this.windowInnerWidth = window.innerWidth;
+  },
 };
 </script>
 

gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-08 17:28:57
- * @LastEditTime: 2022-03-28 17:20:55
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-08-25 15:29:31
+ * @LastEditors: 纪泽龙 jizelong@qq.com
  * @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
 -->
@@ -37,7 +37,7 @@ export default {
   },
   computed: {
     currentTabComponent() {
-      return this.isCom == 0 ? tabledata : charsData;
+      return this.isCom === 0 ? tabledata : charsData;
     },
   },
   methods: {

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/LeftZ.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 15:07:47
+ * @LastEditTime: 2022-08-25 11:04:17
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
+-->
+<template>
+  <div class="charsCom all-flex-h">
+    <div class="title">巡检巡查计划</div>
+    <div class="two all-flex">
+      <div class="left">
+        <div class="first">
+          <span class="text">巡检年度计划</span>
+          <span>23次</span>
+        </div>
+        <div class="second all-flex">
+          <div class="left">泄露监测</div>
+          <div class="right">防腐层监测</div>
+        </div>
+        <div class="third all-flex">
+          <div class="left">15次</div>
+          <div class="right">8次</div>
+        </div>
+        <div class="first fourth">
+          <div class="">泄漏检测完成比例</div>
+        </div>
+
+        <div class="fifth">
+          <div class="contant">
+            <Chars></Chars>
+          </div>
+        </div>
+      </div>
+
+      <div class="right">
+        <div class="first">
+          <span class="text">巡检完成情况</span>
+          <span>18次</span>
+        </div>
+        <div class="second all-flex">
+          <div class="left">泄露监测</div>
+          <div class="right">防腐层监测</div>
+        </div>
+        <div class="third all-flex">
+          <div class="left">10次</div>
+          <div class="right">8次</div>
+        </div>
+        <div class="first fourth">
+          <div class="">防腐层检测完成比例</div>
+        </div>
+        <div class="fifth">
+          <div class="contant">
+            <Chars color="#00C3F1"></Chars>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chars from "@/components/allCharsCom/Chars";
+export default {
+  components: {
+    Chars,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.charsCom {
+  width: 100%;
+  height: 100%;
+  color: #333333;
+}
+.title {
+  text-align: center;
+  font-size: 18px;
+  margin-bottom: 7px;
+}
+.two {
+  flex: 1;
+  > .left {
+    // margin-right: 70px;
+  }
+  > .right {
+  }
+  > div {
+    font-size: 10px;
+    width: 50%;
+    flex: 1;
+    overflow: hidden;
+    // display: flex;
+    // flex-direction: column;
+  }
+  .left,
+  .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .first {
+      margin-bottom: 6px;
+      text-align: left;
+      .text {
+        display: inline-block;
+        margin-right: 8px;
+      }
+    }
+    .second {
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      box-sizing: border-box;
+      box-shadow: 0px 0px 3px 1px #dddddd;
+      margin-bottom: 10px;
+      > div {
+        // flex: 1;
+        text-align: center;
+        font-size: 10px;
+
+        &.left {
+          color: #1d8cf3;
+        }
+        &.right {
+          color: #00c3f1;
+        }
+      }
+    }
+    .third {
+      text-align: center;
+      // width: 213px;
+      width: 100%;
+      margin-bottom: 10px;
+    }
+    .fifth {
+      flex: 1;
+      // background: red;
+      padding-top: 5px;
+      .contant {
+        width: 120px;
+        height: 94px;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+</style>

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/MiddleZ.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 15:07:47
+ * @LastEditTime: 2022-08-25 15:07:26
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
+-->
+<template>
+  <div class="charsCom all-flex-h">
+    <div class="title">隐患整改</div>
+    <div class="two all-flex">
+      <div class="left">
+        <div class="first">
+          <span class="text">隐患发现情况</span>
+          <span>20次</span>
+        </div>
+        <div class="second all-flex">
+          <div class="left">隐患总数</div>
+          <div class="right">隐患已整改数</div>
+        </div>
+        <div class="third all-flex">
+          <div class="left">13次</div>
+          <div class="right">7次</div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="first">
+          <span class="text">隐患整改率</span>
+        </div>
+        <div class="chars-box">
+          <Chars color="#604AFF"></Chars>
+        </div>
+      </div>
+    </div>
+
+    <div class="three all-flex-h">
+      <div class="first">隐患原因</div>
+      <div ref="myChartWidth" class="chars-box">
+        <Chars :options="bottomOptions()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chars from "@/components/allCharsCom/Chars";
+export default {
+  components: {
+    Chars,
+  },
+  data() {
+    return {
+      bottomData: [
+        [
+          { name: "裂缝", value: 8, color: "#604AFF" },
+          { name: "管道称重", value: 16, color: "#FFC337" },
+          { name: "其他", value: 13, color: "#86FF5B" },
+          { name: "腐蚀", value: 7, color: "#03C4F1" },
+          { name: "漏气", value: 5, color: "#1F8DF3" },
+        ],
+      ],
+    };
+  },
+  methods: {
+    bottomOptions() {
+      return {
+        series: this.bottomData.map((data, idx) => {
+          const rich = {};
+          data
+            .map((item) => ({
+              fontsize: 12,
+              color: item.color,
+            }))
+            .forEach((item, index) => {
+              rich[`dataIndex${index}`] = item;
+            });
+
+          return {
+            type: "pie",
+            radius: ["68%", "80%"],
+            color: data.map((item) => item.color),
+            itemStyle: {
+              borderWidth: 2,
+              borderRadius: 10,
+              borderColor: "#fff",
+            },
+            label: {
+              alignTo: "edge",
+              // formatter: "{name|{b}}\n{num|{c} 个}",
+              formatter: (parm) => {
+                return `{dataIndex${parm.dataIndex}|${parm.data.name}}\n{dataIndex${parm.dataIndex}|${parm.data.value}}`;
+              },
+              minMargin: 5,
+              edgeDistance: 10,
+              lineHeight: 15,
+              rich,
+            },
+            labelLine: {
+              length: 15,
+              length2: 0,
+              maxSurfaceAngle: 80,
+            },
+            labelLayout: (params) => {
+              const { width } = this.$refs.myChartWidth.getBoundingClientRect();
+              const isLeft = params.labelRect.x < width / 2;
+              const points = params.labelLinePoints;
+              console.log("points",points)
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points,
+              };
+            },
+            data: data,
+          };
+        }),
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.charsCom {
+  width: 100%;
+  height: 100%;
+  color: #333333;
+}
+.title {
+  text-align: center;
+  font-size: 18px;
+  margin-bottom: 7px;
+}
+.two {
+  // flex: 1;
+  > .left {
+    // margin-right: 70px;
+    margin-left:10px;
+    .first {
+      margin-bottom: 6px;
+      width: 150px;
+      font-size: 10px;
+    }
+    .second {
+      width: 140px;
+      height: 20px;
+      line-height: 20px;
+      box-sizing: border-box;
+      box-shadow: 0px 0px 3px 1px #dddddd;
+      margin-bottom: 10px;
+      font-size: 10px;
+      > div {
+        // flex: 1;
+        text-align: center;
+
+        &.left {
+          color: #1d8cf3;
+        }
+        &.right {
+          color: #00c3f1;
+        }
+      }
+    }
+    .third {
+      text-align: center;
+      width: 150px;
+      margin-bottom: 10px;
+      font-size: 10px;
+    }
+  }
+  > .right {
+    .first {
+      text-align: center !important;
+      font-size: 10px;
+    }
+    .chars-box {
+      width: 70px;
+      height: 70px;
+      margin: 0 auto;
+    }
+  }
+  > div {
+    font-size: 16px;
+    flex: 1;
+    // display: flex;
+    // flex-direction: column;
+  }
+  .left,
+  .right {
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: space-between;
+    .first {
+      text-align: left;
+      .text {
+        display: inline-block;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+.three {
+  font-size: 16px;
+  flex: 1;
+  // background: red;
+  .chars-box {
+    flex: 1;
+  }
+}
+</style>

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/RightZ.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 15:07:47
+ * @LastEditTime: 2022-08-25 15:15:32
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
+-->
+<template>
+  <div class="charsCom all-flex-h">
+    <div class="title">第三方施工情况</div>
+    <div class="two flex">
+      <div class="left">已备案</div>
+      <div class="middle">已完成</div>
+      <div class="right">进行中</div>
+    </div>
+    <div class="three flex">
+      <div class="left zzz">6</div>
+      <div class="middle zzz">4</div>
+      <div class="right zzz">2</div>
+    </div>
+
+    <div class="four all-flex-h">
+      <div class="top flex">
+        <div>施工单位</div>
+        <div>备案时间</div>
+        <div>施工描述</div>
+      </div>
+      <div class="scroll-wrapper">
+        <Scroll :dataList="arr">
+          <template v-slot="{ dataList }">
+           <ScroItem v-for="(item,index) in dataList" :key="item.companyName+index" :data="item" :index="index"/>
+          </template>
+        </Scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Scroll from "./Scroll";
+import ScroItem from "./ScroItem";
+export default {
+  components: {
+    Scroll,
+    ScroItem
+  },
+  data() {
+    return {
+      arr: [
+        {
+          companyName: "中燃祥科",
+          time: "2022-01-11 07:29",
+          text: "安装探头",
+        },
+        {
+          companyName: "河北泽宏",
+          time: "2022-01-13 07:29",
+          text: "安装管道",
+        },
+        {
+          companyName: "河北泽宏科技股份有限公司",
+          time: "2022-01-14 07:29",
+          text: "气体报警器",
+        },
+        {
+          companyName: "政府部门",
+          time: "2022-01-15 07:29",
+          text: "安装设备监控",
+        },
+        {
+          companyName: "中诚然气",
+          time: "2022-01-17 07:29",
+          text: "安装管道",
+        },
+        {
+          companyName: "中诚然气",
+          time: "2022-02-20 07:29",
+          text: "轻工路1号施工",
+        },
+        {
+          companyName: "中燃祥科",
+          time: "2022-02-21 07:29",
+          text: "轻工路1号施工",
+        },
+        {
+          companyName: "河北泽宏",
+          time: "2022-03-11 07:29",
+          text: "安装管道",
+        },
+        {
+          companyName: "河北泽宏",
+          time: "2022-04-16 07:29",
+          text: "安装设备监控",
+        },
+
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
+      ],
+    };
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.charsCom {
+  width: 100%;
+  height: 100%;
+}
+.title {
+  text-align: center;
+  font-size: 18px;
+  margin-bottom: 22px;
+}
+.two {
+  box-shadow: 0px 0px 3px 1px #dddddd;
+  height: 20px;
+  font-size: 10px;
+  margin-bottom: 10px;
+  > div {
+    line-height: 20px;
+    flex: 1;
+    text-align: center;
+    &.left {
+      color: #1f8df3;
+    }
+    &.middle {
+      flex: 1;
+      color: #03c4f1;
+    }
+    &.right {
+      color: #ffc337;
+    }
+  }
+}
+.three {
+  font-size: 10px;
+  margin-bottom: 5px;
+  > div {
+    flex: 1;
+    line-height: 24px;
+    text-align: center;
+  }
+}
+.four {
+  flex: 1;
+  font-size: 10px;
+  // 这个解决子元素overhidden失效问题
+  min-height: 0;
+  >.top {
+    background: rgba(24, 144, 255, 0.1);
+    height: 29px;
+    line-height: 29px;
+    > div {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  .scroll-wrapper {
+    // font-size: 14px;
+    flex: 1;
+    // 这个解决子元素overhidden失效问题
+    min-height: 0;
+    // background: red;
+    // overflow: hidden;
+    // position:relative;
+  }
+}
+</style>

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-11 14:11:04
- * @LastEditTime: 2022-04-14 10:45:52
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-08-25 15:24:33
+ * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
 -->
@@ -11,18 +11,22 @@
     <div class="wrapper flex-h">
       <div class="top flex">
         <div class="left">
-          <Left />
+          <Left v-if="windowInnerWidth > 1100" />
+          <LeftZ v-else />
         </div>
-        <div class="middle">
-          <Middle />
+        <div class="middle" :class="{ z: windowInnerWidth < 1100 }">
+          <Middle v-if="windowInnerWidth > 1100" />
+          <MiddleZ v-else />
         </div>
-        <div class="right">
-          <Right />
+        <div class="right" :class="{ z: windowInnerWidth < 1100 }">
+          <Right v-if="windowInnerWidth > 1100" />
+          <RightZ v-else />
         </div>
       </div>
       <div class="middle"></div>
       <div class="bottom">
-        <MapBottom/>
+        <MapBottom v-if="windowInnerWidth > 1100" />
+        <MapBottomZ v-else />
       </div>
     </div>
   </div>
@@ -30,24 +34,33 @@
 
 <script>
 import Left from "./components/Left";
+import LeftZ from "./components/LeftZ";
 import Middle from "./components/Middle";
+import MiddleZ from "./components/MiddleZ";
 import Right from "./components/Right";
+import RightZ from "./components/RightZ";
 import MapBottom from "./components/MapBottom";
+import MapBottomZ from "./components/MapBottomZ";
 export default {
   components: {
     Left,
+    LeftZ,
     Middle,
+    MiddleZ,
     Right,
-    MapBottom
+    RightZ,
+    MapBottom,
+    MapBottomZ
   },
   data() {
     return {
-
+      windowInnerWidth: 0,
     };
   },
-  mounted(){
-
-  }
+  created() {
+    this.windowInnerWidth = window.innerWidth;
+  },
+  mounted() {},
 };
 </script>
 
@@ -72,14 +85,24 @@ export default {
     .left {
       width: 36.5%;
       padding: 15px 24px 19px;
+      overflow: hidden;
     }
     .middle {
       width: 35.3%;
       padding: 15px 80px 19px 71px;
+      // padding: 15px 24px 19px;
+      overflow: hidden;
+      &.z {
+        padding: 15px 24px 19px;
+      }
     }
     .right {
       width: 25.2%;
       padding: 15px 29px;
+      overflow: hidden;
+      &.z {
+        padding: 15px 10px;
+      }
     }
     > div {
       // box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
@@ -87,15 +110,20 @@ export default {
       border-radius: 3px;
     }
   }
-  >.middle {
+  > .middle {
     margin: 5px 0;
-    background: repeating-linear-gradient(135deg, transparent, transparent 3px, #D6D6D6 3px, #D6D6D6 8px);
+    background: repeating-linear-gradient(
+      135deg,
+      transparent,
+      transparent 3px,
+      #d6d6d6 3px,
+      #d6d6d6 8px
+    );
     height: 2px;
   }
   .bottom {
     flex: 1;
     background-color: red;
-
   }
   > div {
     // height: 50%;