实现防区状态

src/api/protection.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 查询【请填写功能名称】列表
+export function list(query) {
+  return request({
+    url: '/core/resumption/protection/page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 更新状态
+export function updateStatus(id, status) {
+  return request({
+    url: `/core/resumption/protection/updatestatus/${id}/${status}`,
+    method: 'post'
+  })
+}
+
+// 查询【请填写功能名称】详细
+export function get(id) {
+  return request({
+    url: "/core/resumption/protection/" + id,
+    method: "get",
+  });
+}

src/api/public.js

@@ -69,6 +69,16 @@ export function deptTreeList(id) {
     }
   })
 }
+
+export function getDict(type){
+  return request({
+    url: '/system/dept/deptTree',
+    method: 'get',
+    params:{
+      id
+    }
+  })
+}
 //
 // // 获取验证码
 // export function getCodeImg() {

src/components/list/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="k-list">
+    <slot name="header" style="width:100%"> </slot>
+    <van-list v-model="isLoading" :finished="isFinished" finished-text @load="next">
+      <slot v-for="(data, index) in dataList" :data="data" :index="index"></slot>
+    </van-list>
+    <van-empty
+      v-if="dataList.length == 0 && !isLoading"
+      description="暂无数据"
+    />
+  </div>
+</template>
+<script>
+import { debounce } from 'lodash'
+
+export default {
+  components: {},
+  data() {
+    return {
+      isLoading: false,
+      isFinished: true,
+      page: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      dataList: []
+    }
+  },
+  computed: {},
+  watch: {
+    params: {
+      deep: true,
+      handler: debounce(
+        function () {
+          this.page = { pageNum: 1, pageSize: 10 }
+          this.dataList = []
+          this.next()
+        },
+        300,
+        { leading: true }
+      )
+    }
+  },
+  props: {
+    list: {type:Function,required:true},
+    params: {},
+    wrap: {
+      default() {
+        return () => {}
+      }
+    },
+    auto: {
+      default: true
+    },
+    // 是否分页
+    pageable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    //
+    async next() {
+      this.page.pageNum++
+      try {
+        this.isLoading = true
+        const data = await this.list({
+          ...this.params,
+          ...this.page
+        })
+        // 工程商列表获取接口/api/service/find/v2/all返回结构为dataList
+        const content = data.content ? data.content : data.dataList || data
+        this.isFinished = content.length < this.page.pageSize
+        await this.wrap(content)
+        if (this.page.pageNum === 0) {
+          this.dataList = content
+        } else {
+          this.dataList = this.dataList.concat(content)
+        }
+        // this.dataList.concat(content);
+        this.$emit('load', content)
+      } catch (e) {
+        console.error(e)
+        this.isFinished = true
+      } finally {
+        this.isLoading = false
+      }
+      //不分页既完成
+      if (!this.pageable) {
+        this.isFinished = true
+      }
+    }
+  },
+  async created() {},
+  async mounted() {
+    this.auto && this.next()
+  }
+}
+</script>
+<style lang="less">
+.k-list {
+}
+</style>

src/plugins/vant.js

@@ -1,6 +1,6 @@
 // 按需全局引入 vant组件
 import Vue from 'vue'
-import { Button,Form,Field, List, Cell, Tabbar, TabbarItem ,Checkbox , CheckboxGroup , Radio, RadioGroup} from 'vant'
+import { Button,Form,Field, List, Cell, Tabbar, TabbarItem ,Checkbox , CheckboxGroup , Radio, RadioGroup,Dialog, CellGroup,Card  } from 'vant'
 Vue.use(Button)
 Vue.use(Form)
 Vue.use(Field)
@@ -11,3 +11,6 @@ Vue.use(Checkbox);
 Vue.use(CheckboxGroup);
 Vue.use(Radio);
 Vue.use(RadioGroup);
+Vue.use(Dialog);
+Vue.use(CellGroup);
+Vue.use(Card);

src/router/router.config.js

@@ -47,8 +47,19 @@ export let routers = [
         name: 'workTime',
         component: () => import('@/views/menu/workTime/index'),
         meta: { title: '作息管理', keepAlive: false }
+      },
+      {
+        path: '/protection',
+        name: 'protection',
+        component: () => import('@/views/menu/protection/index'),
+        meta: { title: '防区状态', keepAlive: false }
+      },
+      {
+        path: '/protection/detail',
+        name: 'protectionDetail',
+        component: () => import('@/views/menu/protection/detail'),
+        meta: { title: '防区信息', keepAlive: false }
       }
     ],
   },
