动环诊断页面

src/views/menu/iot/donghuang/components/item.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="flex flex-col justify-center k-app-protection-list__item van-clearfix">
+    <van-cell-group clickable @click="itemClick">
+      <van-cell :title="data.name">
+        <template #right-icon>
+          <van-button
+            size="mini"
+            color="#008cd6"
+            type="info"
+            @click.stop="
+              openUpdateStateDialog(data, '1')
+              return false
+            "
+            v-if="data.status != '1' && data.orgId == orgId"
+            >布防时间登记</van-button
+          >
+          <van-button
+            size="mini"
+            color="#008cd6"
+            type="info"
+            @click.stop="
+              openUpdateStateDialog(data, '0')
+              return false
+            "
+            v-if="data.status != '0' && data.orgId == orgId"
+            >撤防时间登记</van-button
+          >
+        </template>
+      </van-cell>
+      <van-cell title="布撤防状态">
+        <template #right-icon>
+          <!-- <span v-if="data.status==1" style="color:rgb(0,164,46)">布防</span>
+            <span v-else-if="data.status==0" style="color:rgb(215,0,15)">撤防</span> -->
+          <span>{{ getDictLabel(data.status, 'protection_status', '未上报') }}</span>
+        </template>
+      </van-cell>
+      <van-cell
+        v-if="data.status == '0' || data.status == '1'"
+        :title="data.status == '0' ? '撤防时间' : '布防时间'"
+    value-class="time-cell-default"
+      >
+      <template #default>
+        <van-tag type="primary" color="rgb(184,159,113)" v-if="data.statusUpdatorName!=null">人工登记</van-tag>
+        <van-tag type="primary" v-else>自动获取</van-tag>
+        <span style="margin-left:10px">{{data.statusChangeTime}}</span>
+      </template>
+      </van-cell>
+
+    </van-cell-group>
+    <state-change-diaolog ref="stateChangeDiaolog" @success="updateStatus"/>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import * as api from '@/api/protection.js'
+import { Dialog } from 'vant'
+import StateChangeDiaolog from './dialog.stateChange.vue'
+import dayjs from 'dayjs'
+export default {
+  components: { StateChangeDiaolog },
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapGetters(['orgName', 'orgId', 'dictionary'])
+  },
+  watch: {},
+  props: {
+    data: {},
+    statusOptions: {}
+  },
+  methods: {
+    formatDate(dateStr) {
+      return toFormatStr(dateStr)
+    },
+    openUpdateStateDialog(data, status) {
+      this.$refs.stateChangeDiaolog.open(data,status, this.getDictLabel(status, 'protection_status', '未知'))
+
+      // Dialog.confirm({
+      //   message: `是否更新${this.getDictLabel(status, 'protection_status', '未上报')}时间？`
+      // })
+      //   .then(() => {
+      //     api.updateStatus(data.id, status).then(r => {
+      //       if (r.data) {
+      //         data.status = status
+      //         data.statusUpdateTime = dayjs(r.data).format('YYYY-MM-DD HH:mm')
+      //       }
+      //     })
+      //   })
+      //   .catch(() => {
+      //     // on cancel
+      //   })
+    },
+    updateStatus(data, status,changeTime) {      
+      api.updateStatus(data.id, status,changeTime).then(r => {
+        if (r.data) {
+          data.status = status
+          data.statusChangeTime = dayjs(changeTime).format('YYYY-MM-DD HH:mm')
+        }
+      })
+    },
+    itemClick() {
+      this.$router.push('/iot/subsystem/detail?id=' + this.data.id)
+    }
+  },
+  async created() {},
+  async mounted() {}
+}
+</script>
+<style lang="scss" scoped>
+.k-app-protection-list__item {
+  //   height: 11.85rem;
+  background: #ffffff;
+  margin: 0.3rem 0.325rem 0;
+  font-size: 3.733333vw;
+  .top {
+    // min-height: 3rem;
+    padding: 0.05rem 0.05rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid #f3f4f5;
+    > label {
+      //   height: 1.38rem;
+      // font-size: 1rem;
+      //   line-height: 1.25rem;
+      color: #323233;
+      opacity: 1;
+    }
+  }
+  .bottom {
+    min-height: 7.75rem;
+    padding: 0 1rem;
+    span {
+      height: 1.25rem;
+      font-size: 0.88rem;
+      line-height: 1.25rem;
+      color: #000000;
+      opacity: 0.61;
+    }
+  }
+}
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.time-cell-default{
+  min-width: 60vw;
+}
+</style>

