布撤防跟踪功能调整

src/api/protection.js

@@ -10,19 +10,20 @@ export function list(query) {
 }
 
 // 更新状态
-export function updateStatus(id, status) {
+export function updateStatus(id, state, changeTime) {
   return request({
-    url: `/core/resumption/protectionstatus/updatestatus/${id}/${status}`,
-    method: 'post'
+    url: `/core/resumption/protectionstatus/updatestatus`,
+    method: 'post',
+    data: { id, state, changeTime }
   })
 }
 
 // 查询【请填写功能名称】详细
 export function get(id) {
   return request({
-    url: "/core/resumption/protectionstatus/" + id,
-    method: "get",
-  });
+    url: '/core/resumption/protectionstatus/' + id,
+    method: 'get'
+  })
 }
 
 // 更新状态
@@ -31,7 +32,7 @@ export function history(query) {
   // delete query.updateTime;
   return request({
     url: `/core/resumption/protectionstatus/log/page`,
-    method: "get",
-    params:query
-  });
+    method: 'get',
+    params: query
+  })
 }

src/components/timeCell/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="date-cell">
+    <van-cell v-if="disabled" :title="title" :value="isRow ? label : ''" :label="!isRow ? label : ''" />
+    <van-cell
+      v-else
+      :title="title"
+      clickable
+      :required="required"
+      :value="isRow ? label : ''"
+      :label="!isRow ? label : ''"
+      @click="clickItem"
+    >
+      <template #right-icon>
+        <van-icon name="notes-o" class="date-icon" />
+      </template>
+    </van-cell>
+    <van-popup v-model="showPicker" round position="bottom" :close-on-popstate="true" get-container="#app">
+      <!--格式化日期-->
+      <!--:formatter="formatter"-->
+      <van-datetime-picker
+        v-bind="$attrs"
+        show-toolbar
+        v-model="selected"
+        :type="dateType"
+        :columns="columns"
+        :formatter="formatter"
+        @cancel="cancelPicker"
+        @confirm="pickerConfirm"
+        confirm-button-text="确定"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import { formatDate } from '@/filters/filter'
+
+export default {
+  props: {
+    disabled: {
+      type: [Boolean, String],
+      default: false
+    },
+    //默认值
+    value: {
+      type: String,
+      default: null
+    },
+    //标题
+    title: {
+      type: String,
+      default: null
+    },
+    //时间类型，见van-datetime-picker
+    dateType: {
+      type: String,
+      default: 'date'
+    },
+    //单行显示或者多行显示
+    isRow: {
+      type: Boolean,
+      default: false
+    },
+    isAll: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: [Boolean, String],
+      default: false
+    },
+    textFormatter:{
+      type:String
+    }, 
+    valueFormatter:{
+      type:String
+    }
+  },
+  data() {
+    return {
+      showPicker: false,
+      selected: null,
+      columns: [],
+      defaultTime: null,
+      defaultFormatter: {
+        date: { valueFormatter: 'YYYY-MM-DD', textFormatter: 'YYYY-MM-DD' },
+        'year-month': { value: 'YYYY-MM', textFormatter: 'YYYY-MM' },
+        'month-day': { value: 'MM-DD', textFormatter: 'MM-DD' },
+        datetime: { value: 'YYYY-MM-DD HH:mm:ss', textFormatter: 'YYYY-MM-DD HH:mm:ss' },
+        time: { value: 'HH:mm', textFormatter: 'HH时mm分' }
+      },
+      label: ''
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (!val) {
+          if (this.isAll) {
+            this.label = '全部'
+          } else {
+            this.label = ''
+          }
+          this.selected = null
+        } else {     
+          this.selected=val;
+          this.handleLabel(val)
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {},
+  computed: {
+    valuePattern() {
+      if (this.valueFormatter) {
+        return this.valueFormatter
+      }
+
+      return this.defaultFormatter[this.dateType].valueFormatter
+    },
+    textPattern() {
+      if (this.textFormatter) {
+        return this.textFormatter
+      }
+
+      return this.defaultFormatter[this.dateType].textFormatter
+    }
+  },
+  methods: {
+    formatter(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      if (type === 'month') {
+        return val + '月'
+      }
+      if (type === 'day') {
+        return val + '日'
+      }
+      if (type === 'hour') {
+        return val + '时'
+      }
+      if (type === 'minute') {
+        return val + '分'
+      }
+      return val
+    },
+    cancelPicker() {
+      this.showPicker = false
+    },
+    pickerConfirm(val) {
+      this.handleLabel(val)
+      this.showPicker = false      
+      this.$emit('change', this.selected)
+    },
+    clickItem() {
+      this.showPicker = true
+    },
+    handleLabel(val) {
+      let time = val
+      if (this.dateType === 'time' && val!=null && typeof val === 'string') {
+        
+        // val = val.replaceAll('时', ':').replaceAll('分', '')
+        time = `${dayjs(new Date()).format('YYYY-MM-DD')} ${val}`
+      }
+      
+      this.label = formatDate(time, this.textPattern)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style lang="scss">
+.date-cell {
+  .date-icon {
+    font-weight: 500;
+    width: 42px;
+    height: 6.4vw;
+    color: #969799;
+    font-size: 42px;
+    line-height: 6.4vw;
+  }
+  .van-cell__label {
+    margin: 0;
+  }
+  .van-cell__value {
+    padding-right: 10px;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.date-cell {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  color: #323233;
+  background-color: #fff;
+}
+.date-cell::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 30px;
+  bottom: 0;
+  left: 30px;
+  border-bottom: 1px solid #ebedf0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+</style>

src/config/env.development.js

@@ -2,7 +2,7 @@
 module.exports = {
   title: 'soc-app-dev',
   baseUrl: 'http://10.87.10.55:8080', // 本地图片地址
-  baseApi: '/gaoxiong', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
+  baseApi: '/jwx', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
   APPID: 'xxx',
   APPSECRET: 'xxx',
   $cdn: 'https://www.sunniejs.cn/static'  //静态资源

src/views/menu/protection/components/dialog.stateChange.vue

@@ -0,0 +1,40 @@
+<template>
+  <van-dialog @confirm="onConfirm" v-model="show" show-cancel-button>
+    <div style="margin:10px;">
+      <div>
+        <div>是否更新{{ stateText }}时间?</div>
+      </div>
+      <time-cell required is-row title="更新时间" v-model="time" dateType="time" textFormatter="H时m分"/>
+    </div>
+  </van-dialog>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import TimeCell from '@/components/timeCell'
+
+export default {
+  components: { TimeCell },
+  data() {
+    return {
+      show: false,
+      subSystem: {},
+      stateText: '',
+      time:dayjs(new Date()) .format("H:m")
+    }
+  },
+  props: {},
+  methods: {
+    dayjs,
+    onConfirm() {  
+      this.$emit('success',this.subSystem,this.state,`${dayjs().format("YYYY-MM-DD")} ${this.time}:00`)
+    },
+    open(subSystem,state, stateText) {
+      this.subSystem = subSystem
+      this.state=state,
+      this.stateText = stateText
+      this.show = true
+    }
+  }
+}
+</script>

src/views/menu/protection/components/item.vue

@@ -4,50 +4,65 @@
       <van-cell :title="data.name">
         <template #right-icon>
           <van-button
-          size="mini"
-          color="#008cd6"
-          type="info"
-          @click.stop="updateStatus(data, '1');return false;"
-          v-if="data.status != '1' && data.orgId == orgId"
-          >布防时间登记</van-button
-        >
-        <van-button
-          size="mini"
-          color="#008cd6"
-          type="info"
-          @click.stop="updateStatus(data, '0');return false;"
-          v-if="data.status != '0' && data.orgId == orgId"
-          >撤防时间登记</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="布撤防状态" >
+      <van-cell title="布撤防状态">
         <template #right-icon>
-            <!-- <span v-if="data.status==1" style="color:rgb(0,164,46)">布防</span>
+          <!-- <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>{{ getDictLabel(data.status, 'protection_status', '未上报') }}</span>
         </template>
       </van-cell>
       <van-cell
         v-if="data.status == '0' || data.status == '1'"
         :title="data.status == '0' ? '撤防时间' : '布防时间'"
-        :value="data.statusUpdateTime"
-      />
+    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: {},
+  components: { StateChangeDiaolog },
   data() {
     return {}
   },
   computed: {
-    ...mapGetters(['orgName', 'orgId','dictionary'])
+    ...mapGetters(['orgName', 'orgId', 'dictionary'])
   },
   watch: {},
   props: {
@@ -58,30 +73,38 @@ export default {
     formatDate(dateStr) {
       return toFormatStr(dateStr)
     },
-    updateStatus(data, status) {
-      Dialog.confirm({
-        message: `是否更新${this.getDictLabel(status, 'protection_status', '未上报')}时间？`
+    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')
+        }
       })
-        .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
-        })
     },
     itemClick() {
       this.$router.push('/protection/detail?id=' + this.data.id)
     }
   },
   async created() {},
-  async mounted() {
-    
-  }
+  async mounted() {}
 }
 </script>
 <style lang="scss" scoped>
@@ -123,4 +146,8 @@ export default {
   justify-content: center;
   height: 100%;
 }
+
+.time-cell-default{
+  min-width: 60vw;
+}
 </style>