联调nfc管理

package.json

@@ -20,6 +20,7 @@
     "core-js": "^3.23.3",
     "dayjs": "^1.11.9",
     "js-image-compressor": "^2.0.0",
+    "liquor-tree": "^0.2.70",
     "pdfjs-dist": "2.5.207",
     "regenerator-runtime": "^0.13.5",
     "v-calendar": "^2.4.1",

src/assets/css/index.scss

@@ -1,6 +1,10 @@
 @import './variables.scss';
 @import './mixin.scss';
 
+
+html{
+  touch-action:manipulation
+}
 html,
 body .app {
   height: 100vh;
@@ -31,3 +35,7 @@ body .app {
 .van-button--info{
   -background-color: #008cd6;
 }
+
+.van-picker__confirm{
+  color: #008cd6;
+}

src/components/OrgPicker/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="org-cell">
+    <van-popup
+      class="search-data-popup"
+      round
+      :lock-scroll="false"
+      v-model="showPicker"
+      @click-overlay='clickOverlay'
+      position="bottom">
+      <div class="header-line">
+        <div class="cancel" @click="onSearchCancel">取消</div>
+        <div class="title">{{ title }}</div>
+        <div class="sure" @click="onSearchConfirm">确定</div>
+      </div>
+
+      <van-search v-if="showSearch" placeholder="输入搜索内容" v-model="searchValue" />
+
+      <div class="lists">
+        <tree
+          v-bind="$attrs"
+          :data="depTree"
+          v-model='selected'
+          :filter="searchValue"
+          :options="options"
+          ref="tree1"/>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import  LiquorTree from 'liquor-tree'
+import {mapGetters} from 'vuex'
+export default {
+  components:{
+    [LiquorTree.name]:LiquorTree,
+  },
+  props:{
+    //父组件给的列表数据
+    dataList:{
+      type: Array,
+      default: ()=>[],
+    },
+    show:{
+      type:Boolean,
+      default:false,
+    },
+    //标题
+    title:{
+      type: String,
+      default: null,
+    },
+    closeOnClickOverlay:{
+      type:Boolean,
+      default:true
+    },
+    showSearch:{
+      type:Boolean,
+      default:true
+    },
+
+  },
+  data(){
+    return{
+      showPicker:false,
+      selected:[],
+      searchValue: "", //搜索框内容
+      options:{
+        checkbox:false,
+        keyboardNavigation:false,
+        deletion: false,
+        propertyNames:{
+          text:'name'
+        }
+      }
+    }
+  },
+  computed:{
+    ...mapGetters(['depTree']),
+  },
+  watch:{
+    show(){
+      this.showPicker = this.show;
+    },
+  },
+  created() {
+    this.$store.dispatch('getCommonTree')
+  },
+  methods:{
+    clickOverlay(){
+      this.$emit("cancel");
+      this.showPicker = false;
+    },
+    onSearchCancel() {
+      //this.selected = this.value;
+      this.$emit("cancel");
+      this.showPicker = false;
+    },
+    onSearchConfirm() {
+      this.$emit("confirm", this.selected);
+    },
+  },
+}
+</script>
+<style lang="scss">
+.org-cell{
+    .tree-arrow.has-child:after{
+      width: 14px;
+      height: 14px;
+    }
+    .tree-checkbox{
+      width: 30px;
+      height: 30px;
+    }
+    .tree-checkbox.checked:after{
+      left: 10px;
+      top: 4px;
+      height: 14px;
+      width: 6px;
+    }
+}
+
+</style>
+<style lang="scss" scoped>
+.van-cell__label{
+  margin: 0;
+}
+.search-data-popup{
+  .header-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 90px;
+  }
+  .header-line .cancel {
+    padding: 0 30px;
+    font-size: 28px;
+    color: #969799;
+  }
+  .header-line .title {
+    font-weight: 500;
+    font-size: 30px;
+    color: #343434;
+  }
+  .header-line .sure {
+    padding: 0 30px;
+    font-size: 28px;
+    color: #1989fa;
+  }
+  .lists {
+    padding: 10px 20px 20px 20px;
+    min-height: 300px;
+    max-height: 700px;
+    overflow: auto;
+    touch-action: pan-y;
+  }
+  .tip {
+    color: #666;
+    padding-bottom: 5px;
+  }
+  .van-empty{
+    padding: 0;
+  }
+}
+</style>

src/components/selectCell/index.vue

@@ -93,6 +93,7 @@ export default {
       this.showPicker = false;
     },
     pickerConfirm(val){
+      if(!val) return;
       this.label = val[this.prop.label];
       this.showPicker = false;
       this.$emit('change',val[this.prop.value])

src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   orgName: state => state.user.orgName,
   roleList: state => state.user.userRoleList,
   orgTree: state => state.app.orgTree,
+  depTree: state => state.app.depTree,
   dictionary: state => state.app.dictionary,
 }
 

src/store/modules/app.js

@@ -11,6 +11,8 @@ export default {
     orgName: null,
     //用户机构树
     orgTree: [],
+    //常规业务树
+    commonTree:[],
     //行社机构树
     depTree: [],
     //字典
@@ -26,6 +28,9 @@ export default {
     SET_DEPTREE: (state, val) => {
       state.depTree = val
     },
+    SET_COMMONTREE: (state, val) => {
+      state.commonTree = val
+    },
     SET_DICT_ITEM(state, dictItem) {
       console.log(dictItem,'dictItem' )
       state.dictionary.push(dictItem);
@@ -63,6 +68,18 @@ export default {
       })
     },
 
+    //常规业务机构树树
+    getCommonTree({commit, state}) {
+      return new Promise((resolve, reject) => {
+        deptTreeSelect().then(res => {
+          commit('SET_COMMONTREE', res.data)
+          resolve(res)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
     //获取行社机构树
     getDepTree({commit, state}) {
       return new Promise((resolve, reject) => {

src/views/menu/NFCmanage/api.js

@@ -1,47 +1,44 @@
 import request from "@/utils/request";
-//获取列表
-export function dataList(data) {
+
+//绑定
+export function binding(data) {
   return request({
-    url: "/core/question/list",
-    method: "get",
-    params: data,
+    url: "/system/bind",
+    method: "post",
+    data
   });
 }
 
-//获取详情
-export function taskDetails(orgId){
+//解绑
+export function unbinding(id) {
   return request({
-    url: "/core/question/info/"+orgId,
-    method: "get",
+    url: "/system/bind/unbinding/"+id,
+    method: "delete",
   });
 }
 
-// 问题确认
-export function confirm(data) {
+//获取详情
+export function nfcDetails(code){
   return request({
-    url: "/core/question/confirm/" + data.id,
-    method: "put",
-    data,
-    showLoading: true,
+    url: "/system/bind/appGetInfo/"+code,
+    method: "get",
   });
 }
 
-// 异议审批
-export function confirmDissent(data) {
+//获取区域
+export function areaList(id){
   return request({
-    url: "/core/question/confirmDissent/" + data.id,
-    method: "put",
-    data,
-    showLoading: true,
+    url: "/system/area/getAreaByOrg/"+id,
+    method: "get",
   });
 }
 
-// 整改
-export function reform(data) {
+
+//获取采集点位
+export function checkList(id){
   return request({
-    url: "/core/question/reform/" + data.id,
-    method: "put",
-    data,
+    url: "/system/check/getAreaCheckInfoByOrg/"+id,
+    method: "get",
   });
 }
 

src/views/menu/NFCmanage/index.vue

@@ -10,42 +10,152 @@
       <Card>
         <p class="card-title blue">标签信息</p>
         <van-cell-group v-if="!disable" :border="false">
-          <van-cell title="NFC编码" value="内容" />
-          <van-cell title="所属机构" value="内容" is-link/>
-          <van-cell title="区域名称" value="内容" is-link/>
-          <van-cell title="采集点名称" value="内容" is-link/>
+          <van-cell title="NFC编码" :value="formData.code" />
+<!--          <van-cell title="所属机构" value="内容" is-link/>-->
+          <van-cell required title="选择所属机构" :label="orgName" is-link  @click="clickItem"/>
+          <select-cell required :disabled="areaList.length == 0" v-model="formData.areaId" title="选择区域" :prop="props" :dataList="areaList"></select-cell>
+          <select-cell required :disabled="pointList.length == 0" v-model="formData.checkId" title="选择采集点" :prop="props" :dataList="pointList"></select-cell>
         </van-cell-group>
         <van-cell-group v-else :border="false">
-          <van-cell title="NFC编码" value="内容" />
-          <van-cell title="所属机构" value="内容" />
-          <van-cell title="区域名称" value="内容" />
-          <van-cell title="采集点名称" value="内容" />
+          <van-cell title="NFC编码" :value="nfcInfo.code" />
+          <van-cell title="所属机构" :value="nfcInfo.orgId" />
+          <van-cell title="区域名称" :value="nfcInfo.areaId" />
+          <van-cell title="采集点名称" :value="nfcInfo.checkId" />
         </van-cell-group>
       </Card>
+      <div class="btn-box">
+        <van-button v-if="!disable" type="info" size="large" style="margin-bottom:20px;" @click="bindNfc">绑定</van-button>
+        <van-button v-if="disable && nfcInfo.code" type="danger" size="large" @click="unBindNfc">解绑</van-button>
+      </div>
     </div>
+    <org-picker
+      :show="showPicker"
+      @cancel="cancelPicker"
+      @confirm="changeOrg">
+    </org-picker>
   </div>
 </template>
 
 <script>
 import NavBar from '@/components/NavBar';
 import Card from '@/components/card';
+import OrgPicker from '@/components/OrgPicker';
+import SelectCell from '@/components/selectCell';
 import {mapGetters} from "vuex";
+import {binding,unbinding,nfcDetails,areaList,checkList} from './api';
 export default {
-  components:{NavBar,Card},
+  components:{
+    NavBar,
+    Card,
+    OrgPicker,
+    SelectCell,
+  },
   data(){
     return{
-      disable:false,
+      disable:true,
+      showPicker:false,
+      props:{
+        label:'name',
+        value:'id',
+      },
+      areaList:[],
+      pointList:[],
+      orgName:'',
+      nfcInfo:{
+        code:null,
+        orgId: '无',
+        areaId:'无',
+        checkId:'无',
+      },
+      formData:{
+        code:null,
+        orgId: null,
+        areaId:null,
+        checkId:null,
+      },
     }
   },
   mounted() {
 
   },
   computed:{
-    ...mapGetters(['orgName','orgId']),
+    ...mapGetters(['orgId']),
   },
   methods:{
+
+    bindNfc(){
+      let flag = this.checkData();
+      if(!flag) return
+      binding(this.formData).then(res=>{
+        this.$toast('绑定成功');
+      })
+    },
+
+    unBindNfc(){
+      let flag = this.checkData();
+      if(!flag) return
+      unbinding(this.formData).then(res=>{
+        this.$toast('解绑成功');
+      })
+    },
+
+    getAreaList(){
+      areaList(this.formData.orgId).then(res=>{
+        this.areaList = res.data;
+      })
+    },
+    getCheckList(){
+      checkList(this.formData.orgId).then(res=>{
+        this.pointList = res.data;
+      })
+    },
     getNfc(){
-     alert('扫描')
+     alert('模拟扫描');
+     let code = '123144545' // '3333333333'
+     nfcDetails(code).then(res=>{
+       console.log(res,'res')
+       if(res.data){
+         this.nfcInfo = res.data;
+       }else {
+         this.$toast('未查询到相关信息');
+         this.formData.code = code;
+         this.disable = false;
+       }
+     })
+    },
+    changeOrg(selected){
+      this.showPicker = false;
+      this.orgName = selected[0].text;
+      this.formData.orgId = selected[0].id;
+      console.log(selected,'id')
+      this.getAreaList();
+      this.getCheckList();
+    },
+    cancelPicker(){
+      this.showPicker = false;
+    },
+    checkData(){
+      if(!this.formData.code){
+        this.$toast('请先扫描NFC标签');
+        return false;
+      }
+      if(!this.formData.orgId){
+        this.$toast('请选择所属机构');
+        return false;
+      }
+      if(!this.formData.areaId){
+        this.$toast('请选择区域');
+        return false;
+      }
+      if(!this.formData.checkId){
+        this.$toast('请选择采集点');
+        return false;
+      }
+      return true;
+    },
+    clickItem(){
+      console.log(111)
+      this.showPicker = true;
     },
   }
 }
@@ -71,9 +181,8 @@ export default {
     padding:0 20px;
     margin-top:24px;
     >div{
-      width: 500px;
-      height: 500px;
-      background-color: rgba(0, 140, 214, 0.69);
+      width: 400px;
+      height: 400px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
@@ -88,13 +197,16 @@ export default {
   .blue{
     color:#008cd6;
   }
+  .btn-box{
+    margin-top: 40px;
+  }
   .nfc-btn {
     /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
     animation: donghua 2.4s infinite;
   }
 
   .nfc-btn {
-    margin: 60px;
+    margin: 50px;
     width: 32%;
     height: 48vh;
     background: linear-gradient(-45deg, #dae, #3c9, #09f, #66f);
@@ -108,15 +220,12 @@ export default {
   @keyframes donghua {
     0% {
       transform: scale(1);
-      /* 注意rgba中的a的设置 */
-      box-shadow: 0 0 0 0 rgba(204, 73, 152, 60%);
+      box-shadow: 0 0 0 0 rgba(0, 153, 255, 60%);
     }
-
     60% {
       transform: scale(1);
-      box-shadow: 0 0 0 18px rgba(204, 73, 152, 0%);
+      box-shadow: 0 0 0 18px rgba(0, 153, 255, 0%);
     }
-
     100% {
       transform: scale(1);
       box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);

vue.config.js

@@ -85,7 +85,7 @@ module.exports = defineConfig({
           }
       },
       '/luowei': {
-        target: "http://10.87.10.55:8080",
+        target: "http://10.87.10.47:8080",
         // ws:true,
         changOrigin:true,
         pathRewrite:{

yarn.lock

@@ -4098,6 +4098,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+liquor-tree@^0.2.70:
+  version "0.2.70"
+  resolved "https://registry.npmmirror.com/liquor-tree/-/liquor-tree-0.2.70.tgz#451ec5a0041994f82f895f1fe47c8cc81a034845"
+  integrity sha512-5CiMlDVmuveYwwc27mYe1xZ3J4aHhZBErUhIp9ov4v4wIBso+s5JAByOOit4iOCMCQ5ODd8VggbKymzZREYbBQ==
+
 loader-runner@^4.1.0, loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"