src/views/menu/iot/donghuang/detail.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="detail">
+    <nav-bar></nav-bar>
+    <card class="info">
+      <van-cell-group>
+        <van-cell title="控制器名称" :value="info.name" />
+        <van-cell title="所属监控主机" :value="info.hostName" v-if="info.hostName" value-class="cell-host"/>
+        <van-cell title="所属机构" :value="info.orgName" />
+      </van-cell-group>
+    </card>
+
+    <card title="布撤防历史" class="history">
+      <template>
+        <k-list :list="history" :params="search">
+          <template v-slot:header>
+            <div class="header">
+              <span>布撤防状态</span>
+              <span>布撤防时间</span>
+              <span>上报人</span>
+            </div>
+          </template>
+          <template slot-scope="{ data }">
+            <div class="datarow">
+              <!-- <span v-if="data.status == 1" style="color: rgb(0, 164, 46)">布防</span>
+              <span v-else-if="data.status == 0" style="color: rgb(215, 0, 15)">撤防</span> -->
+              <span>{{ getDictLabel(data.status, 'protection_status', '未上报') }}</span>
+              <span>{{ data.updateTime }}</span>
+              <span>{{ data.statusUpdatorName ? data.statusUpdatorName : '自动获取' }}</span>
+            </div>
+          </template>
+        </k-list>
+      </template>
+    </card>
+  </div>
+</template>
+<script>
+import KList from '@/components/list/index.vue'
+import { get, history } from '@/api/protection.js'
+import Card from '@/components/card/index.vue'
+import { getLabel } from '@/utils/optionEx'
+import NavBar from '@/components/NavBar'
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      info: {},
+      search: {
+        protectionId: this.$route.query.id
+      },
+      statusOptions: [
+        { value: -1, text: '布撤防状态' },
+        { value: '0', text: '撤防' },
+        { value: '1', text: '布防' },
+        { value: '2', text: '未知' }
+      ],
+      dicts: ['protection_status']
+    }
+  },
+  components: { NavBar, KList, Card },
+  computed: {
+    ...mapGetters(['dictionary'])
+  },
+  mounted() {
+    this.getInfo()
+  },
+  methods: {
+    history,
+    getLabel,
+    getInfo() {
+      get(this.search.protectionId).then(r => {
+        this.info = r.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.detail {
+  margin: 15px;
+}
+.info {
+  ::v-deep .van-cell__title {
+    max-width: 40%;
+  }
+  ::v-deep .van-cell__value {
+    max-width: 60%;
+  }
+}
+.history {
+  ::v-deep .header {
+    display: flex;
+    flex-direction: row;
+    background-color: rgb(240, 240, 240);
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  ::v-deep .header > span {
+    display: inline-block;
+    text-align: center;
+  }
+
+  ::v-deep .header > span {
+    display: inline-block;
+    text-align: center;
+  }
+  ::v-deep .header > span:nth-child(1) {
+    width: 30%;
+  }
+
+  ::v-deep .header > span:nth-child(2) {
+    width: 40%;
+  }
+  ::v-deep .header > span:nth-child(3) {
+    width: 30%;
+  }
+  ::v-deep .datarow {
+    display: flex;
+    flex-direction: row;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgb(240, 240, 240);
+  }
+
+  ::v-deep .datarow > span {
+    display: inline-block;
+    text-align: center;
+  }
+
+  ::v-deep .datarow > span:nth-child(1) {
+    width: 30%;
+  }
+
+  ::v-deep .datarow > span:nth-child(2) {
+    width: 40%;
+  }
+  ::v-deep .datarow > span:nth-child(3) {
+    width: 30%;
+  }
+}
+
+.cell-host{
+  min-width: 58vw;
+}
+</style>

src/views/menu/iot/donghuang/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="protection_list">
+    <nav-bar></nav-bar>
+    <van-row>
+      <van-col span="24">
+        <org-tree v-model="search.orgId" @changeItem="changeTree" @checked="orgCheckChanged" showChecked></org-tree>
+      </van-col>
+      <van-col>
+        <div></div>
+      </van-col>
+    </van-row>
+    <!-- <van-search v-model="search.key" placeholder="请输入搜索关键词" maxlength="50" /> -->
+    <van-dropdown-menu>
+      <!-- <van-dropdown-item :title="selectedOrgName" @open="onItemClick" /> -->
+      <van-dropdown-item v-model="search.status" :options="statusOptions" />
+      <van-dropdown-item v-model="search.hour" :options="hourOptions" />
+    </van-dropdown-menu>
+    <!-- <div>
+      <van-picker show-toolbar title="选择" :columns="statusOptions"/>
+    </div> -->
+    <!-- <van-popup v-model="showOrg" round position="bottom">
+      <van-cascader v-model="search.orgId" title="选择机构" :options="options" @close="showOrg = false" @change="changeTree"
+        @finish="onFinish" :field-names="fieldNames" />
+    </van-popup> -->
+    <div class="container">
+      <k-list :list="list" :params="search" :auto="false" ref="list">
+        <template slot-scope="{ data }">
+          <item :data="data" :statusOptions="getDictItem('protection_status')"></item>
+        </template>
+      </k-list>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar'
+// import Calendar from '@/components/Calendar';
+import { mapGetters } from 'vuex'
+import { deptTreeList } from '@/api/public'
+import { list } from '@/api/protection.js'
+import KList from '@/components/list/index.vue'
+import Item from './components/item.vue'
+import OrgTree from '@/components/orgTree'
+export default {
+  components: { NavBar, KList, Item ,OrgTree},
+  data() {
+    return {
+      options: [],
+      search: {
+        orgId: this.orgId,
+        checkSub:false,
+        deviceType: null,
+        state:null,
+        pageNum: 1,
+        pageSize: 10
+      },
+
+     
+      fieldNames: {
+        text: 'shortName',
+        value: 'id',
+        children: 'children'
+      },
+      deviceTypeOptions:[{value:-1,label:'全部'},
+      {value:-1,label:'全部'},
+      {value:-1,label:''},
+      {value:-1,label:'全部'},
+      {value:-1,label:'全部'},
+      {value:-1,label:'全部'},
+      {value:-1,label:'全部'},
+    ],
+      dicts: ["protection_status"]
+    }
+  },
+  watch: {
+    // 'search.hour': {
+    //   handler(v) {
+    //     if (v) {
+    //       this.search.dateRange = []
+    //       this.search.dateRange[0] = dayjs(new Date(new Date().valueOf() - v * 60 * 60 * 1000)) .format("YYYY-MM-DD HH:mm:ss");
+    //       this.search.dateRange[1] =  dayjs(new Date(2099, 0,1)).format("YYYY-MM-DD HH:mm:ss");
+    //       console.info(this.search)
+    //     } else {
+    //       this.search.dateRange = []
+    //     }
+    //   }
+    // }
+  },
+  created() { },
+  mounted() {
+    this.getTreeList()
+    this.search.orgId = this.orgId
+    // this.orgOptions[0].value = this.orgId
+    // this.orgOptions[0].text = this.orgName
+    this.selectedOrgName = this.orgName
+  },
+  computed: {
+    ...mapGetters(['orgName', 'orgId', 'dictionary']),
+    statusOptions() {
+      let r = [
+        { value: null, text: '布撤防状态' }
+      ]
+
+      let dict = this.getDictItem('protection_status');
+      if (dict) {
+        dict.forEach(element => {
+          r.push({ value: element.dictValue, text: element.dictLabel })
+        });
+      }
+
+      return r;
+    }
+  },
+  methods: {
+    list,
+    //获取机构树
+    getTreeList() {
+      deptTreeList(this.orgId).then(res => {
+        this.options = res.data
+        // this.orgInfo.orgId = this.orgId;
+        // this.orgInfo.orgName = this.orgName;
+        // console.log(res,'3333')
+      })
+    },
+    onItemClick() {
+      this.showOrg = true
+    },
+    //改变机构后将重新发起请求
+    changeTree(node) {
+      // console.log(selectedOptions,'aaaaaa')
+      // this.search.orgId = selectedOptions[selectedOptions.length-1].id;
+      // let option = selectedOptions[selectedOptions.length - 1]
+      this.search.orgId = node.id
+      this.selectedOrgName = node.shortName
+    },
+    orgCheckChanged(v){
+      this.search.checkSub=v;
+    },
+    onFinish({ selectedOptions }) {
+      this.showOrg = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.protection_list {
+  background-color: transparent;
+  display: block;
+
+  .container {
+
+    // overflow: auto;
+    // height: calc(100vh - 11rem);
+    .k-content-repair {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+    }
+  }
+}
+
+// .form-box {
+//   height: calc(100vh - 180px);
+//   padding: 0 30px 50px 30px;
+//   overflow: auto;
+// }
+// .radio-box {
+//   height: 100px;
+//   padding: 30px;
+// }
+// .org-name {
+//   font-size: 30px;
+//   line-height: 80px;
+//   height: 80px;
+//   text-align: center;
+// }
+</style>