场所采集

guoshilong

2023-10-30 12a9abcc3f3e51bc51d87d58e82b8cf410e33f48

 subPackage/workbench/views/cscj.vue

@@ -5,28 +5,35 @@
            <box-title title="基础信息"></box-title>
         </view>
         <view class="item">
            <u-form-item class="form-item" labelWidth="100" label="场所名称:" required prop="location">
               <u--input border="none" v-model="form.location" placeholder="请输入当前位置">

            <!--             <u-form-item class="form-item" labelWidth="100" label="场所地址:" required prop="location">
               <u--input border="none" v-model="form.location" placeholder="请选择场所地址">
               </u--input>
            </u-form-item> -->

            <u-form-item class="form-item" labelWidth="100" label="场所名称:" required prop="placeName">
               <u--input border="none" v-model="form.placeName" placeholder="请输入当前位置">
               </u--input>
            </u-form-item>

            <u-form-item @click="popup" class="form-item" labelWidth="100" label="标签:" required prop="location">
            <u-form-item @click="popup" class="form-item" labelWidth="100" label="标签:" required prop="label">
               <u--input border="none" placeholder="请选择地址标签">
               </u--input>
               <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
            <view v-if="showLabelList.length>0" class="label">
               <view v-for="(item,index) in showLabelList" :key="index" class="activeLabel">
                  <u-tag size="mini" :text="item.text"></u-tag>
                  <u-tag closable :show="!item.isClose" size="mini" @close="delTag(item)"
                     :text="item.text"></u-tag>
               </view>
            </view>

            <u-form-item class="form-item" labelWidth="100" label="备注:" required prop="location">
            <u-form-item class="form-item" labelWidth="100" label="备注:" prop="location">
               <u--input border="none" v-model="form.remark" placeholder="请输入备注">
               </u--input>
            </u-form-item>

            <u-form-item class="form-item" labelWidth="100" label="经纬度:" required prop="location">
            <u-form-item class="form-item" labelWidth="100" label="经纬度:" prop="location">
               <u--input border="none" v-model="form.jwd" placeholder="请输入经纬度">
               </u--input>
            </u-form-item>
@@ -37,11 +44,11 @@
         </view>

         <view class="item">
            <u-form-item class="form-item" labelWidth="100" label="场所负责人:" required prop="location">
               <u--input border="none" v-model="form.charge" placeholder="请输入场所负责人">
            <u-form-item class="form-item" labelWidth="100" label="场所负责人:" prop="principal">
               <u--input border="none" v-model="form.principal" placeholder="请输入场所负责人">
               </u--input>
            </u-form-item>
            <u-form-item class="form-item" labelWidth="100" label="手机号:" required prop="location">
            <u-form-item class="form-item" labelWidth="100" label="手机号:" prop="location">
               <u--input border="none" v-model="form.phone" placeholder="请输入手机号">
               </u--input>
            </u-form-item>
@@ -65,16 +72,44 @@
      </u-form>

      <view class="box-title">
         <view>
            <box-title title="综治网格"></box-title>
         </view>
         <box-title title="综治网格">
            <template slot="titleMore">
               <view class="title-more">
                  <view class="red item"></view>
                  <view class="orange item">85.9</view>
                  <view class="green item"></view>
               </view>
            </template>
         </box-title>
      </view>

      <view class="item">
         <lineItem :dataInfo="dataInfo">
         <lineItem :dataInfo="comprehensiveData.basic">
         </lineItem>

         <lineItem :dataInfo="dataInfo1">
         <lineItem :dataInfo="comprehensiveData.scene">
            <template v-slot:pic="{scope}">
               {{scope.value}}
            </template>
         </lineItem>
      </view>

      <view class="box-title">
         <box-title title="公安网格">
            <template slot="titleMore">
               <view class="title-more">
                  <view class="red item"></view>
                  <view class="orange item">85.9</view>
                  <view class="green item"></view>
               </view>
            </template></box-title>
      </view>

      <view class="item">
         <lineItem :dataInfo="comprehensiveData.basic">
         </lineItem>

         <lineItem :dataInfo="comprehensiveData.scene">
            <template v-slot:pic="{scope}">
               {{scope.value}}
            </template>
@@ -82,9 +117,16 @@
      </view>


      <view class="bottom">
         <view class="btn">
            <u-button @click="addRent" type="primary" text="提交"></u-button>
         </view>
      </view>



      <uni-popup class="citys_win popup_win" ref="uniPopup" type="bottom">
         <wyh-tree-select :items="items" title="标签选择" :showNav="true" defaultActiveColor="#4586fe"
         <wyh-tree-select :items="labelList" title="标签选择" :showNav="true" defaultActiveColor="#4586fe"
            :activeIds="activeIds" @clickItem="labelClick" :showCancel="false" :showConfirm="false">
         </wyh-tree-select>
      </uni-popup>
