区域配置

Signed-off-by: hsshuxian <3049816743@qq.com>

ems-ui-cloud/src/views/basecfg/area/index.vue

@@ -50,7 +50,18 @@
       <el-table-column label="区域名称" align="left" prop="areaName" />
       <el-table-column label="区域简称" align="left" prop="shortName" />
       <el-table-column label="区域编码" align="left" prop="areaCode" />
-      <el-table-column label="区域状态" align="center" prop="status" />
+      <el-table-column label="区域状态" align="center">
+        <template slot-scope="scope">
+          {{ objStatusMapping[scope.row.status] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="区块标签" align="center">
+        <template slot-scope="scope">
+              <span v-for="tag in scope.row.tagNames" :key="tag" :style="getTagStyle(tag)" class="tag-label">
+                {{ tag }}
+              </span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -79,27 +90,113 @@
     </el-table>
 
     <!-- 添加或修改区域对象对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <SubTitle title="区域基础信息" style="margin-bottom: 15px;font-size: 15px; font-weight: bold"/>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="区域代码" prop="areaCode">
-          <el-input v-model="form.areaCode" placeholder="请输入区域代码" />
-        </el-form-item>
-        <el-form-item label="上级区域" prop="parentCode">
-          <treeselect v-model="form.parentCode" :options="areaOptions" :normalizer="normalizer" placeholder="请选择上级区域代码" />
-        </el-form-item>
-        <el-form-item label="区域名称" prop="areaName">
-          <el-input v-model="form.areaName" placeholder="请输入区域名称" />
-        </el-form-item>
-        <el-form-item label="区域简称" prop="shortName">
-          <el-input v-model="form.shortName" placeholder="请输入区域简称" />
-        </el-form-item>
-        <el-form-item label="区域描述" prop="desc">
-          <el-input v-model="form.desc" placeholder="请输入区域简称" />
-        </el-form-item>
-        <el-form-item label="显示顺序" prop="orderNum">
-          <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
-        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="区域代码" prop="areaCode">
+              <el-input v-model="form.areaCode" placeholder="请输入区域代码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级区域" prop="parentCode">
+              <treeselect v-model="form.parentCode" :options="areaOptions" :normalizer="normalizer" placeholder="请选择上级区域代码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="区域名称" prop="areaName">
+              <el-input v-model="form.areaName" placeholder="请输入区域名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="区域简称" prop="shortName">
+              <el-input v-model="form.shortName" placeholder="请输入区域简称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="区域描述" prop="desc">
+              <el-input v-model="form.desc" placeholder="请输入区域描述" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" style="width: 100%"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
+      <template v-if="form.areaAttr">
+      <SubTitle title="区域属性信息"  style="margin-bottom: 15px;font-size: 15px; font-weight: bold"/>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row :gutter="20">
+        <el-col :span="12" >
+          <el-form-item label="属性代码" prop="areaAttr.areaCode">
+            <el-input v-model="form.areaAttr.areaCode" placeholder="请输入属性代码" />
+          </el-form-item>
+        </el-col>
+          <el-col :span="12">
+            <el-form-item label="区块标签" prop="areaAttr.tagCodeList">
+              <el-select v-model="form.areaAttr.tagCodeList" placeholder="请选择区块标签" multiple clearable :style="{width: '100%'}">
+                <el-option v-for="item in emsTagOptions" :label="item.label" :value="item.value" :key="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="所有单位" prop="areaAttr.attrOrg">
+              <el-input v-model="form.areaAttr.attrOrg" placeholder="请输入属性组织" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="管理单位" prop="areaAttr.mgrOrg">
+              <el-input v-model="form.areaAttr.mgrOrg" placeholder="请输入管理组织" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="areaAttr.leader">
+              <el-input v-model="form.areaAttr.leader" placeholder="请输入负责人" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="areaAttr.phone">
+              <el-input v-model="form.areaAttr.phone" placeholder="请输入电话" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="开通时间" prop="areaAttr.openDate">
+              <el-date-picker v-model="form.areaAttr.openDate" type="date" placeholder="选择日期" style="width: 100%"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="建筑面积" prop="areaAttr.floorArea">
+              <el-input v-model="form.areaAttr.floorArea" placeholder="请输入楼层面积" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="使用面积" prop="areaAttr.usableArea">
+              <el-input v-model="form.areaAttr.usableArea" placeholder="请输入可用面积" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="楼层" prop="areaAttr.floor">
+              <el-input v-model="form.areaAttr.floor" placeholder="请输入楼层" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      </template>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -112,10 +209,13 @@
 import { listArea, getArea, delArea, addArea, updateArea } from "@/api/basecfg/area";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import SubTitle from '@/components/SubTitle/index.vue'
+import { getEmsTag } from '@/api/commonApi'
 
 export default {
   name: "Area",
   components: {
+    SubTitle,
     Treeselect
   },
   data() {
@@ -136,6 +236,8 @@ export default {
       isExpandAll: true,
       // 重新渲染表格状态
       refreshTable: true,
+      // 标签选项
+      emsTagOptions: [],
       // 查询参数
       queryParams: {
         areaCode: null,
@@ -145,10 +247,34 @@ export default {
         shortName: null,
         desc: null,
         orderNum: null,
-        status: null
+        status: null,
+        tagNames:null,
+        areaAttr:{}
+      },
+      objStatusMapping: {
+        0: '正常',
+        1: '停用',
+
       },
       // 表单参数
-      form: {},
+      form: {
+        areaAttr: {
+          areaCode:null,
+          attrOrg: null,
+          mgrOrg: null,
+          leader: null,
+          phone: null,
+          openDate: null,
+          floorArea: null,
+          usableArea: null,
+          floor: null,
+          tagCodes:null,
+          tagNames:null,
+          tagCodeList:[]
+
+        }
+
+      },
       // 表单校验
       rules: {
         areaCode: [
@@ -162,8 +288,17 @@ export default {
   },
   created() {
     this.getList();
+    this.getEmsTag('Area');
   },
   methods: {
+    getTagStyle(tag) {
+      const styleMap = {
+        '公共区域': 'background-color: rgb(255,255,125); color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: inline-block; vertical-align: top;',
+        '商户区域': 'background-color: rgb(206,206,255); color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: inline-block; vertical-align: top;',
+        '热点区域': 'background-color: rgb(203,255,99); color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: inline-block; vertical-align: top;'
+      };
+      return styleMap[tag] || 'background-color: #FFFFFF; color: #000000; padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: inline-block; vertical-align: top;';
+    },
     /** 查询区域对象列表 */
     getList() {
       this.loading = true;
@@ -210,6 +345,20 @@ export default {
         orderNum: null,
         status: null
       };
+      this.form.areaAttr={
+          areaCode:null,
+          attrOrg: null,
+          mgrOrg: null,
+          leader: null,
+          phone: null,
+          openDate: null,
+          floorArea: null,
+          usableArea: null,
+          floor: null,
+          tagCodes:null,
+          tagNames:null,
+          tagCodeList:null
+      }
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -230,9 +379,13 @@ export default {
       } else {
         this.form.parentCode = 0;
       }
+      // 确保 areaAttr 和 tagCodeList 是对象和数组
+      this.form.areaAttr = this.form.areaAttr || {};
+      this.form.areaAttr.tagCodeList = this.form.areaAttr.tagCodeList || [];
       this.open = true;
       this.title = "添加区域对象";
     },
+
     /** 展开/折叠操作 */
     toggleExpandAll() {
       this.refreshTable = false;
@@ -251,6 +404,10 @@ export default {
       getArea(row.id).then(response => {
         this.form = response.data;
         this.open = true;
+        // 确保 areaAttr 和 tagCodeList 是对象和数组
+        this.form.areaAttr = this.form.areaAttr || {};
+        this.form.areaAttr.tagCodeList = this.form.areaAttr.tagCodeList || [];
+        console.log(this.form.areaAttr);
         this.title = "修改区域对象";
       });
     },
@@ -259,12 +416,14 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
+            console.log("修改",this.form)
             updateArea(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
+            console.log("xinzeng",this.form)
             addArea(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -282,6 +441,25 @@ export default {
         this.getList();
         this.$modal.msgSuccess("删除成功");
       }).catch(() => {});
+    },
+    // getEmsTag(tagModel) {
+    //   console.log("tagModel", tagModel)
+    //   getEmsTag(tagModel).then(response => {
+    //     this.emsTagOptions = response.data
+    //     console.log("分区标签",this.emsTagOptions)
+    //   })
+    // }
+    getEmsTag(tagModel) {
+      console.log("tagModel", tagModel)
+      getEmsTag(tagModel).then(response => {
+        if (response && response.data) {
+          this.emsTagOptions = response.data.map(item => ({
+            label: item.tagName,
+            value: item.tagCode
+          }));
+          console.log("分区标签", this.emsTagOptions)
+        }
+      })
     }
   }
 };

ems-ui-cloud/src/views/basecfg/zoning/index.vue

@@ -332,8 +332,10 @@ export default {
       )
     },
     getEmsTag(tagModel) {
+      console.log("tagModel", tagModel)
       getEmsTag(tagModel).then(response => {
         this.emsTagOptions = response.data
+        console.log("分区标签",this.emsTagOptions)
       })
     }
   }

ems-ui-cloud/src/views/devmgr/el/index.vue

@@ -249,6 +249,7 @@ export default {
       queryFacsParams: {
         areaCode: ''
       },
+
       objTypeOptions: [
         {code: 1, name: '设施'},
         {code: 0, name: '设备'},