From 461b1d6319bd0bda4d74d41cf3d015d861a04f41 Mon Sep 17 00:00:00 2001
From: songwenxuan <1924103812@qq.com>
Date: Thu, 25 Jan 2024 14:36:05 +0800
Subject: [PATCH] =?UTF-8?q?cmt=E6=B8=AF=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/map/components/menjinCmt.vue     | 416 +++++++++++++
 src/views/map/components/qixiang.vue       |   3 +-
 src/views/map/dialog/index.vue             |  15 +-
 src/views/map/dialog/mkGateMachineCmt.vue  | 208 +++++++
 src/views/map/dialog/weatherstationCmt.vue | 669 +++++++++++++++++++++
 src/views/map/index.vue                    |  33 +-
 6 files changed, 1336 insertions(+), 8 deletions(-)
 create mode 100644 src/views/map/components/menjinCmt.vue
 create mode 100644 src/views/map/dialog/mkGateMachineCmt.vue
 create mode 100644 src/views/map/dialog/weatherstationCmt.vue

diff --git a/src/views/map/components/menjinCmt.vue b/src/views/map/components/menjinCmt.vue
new file mode 100644
index 0000000..c2a0170
--- /dev/null
+++ b/src/views/map/components/menjinCmt.vue
@@ -0,0 +1,416 @@
+<template>
+  <div class="menjin">
+    <div class="block1">
+      <layout-title title="设备在线情况"/>
+      <div class="options">
+        <div v-for="(item,index) in block1OptionsList" :key="index" class="option">
+          <div class="title active">{{ item.title }}</div>
+          <div class="circular">
+            <img :src="item.img" alt="">
+          </div>
+          <div class="label">
+            {{ item.label1 }}：<count-to :start-val="0" :end-val="item.count1" :duration="3600"/>
+          </div>
+          <div v-if="item.label2" class="label">
+            {{ item.label2 }}：<count-to :start-val="0" :end-val="item.count2" :duration="3600"/>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block2">
+      <layout-title title="堆料场进出数据"/>
+      <div class="options">
+        <div v-for="(item,index) in block2OptionsList" v-if="index != 1" :key="index" class="option">
+          <div class="title active">{{ item.title }}</div>
+          <div class="items">
+            <div v-for="(item1,index1) in item.list" :key="index1" class="item">
+              <div class="label">
+                {{ item1.label }}：<count-to :start-val="0" :end-val="item1.count" :duration="3600"/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block3">
+      <layout-title title="口门进出记录"/>
+      <div class="content">
+        <div class="options">
+          <div
+            v-for="(item,index) in block3OptionsList"
+            :key="index"
+            :class="['title', {active:index === block3OptionsIndex}]"
+            @click="block3OptionsClick(index)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="table">
+          <div class="tr">
+            <div class="td">卡口名称</div>
+            <div class="td">{{ block3OptionsIndex===0 ? '人员':'车牌' }}</div>
+            <div class="td">时间</div>
+            <div class="td">状态</div>
+          </div>
+          <div v-for="(item,index) in block3List" :key="index" class="tr">
+            <div class="td line1">{{ block3OptionsIndex===0 ? item.devName : item.ROADWAYNAME }}</div>
+            <div class="td">{{ block3OptionsIndex===0 ? item.personName : item.PLATENO }}</div>
+            <div class="td line1">{{ block3OptionsIndex===0 ? item.eventTime.substring(11) : item.CROSSTIME.substring(11,19) }}</div>
+            <div class="td">{{ item.inAndOutType === null ? (item.VEHICLEOUT === '0' ? '出' : '进') : (item.inAndOutType === '0' ? '出' : '进') }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import layoutTitle from './title.vue'
+import CountTo from 'vue-count-to'
+import { requestFN } from '@/utils/request'
+
+export default {
+  components: {
+    layoutTitle,
+    CountTo
+  },
+  data() {
+    return {
+      block1OptionsList: [
+        {
+          title: '人员闸机数',
+          img: require('../../../assets/map/menjin/ico1.png'),
+          label1: '在线数',
+          count1: 0
+          // label2: '离线数',
+          // count2: 0
+        },
+        {
+          title: '车辆闸机数',
+          img: require('../../../assets/map/menjin/ico2.png'),
+          label1: '在线数',
+          count1: 0
+          // label2: '离线数',
+          // count2: 0
+        },
+        {
+          title: '摄像头数',
+          img: require('../../../assets/map/menjin/ico3.png'),
+          label1: '摄像头数',
+          count1: 0
+        }
+      ],
+      block2OptionsList: [
+        {
+          title: '今日人员情况',
+          list: [
+            {
+              label: '进堆料场人员数',
+              count: 0
+            },
+            {
+              label: '出堆料场人员数',
+              count: 0
+            },
+            {
+              label: '堆料场内人员数',
+              count: 0
+            }
+          ]
+        },
+        {
+          title: '今日临时情况',
+          list: [
+            {
+              label: '临时进堆料场人员数',
+              count: 0
+            },
+            {
+              label: '临时出堆料场人员数',
+              count: 0
+            },
+            {
+              label: '临时堆料场内人员数',
+              count: 0
+            }
+          ]
+        },
+        {
+          title: '今日车辆情况',
+          list: [
+            {
+              label: '进堆料场车辆数',
+              count: 0
+            },
+            {
+              label: '出堆料场车辆数',
+              count: 0
+            },
+            {
+              label: '堆料场内车辆数',
+              count: 0
+            }
+          ]
+        }
+      ],
+      block3OptionsList: ['人员闸机', '车辆闸机'],
+      block3OptionsIndex: 1,
+      block3List: [
+      ]
+    }
+  },
+  mounted() {
+    this.getPerpleCarGateMachineCount()
+    this.getMachineCount()
+    this.listPerpleCarGateMachine('1')
+  },
+  destroyed() {
+    clearInterval(this.timer) // 关闭定时器
+  },
+  methods: {
+    // 定时五分钟执行一次
+    startPersonnelDataTimer() {
+      this.timer = setInterval(() => {
+        this.getPerpleCarGateMachineCount()
+        this.obtainPersonnelData()
+        this.getCameraCount()
+      }, 300000)
+    },
+    getMachineCount() {
+      requestFN(
+        '/map/getGatePositionCount',
+        {
+          id: this.id,
+          TYPE: this.type
+        }
+      ).then((data) => {
+        this.block1OptionsList[0].count1 = data.data.personMachineCount
+        // this.block1OptionsList[0].count2 =
+        this.block1OptionsList[1].count1 = data.data.carMachineCount
+        // this.block1OptionsList[1].count2 =
+        this.block1OptionsList[2].count1 = data.data.cameraCount
+      }).catch((e) => {
+      })
+    },
+    getPerpleCarGateMachineCount() {
+      requestFN(
+        '/map/getPersonAndCarGateInAndOutCount',
+        {
+          TYPE: this.type
+        }
+      ).then((data) => {
+        this.block2OptionsList[2].list[0].count = data.data.carInCount
+        console.log(data.data.data)
+        this.block2OptionsList[2].list[1].count = data.data.carOutCount
+        this.block2OptionsList[2].list[2].count = data.data.carOnSiteCount
+        this.block2OptionsList[0].list[0].count = data.data.personInCount
+        this.block2OptionsList[0].list[1].count = data.data.personOutCount
+        this.block2OptionsList[0].list[2].count = 0
+      }).catch((e) => {
+      })
+    },
+
+    // 获取人员数量信息
+    obtainPersonnelData() {
+      requestFN(
+        '/UserPosition/getCurrentPersonnelData',
+      ).then((data) => {
+        this.block2OptionsList[0].list[2].count = 333
+        this.block2OptionsList[0].list[0].count = 444
+        this.block2OptionsList[0].list[1].count = 555
+      }).catch((e) => {
+      })
+    },
+    listPerpleCarGateMachine(type) {
+      requestFN(
+        '/map/listGateMachine',
+        {
+          TYPE: type
+        }
+      ).then((data) => {
+        this.block3List = data.varList.slice(0, 10)
+        console.log(this.block3List)
+      }).catch((e) => {
+      })
+    },
+    block3OptionsClick(index) {
+      this.block3OptionsIndex = index
+      this.listPerpleCarGateMachine(index)
+    },
+    // 获取车辆数量信息
+    obtainCarData() {
+      requestFN(
+        '/UserPosition/getCurrentCarData',
+        { route: '/region/access/areaCarType' }
+      ).then((data) => {
+        this.block2OptionsList[2].list[2].count = data.pd.onlineCarCount
+      }).catch((e) => {
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.menjin {
+  .title {
+    background-image: url("../../../assets/map/menjin/title_on.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 113px;
+    height: 26px;
+    font-size: 14px;
+    line-height: 26px;
+    text-align: center;
+    color: #fff;
+
+    &.active {
+      background-image: url("../../../assets/map/menjin/title.png");
+    }
+  }
+
+  .block1 {
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+
+    .options {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 15px;
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+
+      .option {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .circular {
+          margin-top: 5px;
+          background-image: url("../../../assets/map/menjin/img1.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          width: 50px;
+          height: 50px;
+          text-align: center;
+          padding-top: 13px;
+
+          img {
+            width: 30px;
+            height: 26px;
+            animation: scale 2s infinite;
+          }
+        }
+
+        .label {
+          margin-top: 5px;
+          font-size: 12px;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .block2 {
+    margin-top: 10px;
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+
+    .options {
+      padding: 10px 15px;
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+
+      .option {
+        .items {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 10px;
+
+          .item {
+            margin-top: 10px;
+            font-size: 12px;
+            color: #fff;
+            flex-basis: 50%;
+          }
+        }
+      }
+    }
+  }
+
+  .block3 {
+    margin-top: 10px;
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+
+    .content {
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+      padding: 10px;
+
+      .options {
+        display: flex;
+        justify-content: flex-end;
+
+        .title {
+          cursor: pointer;
+        }
+      }
+
+      .table {
+        margin-top: 5px;
+
+        .tr {
+          display: flex;
+
+          &:nth-child(odd) {
+            background-color: rgba(42, 86, 158, 0.53);
+          }
+
+          .td {
+            flex: 1;
+            text-align: center;
+            font-size: 12px;
+            color: #fff;
+            padding: 5px;
+
+            &:nth-child(2) {
+              flex-basis: 20%;
+            }
+
+            &.green {
+              color: #7ccf41;
+            }
+
+            &.yellow {
+              color: #ffcb05;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.line1 {
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/views/map/components/qixiang.vue b/src/views/map/components/qixiang.vue
index 254b199..dc838a2 100644
--- a/src/views/map/components/qixiang.vue
+++ b/src/views/map/components/qixiang.vue
@@ -203,7 +203,8 @@ export default {
       requestFN(
         '/map/listbymeteorological',
         {
-          CORPINFO_ID: this.corpInfoId || '035958e685cf4850bc40151c5e0617a6'
+          CORPINFO_ID: this.corpInfoId || '035958e685cf4850bc40151c5e0617a6',
+          GANGKOU: this.gangkou
         }
       ).then((data) => {
         this.listLoading = false
diff --git a/src/views/map/dialog/index.vue b/src/views/map/dialog/index.vue
index 1857048..97e7837 100644
--- a/src/views/map/dialog/index.vue
+++ b/src/views/map/dialog/index.vue
@@ -7,10 +7,12 @@
       <temperaturestation v-if="type === '561347f0cff641dba8b2b22c0f443348'" :id="id" :type="type" :gangkou="gangkou"/>
       <humiditystation v-if="type === '732fe73933b845c6b1e2aee06a38ed31'" :id="id" :type="type" :gangkou="gangkou"/>
       <windspeedstation v-if="type === '2da29f00852a4653ba3e760b9de57412'" :id="id" :type="type" :gangkou="gangkou"/>
+      <windspeedstation-cmt v-if="type === '2da29f00852a4653ba3e760b9de5741200005'" :name="name" :id="id" :type="type" :gangkou="gangkou"/>
       <xf-point v-if="type === 'point'" :id="id" :type="type" :gangkou="gangkou"/>
       <xf-control v-if="type === 'xfbf01' || type ==='xfkzs01' || type ==='xfjyd01' || type ==='xfsy01'" :id="id" :type="type" :gangkou="gangkou"/>
       <mk-gate-machine v-if="type === 'CAR'||type ==='PERSON' || type ==='CAMERA'" :id="id" :type="type" :gangkou="gangkou"/>
       <mk-gate-machine-cfd v-if="type === 'CAR00004'||type ==='PERSON00004' " :id="id" :type="type" :gangkou="gangkou" :infoname="infoname"/>
+      <mk-gate-machine-cmt v-if="type === 'CAR00005'||type ==='PERSON00005' " :id="id" :type="type" :gangkou="gangkou" :infoname="infoname"/>
       <zhong_da_info v-if="type === 'majordangersource'" :id="id" :type="type" :gangkou="gangkou"/>
       <video-play v-if="type === 'video'" :id="id" :type="type" :gangkou="gangkou" request-url="/api/homemajor/getVideoInfo"/>
       <video-play-cfd v-if="type === 'CAMERA00004' || type === 'platcamera00004'" :id="id" :type="type" :gangkou="gangkou"/>
@@ -63,10 +65,12 @@ import weatherstation from './weatherstation.vue'
 import temperaturestation from './weatherstation.vue'
 import humiditystation from './weatherstation.vue'
 import windspeedstation from './weatherstation.vue'
+import windspeedstationCmt from './weatherstationCmt.vue'
 import XfControl from './xfControl.vue'
 import XfPoint from './xfPoint.vue'
 import MkGateMachine from './mkGateMachine.vue'
 import MkGateMachineCfd from './mkGateMachineCfd.vue'
+import MkGateMachineCmt from './mkGateMachineCmt.vue'
 import Zhong_da_info from './zhong_da_info.vue'
 import electricityOrder from './electricityOrder.vue'
 import highworkOrder from './highworkOrder.vue'
@@ -106,6 +110,7 @@ export default {
     temperaturestation,
     humiditystation,
     windspeedstation,
+    windspeedstationCmt,
     electricityOrder,
     highworkOrder,
     cutroadOrder,
@@ -129,10 +134,10 @@ export default {
     videoPlayBianjieruqin,
     peoplePositionOne,
     hotworkFirst,
-    peoplePositionOne,
     peoplePositionYGS,
     outSourceInfo,
-    outSourceVideoInfo
+    outSourceVideoInfo,
+    MkGateMachineCmt
   },
   props: {
     title: {
@@ -166,7 +171,11 @@ export default {
     infoname: {
       type: String,
       default: ''
-    }
+    },
+    name: {
+      type: String,
+      default: ''
+    },
   },
   methods: {
     closeDialog() {
diff --git a/src/views/map/dialog/mkGateMachineCmt.vue b/src/views/map/dialog/mkGateMachineCmt.vue
new file mode 100644
index 0000000..f28a24d
--- /dev/null
+++ b/src/views/map/dialog/mkGateMachineCmt.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="app-container print-work">
+    <div class="level-title">
+      <h1>卡口信息</h1>
+      <div class="level-btns">卡口编号:{{ id }}</div>
+    </div>
+    <table class="table-ui">
+      <tr>
+        <td class="bbg-transparent">卡口类型</td>
+        <td >
+          <template v-if="type === 'PERSON00005'">
+            <span>
+              人卡
+            </span>
+          </template>
+          <template v-else>
+            <span>
+              车卡
+            </span>
+          </template>
+        </td>
+        <td class="bbg-transparent">卡口位置</td>
+        <td >
+          <span>
+            {{ infoname }}
+          </span>
+        </td>
+      </tr>
+
+      <!--      <tr>-->
+      <!--        <td class="bbg-transparent">卡口位置名称</td>-->
+      <!--        <td colspan="3" >{{ '秦皇岛市北京区石家庄镇唐山村' }}</td>-->
+      <!--      </tr>-->
+
+      <tr>
+        <td class="bbg-transparent">卡口状态</td>
+        <td colspan="3" >{{ '在线' }}</td>
+      </tr>
+    </table>
+    <div class="level-title martop">
+      <h1>进出记录</h1>
+    </div>
+    <table class="table-ui">
+      <tr v-if="type === 'PERSON00005'">
+        <td colspan="4" style="padding: 0;">
+          <table class="table-vi">
+            <tr class="bbg-transparent">
+              <td>序号</td>
+              <td>进出位置</td>
+              <td>人员姓名</td>
+              <td>卡号</td>
+              <td>进出状态</td>
+              <td>进出时间</td>
+            </tr>
+            <tr v-for="(item, index) in measuresList" :key="item.cardNo">
+              <td style="text-align: center">{{ index + 1 }}</td>
+              <td style="text-align: center">{{ item.doorName }}</td>
+              <td style="text-align: center">{{ item.personName }}</td>
+              <td style="text-align: center">{{ item.cardNo }}</td>
+              <td style="text-align: center">{{ item.inAndOutType === '0' ? '出' : '进' }}</td>
+              <td style="text-align: center">{{ formatDate(Date.parse(new Date(item.eventTime)),"YYYY-MM-DD HH:mm:ss") }}</td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+      <tr v-if="type === 'CAR00005'">
+        <td colspan="4" style="padding: 0;">
+          <table class="table-vi">
+            <tr class="bbg-transparent">
+              <td>序号</td>
+              <td>进出位置</td>
+              <td>车牌号</td>
+              <td>车辆类型</td>
+              <td>进出状态</td>
+              <td>进出时间</td>
+            </tr>
+            <tr v-for="(item, index) in measuresList" :key="item.empNo">
+              <td style="text-align: center">{{ index + 1 }}</td>
+              <td style="text-align: center">{{ item.ROADWAYNAME }}</td>
+              <td style="text-align: center">{{ item.PLATENO }}</td>
+              <td style="text-align: center">{{ item.VEHICLETYPE === '0' ? '其他车' : item.VEHICLETYPE === '1' ? '小型车' :item.VEHICLETYPE === '2' ? '大型车' : '摩托车' }}</td>
+              <td style="text-align: center">{{ item.VEHICLEOUT === '0' ? '进场' : '出场' }}</td>
+              <td style="text-align: center">{{ formatDate(Date.parse(new Date(item.CROSSTIME)),"YYYY-MM-DD HH:mm:ss") }}</td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { requestFN } from '@/utils/request'
+import moment from 'moment'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    type: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    name: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    infoname: {
+      type: String,
+      default() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      config: config,
+      ISOTHER: false,
+      info: {
+        OTHER_PROTECTIVE_MEASURES: []
+      },
+      measuresList: [],
+      measuresScheduleList: []
+    }
+  },
+  created() {
+    this.getData()
+    this.startPersonnelDataTimer()
+  },
+  destroyed() {
+    clearInterval(this.timer) // 关闭定时器
+  },
+  methods: {
+    formatDate(date, format) {
+      if (date) {
+        return moment(date).format(format)
+      } else {
+        return ''
+      }
+    },
+    getData() {
+      requestFN(
+        '/map/getGatesInAndOutNumById',
+        {
+          GANGKOU: '00005',
+          GATE_AREA_ID: this.id,
+          TYPE: this.type,
+          status: '0',
+          pageNo: 1,
+          pageSize: 100
+        }
+      ).then((data) => {
+        this.info = data.pd
+        console.log(data.doorInfo.data.list)
+        this.measuresList = data.doorInfo.data.list
+        /* while (this.measuresList.length > 15) {
+          console.log('删除元素')
+          this.measuresList.splice(0,1)
+        }*/
+      }).catch((e) => {
+      })
+    },
+    // 定时一分钟执行一次
+    startPersonnelDataTimer() {
+      this.timer = setInterval(() => {
+        console.log('执行定时器查询闸机信息')
+        this.getDataschedule()
+        for (let i = 0; i < this.measuresScheduleList.length; i++) {
+          this.measuresList.push(this.measuresScheduleList[i])
+        }
+        /* while (this.measuresList.length > 15) {
+          console.log('删除元素')
+          this.measuresList.splice(0,1)
+        }*/
+      }, 60000)
+    },
+    getDataschedule() {
+      requestFN(
+        '/map/getGatesInAndOutNumById',
+        {
+          id: this.id,
+          TYPE: this.type,
+          status: '1',
+          pageNo: 1,
+          pageSize: 10,
+          GANGKOU: '00005'
+        }
+      ).then((data) => {
+        this.measuresScheduleList = data.doorInfo.data.list
+      }).catch((e) => {
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.martop {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/map/dialog/weatherstationCmt.vue b/src/views/map/dialog/weatherstationCmt.vue
new file mode 100644
index 0000000..ef93b02
--- /dev/null
+++ b/src/views/map/dialog/weatherstationCmt.vue
@@ -0,0 +1,669 @@
+<template>
+  <div class="app-container print-work">
+    <div class="level-title">
+      <h1>{{ info.EQUIPMENTNAME }}：实时监测数据 {{ info.OPERATTIME }}</h1>
+    </div>
+    <div style="display: flex">
+      <div v-if="info.WINDDIRECTION != '-'" id="main4"/>
+      <div v-if="info.TEMPERATURE != '-'" id="main5"/>
+      <div v-if="info.WINDSPEED != '-'" id="main6"/>
+    </div>
+    <table class="table-ui">
+      <tr>
+        <td class="bbg-transparent">风速监测</td>
+        <td>{{ info.WINDSPEED }}</td>
+        <td class="bbg-transparent">风向监测</td>
+        <td>{{ info.WINDDIRECTION }}</td>
+      </tr>
+      <tr>
+        <td class="bbg-transparent">温度监测</td>
+        <td>{{ info.TEMPERATURE }}</td>
+        <td class="bbg-transparent">湿度监测</td>
+        <td>{{ info.COUNTARCHIVE }}</td>
+      </tr>
+    </table>
+
+  </div>
+</template>
+
+<script>
+import { requestFN } from '@/utils/request'
+import * as echarts from 'echarts'
+
+let myChart4 = null
+let myChart5 = null
+let myChart6 = null
+export default {
+  props: {
+    id: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    type: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    name: {
+      type: String,
+      default() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      timer: '',
+      config: config,
+      info: {}
+    }
+  },
+  mounted() {
+    window.onresize = function() {
+      myChart4 && myChart4.resize()
+      myChart5 && myChart5.resize()
+      myChart6 && myChart6.resize()
+    }
+    this.getMeteorologicalinfo()
+    this.start()
+  },
+  beforeDestroy() {
+    myChart4 = null
+    myChart5 = null
+    myChart6 = null
+    console.log('定时器关闭')
+    clearInterval(this.timer)
+  },
+
+  methods: {
+    // 定时器
+    start() {
+      console.log('定时器开启')
+      this.timer = setInterval(this.getMeteorologicalinfo, 10000) // 注意: 第一个参数为方法名的时候不要加括号;
+    },
+    over() {
+      clearInterval(this.timer)
+    },
+    getMeteorologicalinfo() {
+      requestFN(
+        '/map/getDetailByName',
+        {
+          FNAME: this.name,
+          type: this.type
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.info = data.pd || {}
+        this.info.COUNTARCHIVE = data.pd.COUNTARCHIVE || '-'
+        this.info.TEMPERATURE = data.pd.TEMPERATURE || '-'
+        this.info.WINDSPEED = data.pd.WINDSPEED || '-'
+        this.info.WINDDIRECTION = data.pd.WINDDIRECTION || '-'
+        this.$nextTick(() => {
+          if (data.pd.WINDDIRECTION != '-') {
+            console.log(this.info.WINDDIRECTION)
+            this.initEcharts1(data)
+            this.info.WINDDIRECTION = this.calculateWindDirection(this.info.WINDDIRECTION)
+            console.log(this.info.WINDDIRECTION)
+          }
+          if (data.pd.TEMPERATURE != '-') {
+            this.initEcharts2(data)
+          }
+          if (data.pd.WINDSPEED != '-') {
+            this.initEcharts3(data)
+          }
+        })
+      }).catch((e) => {
+      })
+    },
+    initEcharts1(data) {
+      myChart4 = echarts.init(document.querySelector('#main4'))
+      var option = {
+        title: {
+          // x: "center",
+          top: 0,
+          text: '风向监测',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#fff'
+          }
+        },
+        series: {
+          name: '',
+          type: 'gauge',
+          min: 0,
+          max: 360,
+          startAngle: 90,
+          endAngle: -269.9999,
+          radius: '55%',
+          splitNumber: 8,
+          axisLine: {
+            lineStyle: {
+              width: 15,
+              shadowBlur: 0,
+              color: [
+                [0.25, '#DDBD4D'],
+                [0.5, '#E43F3D'],
+                [0.75, '#7CBB55'],
+                [1, '#9CD6CE']
+              ]
+            }
+          },
+          axisTick: {
+            show: true,
+            splitNumber: 5,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            length: 10,
+            lineStyle: {
+              width: 5,
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            formatter: function(e) {
+              switch (e + '') {
+                case '0':
+                  return '北'
+                case '45':
+                  return '东北'
+                case '135':
+                  return '东南'
+                case '225':
+                  return '西南'
+                case '315':
+                  return '西北'
+                case '360':
+                  return '北'
+                case '180':
+                  return '南'
+                case '90':
+                  return '东'
+                case '270':
+                  return '西'
+                default:
+                  return e
+              }
+            },
+            distance: -60,
+            textStyle: {
+              fontSize: 14,
+              fontWeight: '',
+              color: '#fff'
+            }
+          },
+          pointer: {
+            show: true,
+            length: '80%',
+            width: 5
+          },
+          detail: {
+            formatter: function(param) {
+              var level = ''
+              if (param > 0 && param < 90) {
+                level = '东北'
+              } else if (param > 90 && param < 180) {
+                level = '东南'
+              } else if (param > 180 && param < 270) {
+                level = '西南'
+              } else if (param > 270 && param < 360) {
+                level = '西北'
+              } else if (param == 360) {
+                level = '正北'
+              } else if (param == 270) {
+                level = '正西'
+              } else if (param == 90) {
+                level = '正东'
+              } else if (param == 180) {
+                level = '正南'
+              }
+              return '当前风向:' + level + '(' + param + '°)'
+            },
+            offsetCenter: [0, 150],
+            textStyle: {
+              fontSize: 14,
+              color: '#fff'
+            }
+          },
+          data: [data.pd.WINDDIRECTION]
+        }
+      }
+      myChart4.setOption(option)
+    },
+    initEcharts2(data) {
+      myChart5 = echarts.init(document.querySelector('#main5'))
+      var value = data.pd.TEMPERATURE
+      var kd = []
+      // 刻度使用柱状图模拟，短设置3，长的设置5；构造一个数据
+      for (var i = 0, len = 130; i <= len; i++) {
+        if (i > 100 || i < 30) {
+          kd.push('0')
+        } else {
+          if (i % 5 === 0) {
+            kd.push('5')
+          } else {
+            kd.push('3')
+          }
+        }
+      }
+      // console.log(kd)
+      // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
+      function getData(value) {
+        return [Number(value) + 30]
+      }
+      var mercuryColor = '#fd4d49'
+      var borderColor = '#fd4d49'
+
+      const option = {
+        title: {
+          text: '温度监测',
+          show: true,
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#fff'
+          }
+        },
+        yAxis: [{
+          show: false,
+          min: 0,
+          max: 130
+        }, {
+          show: false,
+          data: [],
+          min: 0,
+          max: 130
+        }],
+        xAxis: [{
+          show: false,
+          data: []
+        }, {
+          show: false,
+          data: []
+        }, {
+          show: false,
+          data: []
+        }, {
+          show: false,
+          min: -110,
+          max: 100
+
+        }],
+        series: [{
+          name: '条',
+          type: 'bar',
+          // 对应上面XAxis的第一个对象配置
+          xAxisIndex: 0,
+          data: getData(value),
+          barWidth: 18,
+          itemStyle: {
+            normal: {
+              color: mercuryColor,
+              barBorderRadius: 0
+            }
+          },
+          label: {
+            normal: {
+              show: true,
+              position: 'top',
+              formatter: function(param) {
+                // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
+                return (((param.value * 100) - (30 * 100)) / 100) + '°C'
+              },
+              textStyle: {
+                color: '#ccc',
+                fontSize: '10'
+              }
+            }
+          },
+          z: 2
+        }, {
+          name: '白框',
+          type: 'bar',
+          xAxisIndex: 1,
+          barGap: '-100%',
+          data: [129],
+          barWidth: 28,
+          itemStyle: {
+            normal: {
+              color: '#ffffff',
+              barBorderRadius: 50
+            }
+          },
+          z: 1
+        }, {
+          name: '外框',
+          type: 'bar',
+          xAxisIndex: 2,
+          barGap: '-100%',
+          data: [130],
+          barWidth: 38,
+          itemStyle: {
+            normal: {
+              color: borderColor,
+              barBorderRadius: 50
+            }
+          },
+          z: 0
+        }, {
+          name: '圆',
+          type: 'scatter',
+          hoverAnimation: false,
+          data: [0],
+          xAxisIndex: 0,
+          symbolSize: 48,
+          itemStyle: {
+            normal: {
+              color: mercuryColor,
+              opacity: 1
+            }
+          },
+          z: 2
+        }, {
+          name: '白圆',
+          type: 'scatter',
+          hoverAnimation: false,
+          data: [0],
+          xAxisIndex: 1,
+          symbolSize: 60,
+          itemStyle: {
+            normal: {
+              color: '#ffffff',
+              opacity: 1
+            }
+          },
+          z: 1
+        }, {
+          name: '外圆',
+          type: 'scatter',
+          hoverAnimation: false,
+          data: [0],
+          xAxisIndex: 2,
+          symbolSize: 70,
+          itemStyle: {
+            normal: {
+              color: borderColor,
+              opacity: 1
+            }
+          },
+          z: 0
+        }, {
+          name: '刻度',
+          type: 'bar',
+          yAxisIndex: 1,
+          xAxisIndex: 3,
+          label: {
+            normal: {
+              show: true,
+              position: 'right',
+              distance: 10,
+              color: '#fff',
+              fontSize: 10,
+              formatter: function(params) {
+                // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
+                if (params.dataIndex > 100 || params.dataIndex < 30) {
+                  return ''
+                } else {
+                  if (params.dataIndex % 5 === 0) {
+                    return params.dataIndex - 30
+                  } else {
+                    return ''
+                  }
+                }
+              }
+            }
+          },
+          barGap: '-100%',
+          data: kd,
+          barWidth: 1,
+          itemStyle: {
+            normal: {
+              color: borderColor,
+              barBorderRadius: 10
+            }
+          },
+          z: 0
+        }]
+      }
+      myChart5.setOption(option)
+    },
+    initEcharts3(data) {
+      myChart6 = echarts.init(document.querySelector('#main6'))
+      const option = {
+        // backgroundColor:'#0F2D5B',
+        title: {
+          text: '风速监测',
+          show: true,
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#fff'
+          }
+        },
+        series: [
+          {
+            name: '外圈',
+            type: 'gauge',
+            min: 0,
+            max: 30,
+            splitNumber: 10,
+            center: ['50%', '55%'],
+            radius: '73%',
+            axisLine: {
+              lineStyle: {
+                color: [[1, '#2E5BA1']],
+                width: 20
+              }
+            },
+            splitLine: {
+              distance: -20,
+              length: 20,
+              lineStyle: {
+                width: 2,
+                color: '#0F2D5B'
+              }
+            },
+            axisTick: {
+              distance: -20,
+              length: 5,
+              lineStyle: {
+                color: '#0F2D5B'
+              }
+            },
+            axisLabel: {
+              distance: -25,
+              color: '#7392C1',
+              fontSize: 14
+            },
+            anchor: {
+              show: false
+            },
+            pointer: {
+              show: false
+            }
+          },
+          {
+            name: '内圈',
+            type: 'gauge',
+            min: 0,
+            max: 30,
+            splitNumber: 10,
+            center: ['50%', '55%'],
+            radius: '65%',
+            axisLine: {
+              lineStyle: {
+                width: 20,
+                color: [
+                  [0.25, '#18EC90'],
+                  [0.5, '#E2DC2E'],
+                  [0.75, '#E2A02E'],
+                  [1, '#FE4747']
+                ]
+              }
+            },
+            silent: true,
+            pointer: {
+              length: '85%',
+              width: 4,
+              itemStyle: {
+                color: 'inherit',
+                borderWidth: 1,
+                borderColor: 'inherit', // '#0D3778',
+                shadowColor: 'inherit',
+                shadowBlur: 1
+              }
+            },
+            axisTick: {
+              show: false,
+              distance: -20,
+              length: 5,
+              lineStyle: {
+                color: '#0F2D5B'
+              }
+            },
+            splitLine: {
+              distance: -20,
+              length: 20,
+              lineStyle: {
+                width: 2,
+                color: '#0F2D5B'
+              }
+            },
+            axisLabel: {
+              show: false
+            },
+            title: { // 仪表盘标题。
+              show: true, // 是否显示标题,默认 true。
+              offsetCenter: [0, '95%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
+              color: '#ccc', // 文字的颜色,默认 #333。
+              fontSize: 15 // 文字的字体大小,默认 15。
+            },
+            detail: {
+              valueAnimation: true,
+              offsetCenter: [0, '70%'],
+              formatter: '{value}',
+              color: 'inherit', // 文字的颜色,默认 #333。
+              fontSize: 20
+            },
+            data: [{
+              name: '风速(m/s)',
+              value: data.pd.WINDSPEED
+            }]
+          }
+        ]
+      }
+      myChart6.setOption(option)
+    },
+    calculateWindDirection(angle) {
+      const arr = [
+        {
+          directions: '北',
+          minAngle: '348.76',
+          maxAngle: '11.25'
+        },
+        {
+          directions: '北东北',
+          minAngle: '11.26',
+          maxAngle: '33.75'
+        },
+        {
+          directions: '东北',
+          minAngle: '33.76',
+          maxAngle: '56.25'
+        },
+        {
+          directions: '东东北',
+          minAngle: '56.26',
+          maxAngle: '78.75'
+        },
+        {
+          directions: '东',
+          minAngle: '78.76',
+          maxAngle: '101.25'
+        },
+        {
+          directions: '东东南',
+          minAngle: '101.26',
+          maxAngle: '123.75'
+        },
+        {
+          directions: '东南',
+          minAngle: '123.76',
+          maxAngle: '146.25'
+        },
+        {
+          directions: '南东南',
+          minAngle: '146.26',
+          maxAngle: '168.75'
+        },
+        {
+          directions: '南',
+          minAngle: '168.76',
+          maxAngle: '191.25'
+        },
+        {
+          directions: '南西南',
+          minAngle: '191.26',
+          maxAngle: '213.75'
+        },
+        {
+          directions: '西南',
+          minAngle: '213.76',
+          maxAngle: '236.25'
+        },
+        {
+          directions: '西西南',
+          minAngle: '236.26',
+          maxAngle: '258.75'
+        },
+        {
+          directions: '西',
+          minAngle: '258.76',
+          maxAngle: '281.25'
+        },
+        {
+          directions: '西西北',
+          minAngle: '281.26',
+          maxAngle: '303.75'
+        },
+        {
+          directions: '西北',
+          minAngle: '303.76',
+          maxAngle: '326.25'
+        },
+        {
+          directions: '北西北',
+          minAngle: '326.26',
+          maxAngle: '348.75'
+        }
+      ]
+      for (let i = 0; i < arr.length; i++) {
+        if (+angle >= +arr[i].minAngle && +angle <= +arr[i].maxAngle) {
+          return arr[i].directions + '风'
+        }
+      }
+      return '静风'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+#main4{
+  width: 340px;
+  height: 380px;
+}
+#main5{
+  width: 340px;
+  height: 380px;
+}
+#main6{
+  width: 340px;
+  height: 380px;
+}
+</style>
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index 0c5a106..6e9b861 100644
--- a/src/views/map/index.vue
+++ b/src/views/map/index.vue
@@ -35,7 +35,7 @@
           :gangkou="gangkouActive"
         />
         <menjin
-          v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 0"
+          v-if="gangkouActive && gangkouActive !== '00004' &&  gangkouActive !== '00005'  && bottomOptionsIndex === 0"
           :corp-info-id="CORP_INFO_ID"
           :area="area"
           :gangkou="gangkouActive"/>
@@ -44,6 +44,11 @@
           :corp-info-id="CORP_INFO_ID"
           :area="area"
           :gangkou="gangkouActive"/>
+        <menjin-cmt
+          v-if="gangkouActive && gangkouActive === '00005' && bottomOptionsIndex === 0"
+          :corp-info-id="CORP_INFO_ID"
+          :area="area"
+          :gangkou="gangkouActive"/>
         <xiaofang
           v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 1"
           :corp-info-id="CORP_INFO_ID"
@@ -204,6 +209,7 @@
       :corp-info-id="dialog.corpInfoId"
       :gangkou="gangkouActive"
       :infoname="dialog.infoname"
+      :name="dialog.name"
     />
   </div>
 </template>
@@ -219,6 +225,7 @@ import fengongsiIndex from './components/fengongsi_index.vue'
 import caofeidianIndex from './components/caofeidian_index.vue'
 import menjin from './components/menjin.vue'
 import menjinCfd from './components/menjinCfd.vue'
+import menjinCmt from './components/menjinCmt.vue'
 import xiaofang from './components/xiaofang.vue'
 import anquan from './components/anquan.vue'
 import anquanCfd from './components/anquanCfd.vue'
@@ -268,6 +275,7 @@ export default {
     layoutMenu,
     menjin,
     menjinCfd,
+    menjinCmt,
     xiaofang,
     anquan,
     qixiang,
@@ -1105,7 +1113,7 @@ export default {
       }
       return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4()
     },
-    keepalive(token) {
+    /*keepalive(token) {
       // 第二套方案
       requestFN(
         '/map/loginOrKeepAlive',
@@ -1159,7 +1167,7 @@ export default {
             console.error(err)
           })
       })
-    },
+    },*/
     // keepalive(token) {
     //   axios({
     //     method: 'POST',
@@ -1360,12 +1368,24 @@ export default {
             this.dialog.infoname = infoname
             return
           }
+          if (this.gangkouActive === '00005') {
+            // if (this.gangkouActive === '00004' && point_type.indexOf('标记点') !== -1 && point_id.substring(0, 1) === '0' || point_id.substring(0, 1) === '5') {
+            const { label, point_type, data_id, infoname,name, code } = pick.id._monitoItems.data
+            this.dialog.visible = true
+            this.dialog.title = label
+            this.dialog.type = point_type.substring(3) + this.gangkouActive
+            this.dialog.id = data_id
+            this.dialog.name = name
+            this.dialog.id = point_type.substring(3) === 'CAMERA' ? code : point_type.substring(3) === 'platcamera' ? code : data_id
+            this.dialog.infoname = infoname
+            console.log(this.dialog)
+            return
+          }
           if (point_type.indexOf('标记点') !== -1) {
             const { label, point_type, data_id, corpInfoId, dialog_width, infoname } = pick.id._monitoItems.data
             this.dialog.visible = true
             this.dialog.title = label
             this.dialog.type = point_type.substring(3)
-            this.dialog.id = data_id
             this.dialog.corpInfoId = corpInfoId
             this.dialog.infoname = infoname
             this.dialog.width = dialog_width || '50%'
@@ -1958,6 +1978,11 @@ export default {
               } else {
                 point.infoname = varList[i].NAME
               }
+              //曹煤炭数据
+              if (this.gangkouActive === '00005') {
+                point.name = varList[i].MAP_POINT_NAME
+                point.infoname = varList[i].MAP_POINT_NAME
+              }
               points.push(point)
             }
             if (this.gangkouActive === '00004' && urlType === 'carPosition') {