@@ -96,6 +138,9 @@
<script>
   import uploadMixin from "@/mixin/uploadMixin";
   import lineItem from "@/subPackage/workbench/components/lineItem.vue"
   import {
      getLabelList
   } from "@/api/label/label";
   export default {
      mixins: [uploadMixin],
      components: {
@@ -104,77 +149,125 @@
      data() {
         return {
            form: {},
            rules: {},
            rules: {
               'userInfo.name': {
                  type: 'string',
                  required: true,
                  message: '请填写姓名',
                  trigger: ['blur', 'change']
               },
            },

            items: [{
            labelList: [{
               text: '全部标签',
               children: [{
                     text: '餐馆',
                     id: 1,
                  },
                  {
                     text: '旅馆、招待所',
                     id: 2,
                  }, {
                     text: '居民住宿',
                     id: 3
                  }
               ],
               children: [],
               dot: false
            }, ],

            dataInfo: [{
                  label: "社区名称",
                  value: "暂无数据"
               },
               {
                  label: "网格名称",
                  value: "暂无数据"
               },
               {
                  label: "网格员",
                  value: "暂无数据"
               },
               {
                  label: "联系电话",
                  value: "暂无数据"
               }
            ],

            dataInfo1: [{
                  label: "场所照片",
                  value: "",
                  useSlot: "pic",
               },
               {
                  label: "采集人",
                  value: "未完善"
               },
               {
                  label: "采集时间",
                  value: "未完善"
               },
               {
                  label: "场所负责人",
                  value: "未完善",
               },
               {
                  label: "采集人",
                  value: "未完善"
               },
               {
                  label: "采集时间",
                  value: "未完善",
               }
            ],
            comprehensiveData: {
               basic: [{
                     label: "社区名称",
                     value: "暂无数据"
                  },
                  {
                     label: "网格名称",
                     value: "暂无数据"
                  },
                  {
                     label: "网格员",
                     value: "暂无数据"
                  },
                  {
                     label: "联系电话",
                     value: "暂无数据"
                  }
               ],
               scene: [{
                     label: "场所照片",
                     value: "",
                     useSlot: "pic",
                  },
                  {
                     label: "采集人",
                     value: "未完善"
                  },
                  {
                     label: "采集时间",
                     value: "未完善"
                  },
                  {
                     label: "场所负责人",
                     value: "未完善",
                  },
                  {
                     label: "采集人",
                     value: "未完善"
                  },
                  {
                     label: "采集时间",
                     value: "未完善",
                  },
                  {
                     label: "历史事件",
                     value: "未完善",
                  }
               ],
            },
            publicData: {
               basic: [{
                     label: "公安局",
                     value: "暂无数据"
                  },
                  {
                     label: "派出所",
                     value: "暂无数据"
                  },
                  {
                     label: "辖区民警",
                     value: "暂无数据"
                  },
                  {
                     label: "联系电话",
                     value: "暂无数据"
                  }
               ],
               scene: [{
                     label: "消防照片",
                     value: "",
                     useSlot: "pic",
                  },
                  {
                     label: "采集人",
                     value: "未完善"
                  },
                  {
                     label: "采集时间",
                     value: "未完善"
                  },
                  {
                     label: "消防负责人",
                     value: "未完善",
                  },
                  {
                     label: "采集人",
                     value: "未完善"
                  },
                  {
                     label: "采集时间",
                     value: "未完善",
                  },
                  {
                     label: "历史事件",
                     value: "未完善",
                  }
               ],
            },

            activeIds: [],
            showLabelList: []
         }
      },
      created() {

      },
      created() {},
      mounted() {

      },
@@ -182,7 +275,7 @@

      },
      onShow() {

         this.getLabel()
      },
      methods: {
         //弹出层打开
@@ -190,22 +283,44 @@
            this.$refs.uniPopup.open()
         },

         getLabel() {
            getLabelList({
               size: -1
            }).then(res => {
               let data = res.data.records
               data.sort((a, b) => a.sort - b.sort)

               data.forEach(label => {
                  this.labelList[0].children.push({
                     id: label.id,
                     text: label.labelName
                  })
               })
            })
         },

         labelClick(item) {

            //判断label是否已在
            const label = this.showLabelList.find(e => e.id == item.id)

            if (label) {
               //在，去掉
               this.showLabelList = this.showLabelList.filter(e => e.id != label.id)
               this.activeIds = this.activeIds.filter(e => id != label.id)
               this.activeIds = this.activeIds.filter(e => e != label.id)
            } else {
               //不在，添加
               item.isClose = false
               this.showLabelList.push(item)
               this.activeIds.push(item.id)
            }

            this.showLabelList.sort((a, b) => a.id - b.id)
            this.showLabelList.sort((a, b) => a.sort - b.sort)

         },
         delTag(label) {
            label.isClose = true
            this.showLabelList = this.showLabelList.filter(e => e.id != label.id)
            this.activeIds = this.activeIds.filter(e => e != label.id)

         }
      }
@@ -216,13 +331,30 @@
   .container {
      position: relative;
      width: 100%;
      height: 100%;
      // height: 100%;
      display: flex;
      flex-direction: column;
      background: #F9F9FA;

      .box-title {
         padding: 10px 0;

         .title-more {
            display: flex;
            align-items: center;
            height: 100%;

            .item {
               width: 50rpx;
               height: 40rpx;
               color: #ffffff;
               padding: 6rpx;
               font-size: 2rpx;
               text-align: center;
               line-height: 20px;
            }

         }
      }

      .item {
@@ -237,10 +369,12 @@
            padding: 10rpx 30rpx;
            display: flex;
            background-color: #ffffff;
            flex-wrap: wrap;

            .activeLabel {
               // width: 80rpx;
               margin-left: 10rpx;
               margin-top: 10rpx
            }
         }

@@ -252,5 +386,31 @@
         background-color: #ffffff;
         padding: 40rpx 30rpx;
      }

      .bottom {
         padding: 20rpx;
         background-color: #ffffff;
         display: flex;
         justify-content: center;
         align-items: center;

         .btn {
            width: calc(100% - 40rpx);
         }
      }
   }

   .red {
      background-color: red;
      border-radius: 10rpx 0rpx 0rpx 10rpx;
   }

   .orange {
      background-color: orange;
   }

   .green {
      background-color: green;
      border-radius: 0rpx 10rpx 10rpx 0rpx;
   }
</style>