-
 ]

src/utils/optionEx.js

@@ -0,0 +1,5 @@
+const getLabel=(options,value)=>{
+    let option=options.find(o=>o.value===value);
+    return option?option.label:'';
+  }
+  export { getLabel};

src/views/home/menu.vue

@@ -51,6 +51,7 @@ export default {
             },
             {
               menu:'防区状态',
+              path:'/protection'
             },
           ]
         },

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

@@ -0,0 +1,106 @@
+<template>
+  <div class="flex flex-col justify-center k-app-edu-training-list__item">
+    <div class="top flex flex-row items-center justify-between">
+      <label style="width: 70%">{{ data.title }}</label>
+      <div style="width: 30%; text-align: right">
+        <span>{{ data.name }}</span>
+        <van-button size="mini" type="primary" @click="updateStatus(data.id, '1')" v-if="data.status != '1'"
+          >布防</van-button
+        >
+        <van-button size="mini" type="primary" @click="updateStatus(data.id, '0')" v-if="data.status != '0'"
+          >撤防</van-button
+        >
+      </div>
+    </div>
+    <van-cell-group  clickable @click="itemClick">
+      <van-cell title="防区状态" :value="getLabel(statusOptions, data.status)" />
+      <van-cell
+        v-if="data.status == '0' || data.status == '1'"
+        :title="data.status == '0' ? '撤防时间' : '布防时间'"
+        :value="data.statusUpdateTime"
+      />
+    </van-cell-group>
+  </div>
+</template>
+<script>
+import { getLabel } from '@/utils/optionEx.js'
+import * as api from '@/api/protection.js'
+import { Dialog } from 'vant'
+
+export default {
+  components: {},
+  data() {
+    return {
+      
+    }
+  },
+  computed: {},
+  watch: {},
+  props: {
+    data: {},
+    statusOptions: {}
+  },
+  methods: {
+    getLabel,
+    formatDate(dateStr) {
+      return toFormatStr(dateStr)
+    },
+    updateStatus(id, status) {
+      Dialog.confirm({
+        message: `防区状态将变更为${this.getLabel(this.statusOptions, status)},请确认`
+      })
+        .then(() => {
+          api.updateStatus(id, status)
+        })
+        .catch(() => {
+          // on cancel
+        })
+    },
+    itemClick(){
+
+    }
+  },
+  async created() {},
+  async mounted() {}
+}
+</script>
+<style lang="less" scoped>
+.k-app-edu-training-list__item {
+  //   height: 11.85rem;
+  background: #ffffff;
+  margin: 0.625rem 0.625rem 0;
+
+  .top {
+    min-height: 3rem;
+    padding: 0 1rem;
+    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%;
+}
+</style>

src/views/menu/protection/detail.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <van-cell-group>
+      <van-cell title="防区名称" :value="info.name" />
+      <van-cell title="所属机构" :value="info.orgName" />
+      <van-cell title="24小时防区" :value="info.allHour ? '是' : '否'" />
+    </van-cell-group>
+    <van-card title="布撤防历史">
+      <template>
+        <k-list url="/core/resumption/protection/log/page" :params="search">         
+          <template v-slot:header>
+            <div style="diaplay: flex; flex-direction: row;font-weight: 700;background-color:rgb(240,240,240);">
+              <span style="width: 33%">防区状态</span>
+              <span style="width: 34%">布撤防时间</span>
+              <span style="width: 33%">上报人</span>
+            </div>
+          </template>
+          <template slot-scope="{ data }">
+            <div style="diaplay: flex; flex-direction: row">
+              <span style="width: 33%">{{ getLabel(statusOptions, data.status) }}</span>
+              <span style="width: 34%">{{ data.updateTime }}</span>
+              <span style="width: 33%">{{ data.statusUpdatorName }}</span>
+            </div>
+          </template>
+        </k-list>
+      </template>
+    </van-card>
+  </div>
+</template>
+<script>
+import KList from '@/components/list/index.vue'
+import * as api from '@/api/protection.js'
+export default {
+  data() {
+    return {
+      info: {},
+      search: {
+        protectionId: this.$route.query.id
+      },
+      statusOptions: [
+        { value: -1, text: '防区状态' },
+        { value: 0, text: '撤防' },
+        { value: 1, text: '布防' },
+        { value: 2, text: '未知' }
+      ]
+    }
+  },
+  components: { KList },
+  mounted() {},
+  methods: {
+    getInfo() {
+      api.get(this.search.protectionId).then(r => {
+        this.info = r.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>

src/views/menu/protection/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="protection_list">
+    <nav-bar></nav-bar>
+    <van-search v-model="value" placeholder="请输入搜索关键词" />
+
+    <!-- <div style="width:34%;"
+        @click="
+          () => {
+            showOrg = true
+          }
+        "
+      >
+        {{ orgName }}
+      </div> -->
+    <!-- <van-cell
+        is-link
+        readonly
+        title="机构"
+        :label="orgInfo.orgName"
+        
+      /> -->
+    <van-dropdown-menu>
+      <!-- <div role="button" tabindex="0" class="van-dropdown-menu__item">
+        <span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down">
+          <div class="van-ellipsis">'abadfasd'</div></span
+        >
+      </div> -->
+      
+      <van-dropdown-item :title="orgName" @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">
+        <template slot-scope="{ data }">
+          <item :data="data"></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'
+export default {
+  components: { NavBar, KList },
+  data() {
+    return {
+      options: [],
+      search: {
+        orgId: this.orgId,
+        status: null,
+        hour: null,
+        updateTime: [],
+        pageNum: 1,
+        pageSize: 10
+      },
+      showOrg: false,
+
+      statusOptions: [
+        { value: null, text: '防区状态' },
+        { value: 0, text: '撤防' },
+        { value: 1, text: '布防' },
+        { value: 2, text: '未知' }
+      ],
+      hourOptions: [
+        { value: null, text: '上报时间' },
+        { value: 1, text: '1小时内' },
+        { value: 2, text: '2小时内' },
+        { value: 3, text: '3小时内' },
+        { value: 4, text: '4小时内' },
+        { value: 8, text: '8小时内' },
+        { value: 12, text: '12小时内' },
+        { value: 24, text: '24小时内' },
+        { value: 48, text: '48小时内' }
+      ],
+      orgOptions: [
+        {
+          value: null,
+          text: ''
+        }
+      ],
+      fieldNames: {
+        text: 'name',
+        value: 'id',
+        children: 'children'
+      }
+    }
+  },
+  watch: {
+    'search.hour': {
+      handler(v) {
+        if (v) {
+          this.search.updateTime = []
+          this.search.updateTime[0] = (new Date().valueOf() - v * 60 * 60 * 1000).toLocaleString()
+          this.search.updateTime[1] = new Date(2099, 1).toLocaleString()
+        } else {
+          this.search.updateTime = []
+        }
+      }
+    }
+  },
+  created() {
+    this.search.orgId = this.orgId
+    this.orgOptions[0].value = this.orgId
+    this.orgOptions[0].text = this.orgName
+  },
+  mounted() {
+    this.getTreeList()
+  },
+  computed: {
+    ...mapGetters(['orgName', 'orgId'])
+  },
+  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(){
+      debugger
+      this.showOrg=true;
+    },
+    //改变机构后将重新发起请求
+    changeTree({ selectedOptions }) {
+      // console.log(selectedOptions,'aaaaaa')
+      // this.search.orgId = selectedOptions[selectedOptions.length-1].id;
+      this.search.orgId = selectedOptions[selectedOptions.length - 1].id
+      this.orgName = selectedOptions[selectedOptions.length - 1].name
+    },
+    onFinish({ selectedOptions }) {
+      this.showOrg = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.protection_list {
+  background-color: #fff;
+
+  .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>

vue.config.js

@@ -76,6 +76,14 @@ module.exports = defineConfig({
           '^/gaoxiong':'/'
         }
       },
+      '/jwx': {
+        target: "http://localhost:8080",
+        // ws:true,
+        changOrigin:true,
+        pathRewrite:{
+          '^/jwx':'/'
+        }
+      },
       '/test-serve': {
         target: "http://10.87.10.91:8080",
         // ws:true,