Hwt 2 years ago
parent
commit
296136de6c

+ 416 - 381
energyManagement/src/views/instrumentManagement/popups/tabIndex.vue

@@ -1,78 +1,113 @@
 <template>
-    <div class="detail-tab">
-        <div class="tab_head">
-            <zz-tabs :tabs="tabs" :value="value" @change="change"></zz-tabs>
+  <div class="detail-tab">
+    <div class="tab_head">
+      <zz-tabs
+        :tabs="tabs"
+        :value="value"
+        @change="change"
+      ></zz-tabs>
+    </div>
+    <div class="box">
+      <div class="query-box">
+        <div class="left_search">
+          <span
+            class="el-mgRight-sm"
+            v-show="value == 'history'"
+          > 上报时间 </span>
+          <span
+            class="el-mgRight-sm"
+            v-show="value == 'alarm'"
+          >告警时间</span>
+          <span
+            class="el-mgRight-sm"
+            v-show="value == 'valveNote'"
+          >操作时间</span>
+          <span>
+            <el-date-picker
+              v-model="dataValue"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :value-format="dateType"
+              :picker-options="endDatePicker"
+              @change="timeQuery"
+              clearable
+            >
+            </el-date-picker>
+          </span>
         </div>
-        <div class="box">
-            <div class="query-box">
-                <div class="left_search">
-                    <span class="el-mgRight-sm" v-show="value == 'history'"> 上报时间 </span>
-                    <span class="el-mgRight-sm" v-show="value == 'alarm'">告警时间</span>
-                    <span class="el-mgRight-sm" v-show="value == 'valveNote'">操作时间</span>
-                    <span>
-                        <el-date-picker
-                            v-model="dataValue"
-                            type="daterange"
-                            range-separator="至"
-                            start-placeholder="开始日期"
-                            end-placeholder="结束日期"
-                            :value-format="dateType"
-                            :picker-options="endDatePicker"
-                            @change="timeQuery"
-                            clearable
-                        >
-                        </el-date-picker>
-                    </span>
-                </div>
-                <el-tooltip class="item" effect="light" placement="bottom" content="导出">
-                    <i class="zoniot_font zoniot-icon-daochu2 tab_head-right" @click="exportExcel()"></i>
-                </el-tooltip>
-            </div>
-            <div class="box__wrap" v-show="value == 'history'">
-                <zz-table
-                    :cols="Cols"
-                    :settings="{ showIndex: true, stripe: true }"
-                    height="200"
-                    :data="
+        <el-tooltip
+          class="item"
+          effect="light"
+          placement="bottom"
+          content="导出"
+        >
+          <i
+            class="zoniot_font zoniot-icon-daochu2 tab_head-right"
+            @click="exportExcel()"
+          ></i>
+        </el-tooltip>
+      </div>
+      <div
+        class="box__wrap"
+        v-show="value == 'history'"
+      >
+        <zz-table
+          :cols="Cols"
+          :settings="{ showIndex: true, stripe: true }"
+          height="200"
+          :data="
                         historyDataList.slice(
                             (hispageset.currentPage - 1) * hispageset.pageSize,
                             hispageset.currentPage * hispageset.pageSize
                         )
                     "
-                    :loading="mixins_onQuery"
-                    :pageset="hispageset"
-                    @page-change="hispageChange"
-                ></zz-table>
-                <div class="echart_content" v-if="value == 'history'">
-                    <el-echart :option="chartoption"></el-echart>
-                </div>
-            </div>
-            <div class="box__wrap" ref="alarmbox" v-show="value == 'alarm'">
-                <zz-table
-                    class="fullheight"
-                    :cols="AlertsCols"
-                    :settings="{ showIndex: true, stripe: true }"
-                    :data="mixins_list"
-                    :loading="mixins_onQuery"
-                    :pageset="mixins_pageset"
-                    @page-change="pageChange"
-                >
-                </zz-table>
-            </div>
-            <div class="box__wrap" ref="valvebox" v-show="value == 'valveNote'">
-                <zz-table
-                    :cols="valveInfoCols"
-                    class="fullheight"
-                    :settings="{ showIndex: true, stripe: true }"
-                    :data="mixins_list"
-                    :loading="mixins_onQuery"
-                    :pageset="mixins_pageset"
-                    @page-change="pageChange"
-                >
-                </zz-table>
-            </div>
+          :loading="mixins_onQuery"
+          :pageset="hispageset"
+          @page-change="hispageChange"
+        ></zz-table>
+        <div
+          class="echart_content"
+          v-if="value == 'history'"
+        >
+          <el-echart :option="chartoption"></el-echart>
         </div>
+      </div>
+      <div
+        class="box__wrap"
+        ref="alarmbox"
+        v-show="value == 'alarm'"
+      >
+        <zz-table
+          class="fullheight"
+          :cols="AlertsCols"
+          :settings="{ showIndex: true, stripe: true }"
+          :data="mixins_list"
+          :loading="mixins_onQuery"
+          :pageset="mixins_pageset"
+          @page-change="pageChange"
+        >
+        </zz-table>
+      </div>
+      <div
+        class="box__wrap"
+        ref="valvebox"
+        v-show="value == 'valveNote'"
+      >
+        <zz-table
+          :cols="valveInfoCols"
+          class="fullheight"
+          :settings="{ showIndex: true, stripe: true }"
+          :data="mixins_list"
+          :loading="mixins_onQuery"
+          :pageset="mixins_pageset"
+          @page-change="pageChange"
+        >
+        </zz-table>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -82,338 +117,338 @@ import { getRowStr } from './basedata';
 import { deviceLoader } from '@/utils/basedata.js';
 import { chartOption } from './echartoption';
 export default {
-    mixins: [list],
-    props: ['params'],
-    components: {},
-    data() {
-        let _this = this;
-        return {
-            deviceLoader,
-            type: '',
-            chartoption: {}, //
-            value: 'history',
-            dateType: 'yyyyMMdd',
-            tabs: [
-                {
-                    value: 'history',
-                    label: '历史数据'
-                },
-                {
-                    value: 'alarm',
-                    label: '告警记录'
-                },
-                {
-                    value: 'valveNote',
-                    label: '阀控记录'
-                }
-                // {
-                //     value: 'replace',
-                //     label: '换表记录'
-                // }
-            ],
-            dataUnit: '',
-            dataValue: [],
-            endDatePicker: {
-                disabledDate: (time) => {
-                    return time.getTime() > new Date().getTime();
-                }
-            },
-            hispageset: {
-                total: 0,
-                pageSize: 15,
-                pageNum: 1,
-                currentPage: 1,
-                pageSizes: [15, 30, 60, 120]
-            },
-            Cols: [
-                { label: '上报时间', prop: 'receiveTime' },
-                { label: '止度', prop: 'receiveTime' },
-                { label: '阀门状态', prop: 'receiveTime' },
-                { label: '设备状态', prop: 'receiveTime' }
-            ],
-            AlertsCols,
-            /* 设备详情-阀控记录列表展示信息配置 */
-            valveInfoCols: [
-                {
-                    label: '操作原因',
-                    prop: 'operationCause'
-                },
-                {
-                    label: '操作类型',
-                    prop: 'operationType',
-                    format(val, data) {
-                        let name = '';
-                        debugger;
-                        if (_this.$parent.detail.categoryId === 1) {
-                            name = '阀';
-                        } else {
-                            name = '闸';
-                        }
-                        switch (val) {
-                            case 0:
-                                return '关' + name;
-                            case 1:
-                                return '开' + name;
-                            default:
-                                return '-';
-                        }
-                    }
-                },
-                {
-                    label: '操作结果',
-                    prop: 'operationResult',
-                    format(val, data) {
-                        let name = '';
-                        debugger;
-                        if (_this.$parent.detail.categoryId === 1) {
-                            name = '阀';
-                        } else {
-                            name = '闸';
-                        }
-                        switch (val) {
-                            case 0:
-                                return '关' + name;
-                            case 1:
-                                return '开' + name;
-                            case 2:
-                                return '执行中';
-                            default:
-                                return '-';
-                        }
-                    }
-                },
-                {
-                    label: '操作时间',
-                    prop: 'operationDate'
-                },
-                {
-                    label: '处理时间',
-                    prop: 'finishDate'
-                }
-            ],
-            historyCols, //告警列表表头
-            getRowStr,
-            historyDataList: []
-        };
-    },
-    created() {
-        if (!!this.$route.query.type && this.$route.query.type == 2) {
-            this.tabs[2].label = '闸控记录';
-        }
-        this.initDate('YYYYMMDD');
-        this.mixins_query = {
-            deviceId: this.params.id || '',
-            startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
-            endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
-        };
-
-        new Promise((resolve) => {
-            this.getDeviceMeasuringPoint(resolve);
-        }).then(() => {
-            this.change('history');
-        });
-    },
-    methods: {
-        initDate(type) {
-            let date = new Date();
-            this.dataValue = [this.$moment(new Date(date.getFullYear(), date.getMonth(), 1)).format(type), this.$moment().format(type)];
+  mixins: [list],
+  props: ['params'],
+  components: {},
+  data () {
+    let _this = this;
+    return {
+      deviceLoader,
+      type: '',
+      chartoption: {}, //
+      value: 'history',
+      dateType: 'yyyyMMdd',
+      tabs: [
+        {
+          value: 'history',
+          label: '历史数据'
         },
-        change(value) {
-            this.value = value;
-            if (value == 'history') {
-                this.getHistorical();
-                this.getDiscount();
-            } else if (value == 'alarm') {
-                this.getAllHandleAbnormal();
-            } else if (value == 'valveNote') {
-                this.getValveData();
-            }
+        {
+          value: 'alarm',
+          label: '告警记录'
         },
-        hispageChange(obj) {
-            if (obj.pageSize) {
-                this.hispageset.pageSize = obj.pageSize;
+        {
+          value: 'valveNote',
+          label: '阀控记录'
+        }
+        // {
+        //     value: 'replace',
+        //     label: '换表记录'
+        // }
+      ],
+      dataUnit: '',
+      dataValue: [],
+      endDatePicker: {
+        disabledDate: (time) => {
+          return time.getTime() > new Date().getTime();
+        }
+      },
+      hispageset: {
+        total: 0,
+        pageSize: 15,
+        pageNum: 1,
+        currentPage: 1,
+        pageSizes: [15, 30, 60, 120]
+      },
+      Cols: [
+        { label: '上报时间', prop: 'receiveTime' },
+        { label: '止度', prop: 'receiveTime' },
+        { label: '阀门状态', prop: 'receiveTime' },
+        { label: '设备状态', prop: 'receiveTime' }
+      ],
+      AlertsCols,
+      /* 设备详情-阀控记录列表展示信息配置 */
+      valveInfoCols: [
+        {
+          label: '操作原因',
+          prop: 'operationCause'
+        },
+        {
+          label: '操作类型',
+          prop: 'operationType',
+          format (val, data) {
+            let name = '';
+            debugger;
+            if (_this.$parent.detail.categoryId === 1) {
+              name = '阀';
+            } else {
+              name = '闸';
             }
-            if (obj.page) {
-                this.hispageset.currentPage = obj.page;
+            switch (val) {
+              case 0:
+                return '关' + name;
+              case 1:
+                return '开' + name;
+              default:
+                return '-';
             }
+          }
         },
-
-        // 历史数据
-        getDiscount() {
-            this.$http
-                .post('/sc-energy/device/getQuantity', this.mixins_query)
-                .then(({ data, status }) => {
-                    if (status === 0) {
-                        let dataoption = { xData: [], yData: [] };
-                        if (data.length > 0) {
-                            data.map((item) => {
-                                if (item.date) {
-                                    let itemdata = item.date ? item.date.toString().replace(/(\d{4})(\d{2})(\d{2})/gi, '$1-$2-$3') : '';
-                                    itemdata = itemdata ? itemdata.slice(5) : '';
-                                    if (itemdata) {
-                                        dataoption.xData.push(itemdata);
-                                        dataoption.yData.push(item.value || '0');
-                                    }
-                                }
-                            });
-                        }
-                        this.chartoption = chartOption('#29B6FF', dataoption, '用水量', '#29B6FF', 't');
-                    }
-                })
-                .catch((err) => {
-                    this.chartoption = {};
-                    console.log(err);
-                });
-        },
-        getHistorical() {
-            this.historyDataList = [];
-            // 获取历史数据列表
-            this.mixins_query = {
-                deviceId: this.params.id || '',
-                startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
-                endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
-            };
-            if (this.params.productId) {
-                this.$http
-                    .post('/sc-energy/device/getData', this.mixins_query)
-                    .then(({ data, status }) => {
-                        if (status === 0) {
-                            if (data.length) {
-                                let dateTimeCol;
-                                this.historyDataList = [];
-                                for (let [k, v] of data.entries()) {
-                                    dateTimeCol = _.map(v);
-
-                                    let timeformat = this.$moment(Number(dateTimeCol[0])).format('YYYY-MM-DD HH:mm:ss');
-                                    this.historyDataList.push(Object.assign({ receiveTime: timeformat }, data[k].measureData));
-                                }
-                                this.hispageset.total = data.length;
-                                this.mixins_onQuery = false;
-                            } else {
-                                this.mixins_onQuery = false;
-                            }
-                        } else {
-                            this.mixins_onQuery = false;
-                        }
-                    })
-                    .catch(() => {
-                        this.mixins_onQuery = false;
-                    });
+        {
+          label: '操作结果',
+          prop: 'operationResult',
+          format (val, data) {
+            let name = '';
+            debugger;
+            if (_this.$parent.detail.categoryId === 1) {
+              name = '阀';
             } else {
-                this.mixins_onQuery = false;
+              name = '闸';
             }
+            switch (val) {
+              case 0:
+                return '关' + name;
+              case 1:
+                return '开' + name;
+              case 2:
+                return '执行中';
+              default:
+                return '-';
+            }
+          }
         },
-        //告警
-        getAllHandleAbnormal() {
-            this.mixins_list = [];
-            this.mixins_dataUrl = '/sc-energy/alarm/getPage';
-            this.mixins_post = 'get';
-            this.mixins_query = {
-                categoryId: this.params.categoryId || '',
-                deviceId: this.params.id || '',
-                startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
-                endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
-            };
-            this.mixins_search();
-        },
-        // 阀控记录
-        getValveData() {
-            this.mixins_list = [];
-            this.mixins_post = 'get';
-            this.mixins_dataUrl = '/sc-energy/device/command/page';
-            this.mixins_query = {
-                deviceId: this.params.id || '',
-                startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
-                endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
-            };
-            this.mixins_search();
+        {
+          label: '操作时间',
+          prop: 'operationDate'
         },
+        {
+          label: '处理时间',
+          prop: 'finishDate'
+        }
+      ],
+      historyCols, //告警列表表头
+      getRowStr,
+      historyDataList: []
+    };
+  },
+  created () {
+    if (!!this.$route.query.type && this.$route.query.type == 2) {
+      this.tabs[2].label = '闸控记录';
+    }
+    this.initDate('YYYYMMDD');
+    this.mixins_query = {
+      deviceId: this.params.id || '',
+      startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
+      endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
+    };
 
-        timeQuery() {
-            (this.mixins_query.startDate = !!this.dataValue ? `${this.dataValue[0]}` : ''),
-                (this.mixins_query.endDate = !!this.dataValue ? `${this.dataValue[1]}` : '');
-            this.change(this.value);
-        },
-        getDeviceMeasuringPoint(resolve) {
-            if (this.params && this.params.productId) {
-                this.$http
-                    .get('/sc-energy/measuring/point/find', { productId: this.params.productId })
-                    .then(({ status, msg, data = [] }) => {
-                        if (status === 0) {
-                            this.pointList = data;
+    new Promise((resolve) => {
+      this.getDeviceMeasuringPoint(resolve);
+    }).then(() => {
+      this.change('history');
+    });
+  },
+  methods: {
+    initDate (type) {
+      let date = new Date();
+      this.dataValue = [this.$moment(new Date(date.getFullYear(), date.getMonth(), 1)).format(type), this.$moment().format(type)];
+    },
+    change (value) {
+      this.value = value;
+      if (value == 'history') {
+        this.getHistorical();
+        this.getDiscount();
+      } else if (value == 'alarm') {
+        this.getAllHandleAbnormal();
+      } else if (value == 'valveNote') {
+        this.getValveData();
+      }
+    },
+    hispageChange (obj) {
+      if (obj.pageSize) {
+        this.hispageset.pageSize = obj.pageSize;
+      }
+      if (obj.page) {
+        this.hispageset.currentPage = obj.page;
+      }
+    },
 
-                            if (data.length) {
-                                this.Cols = [{ label: '上报时间', prop: 'receiveTime', width: 200 }];
-                                data.map((item, index) => {
-                                    this.Cols.push({
-                                        label: item.measuringName,
-                                        prop: item.measuringCode,
-                                        format(value) {
-                                            if (item.dictList.length) {
-                                                let newValue;
-                                                item.dictList.map((item, index) => {
-                                                    if (item.dataValue == value) {
-                                                        newValue = item.dataName;
-                                                    }
-                                                });
-                                                return newValue;
-                                            } else {
-                                                return value;
-                                            }
-                                        }
-                                    });
-                                });
-                            } else {
-                                this.mixins_onQuery = false;
-                            }
-                        } else {
-                            this.mixins_onQuery = false;
-                        }
-                        resolve && resolve(true);
-                    })
-                    .catch(() => {
-                        this.mixins_onQuery = false;
-                    });
+    // 历史数据
+    getDiscount () {
+      this.$http
+        .post('/sc-energy/device/getQuantity', this.mixins_query)
+        .then(({ data, status }) => {
+          if (status === 0) {
+            let dataoption = { xData: [], yData: [] };
+            if (data.length > 0) {
+              data.map((item) => {
+                if (item.date) {
+                  let itemdata = item.date ? item.date.toString().replace(/(\d{4})(\d{2})(\d{2})/gi, '$1-$2-$3') : '';
+                  itemdata = itemdata ? itemdata.slice(5) : '';
+                  if (itemdata) {
+                    dataoption.xData.push(itemdata);
+                    dataoption.yData.push(item.value || '0');
+                  }
+                }
+              });
             }
-        },
+            this.chartoption = chartOption('#29B6FF', dataoption, '用水量', '#29B6FF', 't');
+          }
+        })
+        .catch((err) => {
+          this.chartoption = {};
+          console.log(err);
+        });
+    },
+    getHistorical () {
+      this.historyDataList = [];
+      // 获取历史数据列表
+      this.mixins_query = {
+        deviceId: this.params.id || '',
+        startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
+        endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
+      };
+      if (this.params.productId) {
+        this.$http
+          .post('/sc-energy/device/getData', this.mixins_query)
+          .then(({ data, status }) => {
+            if (status === 0) {
+              if (data.length) {
+                let dateTimeCol;
+                this.historyDataList = [];
+                for (let [k, v] of data.entries()) {
+                  dateTimeCol = _.map(v);
 
-        dataFormat(date) {
-            return date
-                .toLocaleString()
-                .replace(/\/|[\u4e00-\u9fa5]|:|\s+/g, '')
-                .substr(0, 8);
-        },
-        exportExcel(date) {
-            let downurl = '';
-            let params = {
-                deviceId: this.params.id || '',
-                startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
-                endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
-            };
-            if (this.value == 'history') {
-                params = {
-                    deviceId: this.params.id || '',
-                    startDate: this.dataValue.length ? `${this.dataValue[0]}` : '',
-                    endDate: this.dataValue.length ? `${this.dataValue[1]}` : ''
-                };
-                downurl = '/sc-energy/device/getDataExcel';
-            } else if (this.value == 'alarm') {
-                params = Object.assign(params, {
-                    categoryId: this.params.categoryId || '',
-                    deviceId: this.params.id || ''
+                  let timeformat = this.$moment(Number(dateTimeCol[0])).format('YYYY-MM-DD HH:mm:ss');
+                  this.historyDataList.push(Object.assign({ receiveTime: timeformat }, data[k].measureData));
+                }
+                this.hispageset.total = data.length;
+                this.mixins_onQuery = false;
+              } else {
+                this.mixins_onQuery = false;
+              }
+            } else {
+              this.mixins_onQuery = false;
+            }
+          })
+          .catch(() => {
+            this.mixins_onQuery = false;
+          });
+      } else {
+        this.mixins_onQuery = false;
+      }
+    },
+    //告警
+    getAllHandleAbnormal () {
+      this.mixins_list = [];
+      this.mixins_dataUrl = '/sc-energy/alarm/getPage';
+      this.mixins_post = 'get';
+      this.mixins_query = {
+        categoryId: this.params.categoryId || '',
+        deviceId: this.params.id || '',
+        startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
+        endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
+      };
+      this.mixins_search();
+    },
+    // 阀控记录
+    getValveData () {
+      this.mixins_list = [];
+      this.mixins_post = 'get';
+      this.mixins_dataUrl = '/sc-energy/device/command/page';
+      this.mixins_query = {
+        deviceId: this.params.id || '',
+        startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
+        endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
+      };
+      this.mixins_search();
+    },
+
+    timeQuery () {
+      (this.mixins_query.startDate = !!this.dataValue ? `${this.dataValue[0]}` : ''),
+        (this.mixins_query.endDate = !!this.dataValue ? `${this.dataValue[1]}` : '');
+      this.change(this.value);
+    },
+    getDeviceMeasuringPoint (resolve) {
+      if (this.params && this.params.productId) {
+        this.$http
+          .get('/sc-energy/measuring/point/find', { productId: this.params.productId })
+          .then(({ status, msg, data = [] }) => {
+            if (status === 0) {
+              this.pointList = data;
+
+              if (data.length) {
+                this.Cols = [{ label: '上报时间', prop: 'receiveTime', width: 200 }];
+                data.map((item, index) => {
+                  this.Cols.push({
+                    label: item.measuringName,
+                    prop: item.measuringCode,
+                    format (value) {
+                      if (item.dictList.length) {
+                        let newValue;
+                        item.dictList.map((item, index) => {
+                          if (item.dataValue == value) {
+                            newValue = item.dataName;
+                          }
+                        });
+                        return newValue;
+                      } else {
+                        return value;
+                      }
+                    }
+                  });
                 });
-                downurl = '/sc-energy/alarm/exportExcel';
+              } else {
+                this.mixins_onQuery = false;
+              }
             } else {
-                downurl = '/sc-energy/device/command/export/excel';
-                params = {
-                    deviceId: this.params.id || '',
-                    startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
-                    endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
-                };
+              this.mixins_onQuery = false;
             }
-            this.__exportExcel(downurl, params);
-        }
+            resolve && resolve(true);
+          })
+          .catch(() => {
+            this.mixins_onQuery = false;
+          });
+      }
+    },
+
+    dataFormat (date) {
+      return date
+        .toLocaleString()
+        .replace(/\/|[\u4e00-\u9fa5]|:|\s+/g, '')
+        .substr(0, 8);
+    },
+    exportExcel (date) {
+      let downurl = '';
+      let params = {
+        deviceId: this.params.id || '',
+        startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
+        endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
+      };
+      if (this.value == 'history') {
+        params = {
+          deviceId: this.params.id || '',
+          startDate: this.dataValue.length ? `${this.dataValue[0]}` : '',
+          endDate: this.dataValue.length ? `${this.dataValue[1]}` : ''
+        };
+        downurl = '/sc-energy/device/getDataExcel';
+      } else if (this.value == 'alarm') {
+        params = Object.assign(params, {
+          categoryId: this.params.categoryId || '',
+          deviceId: this.params.id || ''
+        });
+        downurl = '/sc-energy/alarm/exportExcel';
+      } else {
+        downurl = '/sc-energy/device/command/export/excel';
+        params = {
+          deviceId: this.params.id || '',
+          startDate: !!this.dataValue ? `${this.dataValue[0]}` : '',
+          endDate: !!this.dataValue ? `${this.dataValue[1]}` : ''
+        };
+      }
+      this.__exportExcel(downurl, params);
     }
+  }
 };
 </script>
 

+ 791 - 689
operationSupport/src/views/buildingManagement/pageJump/addoredit.vue

@@ -1,751 +1,853 @@
 <template>
-    <div class="device-info_install addinstall">
-        <div class="device_content">
-            <div class="left_content">
-                <div class="form_head">
-                    <p>基本信息</p>
-                </div>
-                <div class="form_content">
-                    <el-scrollbar class="app-list-scroll" style="height: 100%">
-                        <div class="form_content_disform">
-                            <zz-form :cols="detailCols" :data="formdata" :rules="formrules" labelWidth="98" ref="detailform">
-                                <el-select v-model="formdata.communityId" placeholder="请选择社区名称" slot="communityId" class="width100">
-                                    <el-option
-                                        v-for="(item, index) in communityArray"
-                                        :label="item.communityName"
-                                        :value="item.id"
-                                        :key="index"
-                                    ></el-option>
-                                </el-select>
-                                <el-select
-                                    v-model="formdata.buildingType"
-                                    placeholder="请选择楼栋类型"
-                                    slot="buildingTypeList"
-                                    class="width100"
-                                >
-                                    <el-option label="高层" :value="1"></el-option>
-                                    <el-option label="低层" :value="2"></el-option>
-                                </el-select>
+  <div class="device-info_install addinstall">
+    <div class="device_content">
+      <div class="left_content">
+        <div class="form_head">
+          <p>基本信息</p>
+        </div>
+        <div class="form_content">
+          <el-scrollbar
+            class="app-list-scroll"
+            style="height: 100%"
+          >
+            <div class="form_content_disform">
+              <zz-form
+                :cols="detailCols"
+                :data="formdata"
+                :rules="formrules"
+                labelWidth="98"
+                ref="detailform"
+              >
+                <el-select
+                  v-model="formdata.communityId"
+                  placeholder="请选择社区名称"
+                  slot="communityId"
+                  class="width100"
+                >
+                  <el-option
+                    v-for="(item, index) in communityArray"
+                    :label="item.communityName"
+                    :value="item.id"
+                    :key="index"
+                  ></el-option>
+                </el-select>
+                <el-select
+                  v-model="formdata.buildingType"
+                  placeholder="请选择楼栋类型"
+                  slot="buildingTypeList"
+                  class="width100"
+                >
+                  <el-option
+                    label="高层"
+                    :value="1"
+                  ></el-option>
+                  <el-option
+                    label="低层"
+                    :value="2"
+                  ></el-option>
+                </el-select>
 
-                                <el-select
-                                    v-model="formdata.buildingPurpose"
-                                    placeholder="请选择楼栋用途"
-                                    slot="buildingPurpose"
-                                    class="width100"
-                                >
-                                    <el-option
-                                        v-for="(item, index) in buildingPurposeType"
-                                        :label="item.label"
-                                        :value="item.id"
-                                        :key="index"
-                                    ></el-option>
-                                </el-select>
+                <el-select
+                  v-model="formdata.buildingPurpose"
+                  placeholder="请选择楼栋用途"
+                  slot="buildingPurpose"
+                  class="width100"
+                >
+                  <el-option
+                    v-for="(item, index) in buildingPurposeType"
+                    :label="item.label"
+                    :value="item.id"
+                    :key="index"
+                  ></el-option>
+                </el-select>
 
-                                <el-select
-                                    v-model="formdata.buildingStructure"
-                                    placeholder="请选择楼栋用途"
-                                    slot="buildingStructure"
-                                    class="width100"
-                                >
-                                    <el-option
-                                        v-for="(item, index) in buildingStructureType"
-                                        :label="item.label"
-                                        :value="item.id"
-                                        :key="index"
-                                    ></el-option>
-                                </el-select>
-                                <el-input
-                                    type="textarea"
-                                    :rows="4"
-                                    slot="remarks"
-                                    show-word-limit
-                                    v-model="formdata.remarks"
-                                    maxlength="300"
-                                >
-                                </el-input>
-                            </zz-form>
-                        </div>
-                    </el-scrollbar>
-                </div>
+                <el-select
+                  v-model="formdata.buildingStructure"
+                  placeholder="请选择楼栋用途"
+                  slot="buildingStructure"
+                  class="width100"
+                >
+                  <el-option
+                    v-for="(item, index) in buildingStructureType"
+                    :label="item.label"
+                    :value="item.id"
+                    :key="index"
+                  ></el-option>
+                </el-select>
+                <el-input
+                  type="textarea"
+                  :rows="4"
+                  slot="remarks"
+                  show-word-limit
+                  v-model="formdata.remarks"
+                  maxlength="300"
+                >
+                </el-input>
+              </zz-form>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+      <div class="right_content">
+        <div class="right_content_head">
+          <span class="head_text">创建房屋</span>
+          <span
+            class="close"
+            @click="close"
+          >
+            <i class="el-icon-close"></i>
+          </span>
+        </div>
+        <div class="right_content_info">
+          <div
+            class="head_fr"
+            v-if="isAdd"
+          >
+            <div class="head_content head_add">
+              <div class="checkbox_style">
+                <el-checkbox
+                  disabled
+                  @change="checkedUnit"
+                  v-model="initialUnitList.checkedUnit"
+                ></el-checkbox>
+              </div>
+              <div class="form_content">
+                <zz-form
+                  :cols="unitCols"
+                  labelposition="left"
+                  :rules="unitrules"
+                  :data="formdata"
+                  :disabled="!isAdd"
+                  labelWidth="50"
+                  ref="unitform"
+                >
+                  <template
+                    slot="unitRule"
+                    prop="unitRule"
+                  >
+                    <div class="row_class">
+                      <el-radio-group
+                        :disabled="!initialUnitList.checkedUnit"
+                        v-model="initialUnitList.unit.type"
+                        @change="radioChange('unit', $event)"
+                      >
+                        <el-radio label="Number">按数字1-20生成</el-radio>
+                        <el-radio label="Letter">按字母A-Z生成</el-radio>
+                      </el-radio-group>
+                      <el-select
+                        :disabled="!initialUnitList.checkedUnit"
+                        class="w120 wfirst"
+                        v-model="initialUnitList.unit.start"
+                        prop="floorstart"
+                        placeholder="起始单元"
+                      >
+                        <el-option
+                          v-for="item in unitOptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        >
+                        </el-option>
+                      </el-select>
+                      <el-select
+                        class="w120 wsecond"
+                        :disabled="!initialUnitList.checkedUnit"
+                        v-model="initialUnitList.unit.end"
+                        placeholder="单元数"
+                      >
+                        <el-option
+                          v-for="item in unitOptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        >
+                        </el-option>
+                      </el-select>
+                    </div>
+                    <div class="row_class addfloo">
+                      <div class="last_level">
+                        <label class="label_text">每栋层数</label>
+                        <el-select
+                          class="w120"
+                          v-model="formdata.floorsNumber"
+                          placeholder="请选择楼栋层数"
+                        >
+                          <el-option
+                            v-for="item in floorlevelOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          >
+                          </el-option>
+                        </el-select>
+                      </div>
+                      <div class="last_level">
+                        <label class="label_text">每层户数</label>
+                        <el-select
+                          class="w120"
+                          v-model="formdata.householdsPerFloor"
+                          placeholder="请选择每层户数"
+                        >
+                          <el-option
+                            v-for="item in unithouseOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          >
+                          </el-option>
+                        </el-select>
+                      </div>
+                      <div
+                        class="last_level"
+                        v-if="isAdd"
+                      >
+                        <label class="label_text">房屋类型</label>
+                        <el-select
+                          class="w120"
+                          v-model="formdata.houseType"
+                          @change="toggleUnithOptions"
+                          placeholder="请选择每层户数"
+                        >
+                          <el-option
+                            label="住宅"
+                            :value="1"
+                          ></el-option>
+                          <el-option
+                            label="商业"
+                            :value="2"
+                          ></el-option>
+                        </el-select>
+                      </div>
+                    </div>
+                  </template>
+                </zz-form>
+              </div>
+              <div class="btn_unit">
+                <el-button
+                  type="primary"
+                  class="el-mgRight-md"
+                  :disabled="!isAdd"
+                  @click="createDoor"
+                >{{ doorData.length ? '重新' : '' }}生成房屋</el-button>
+                <el-button
+                  @click="clearDoor"
+                  :disabled="!isAdd"
+                >清空房屋</el-button>
+              </div>
             </div>
-            <div class="right_content">
-                <div class="right_content_head">
-                    <span class="head_text">创建房屋</span>
-                    <span class="close" @click="close">
-                        <i class="el-icon-close"></i>
-                    </span>
+            <div class="title_class">
+              <span class="title_txt">楼栋信息</span>
+              <el-tooltip
+                v-if="doorData && doorData.length > 0"
+                class="item text-wrapper"
+                effect="light"
+                placement="right"
+              >
+                <div slot="content">
+                  双击可对楼栋、单元名称进行自定义修改<br />单击选中楼栋、单元、单元户信息根据选中的楼栋、单元进行展示
                 </div>
-                <div class="right_content_info">
-                    <div class="head_fr" v-if="isAdd">
-                        <div class="head_content head_add">
-                            <div class="checkbox_style">
-                                <el-checkbox disabled @change="checkedUnit" v-model="initialUnitList.checkedUnit"></el-checkbox>
-                            </div>
-                            <div class="form_content">
-                                <zz-form
-                                    :cols="unitCols"
-                                    labelposition="left"
-                                    :rules="unitrules"
-                                    :data="formdata"
-                                    :disabled="!isAdd"
-                                    labelWidth="50"
-                                    ref="unitform"
-                                >
-                                    <template slot="unitRule" prop="unitRule">
-                                        <div class="row_class">
-                                            <el-radio-group
-                                                :disabled="!initialUnitList.checkedUnit"
-                                                v-model="initialUnitList.unit.type"
-                                                @change="radioChange('unit', $event)"
-                                            >
-                                                <el-radio label="Number">按数字1-20生成</el-radio>
-                                                <el-radio label="Letter">按字母A-Z生成</el-radio>
-                                            </el-radio-group>
-                                            <el-select
-                                                :disabled="!initialUnitList.checkedUnit"
-                                                class="w120 wfirst"
-                                                v-model="initialUnitList.unit.start"
-                                                prop="floorstart"
-                                                placeholder="起始单元"
-                                            >
-                                                <el-option
-                                                    v-for="item in unitOptions"
-                                                    :key="item.value"
-                                                    :label="item.label"
-                                                    :value="item.value"
-                                                >
-                                                </el-option>
-                                            </el-select>
-                                            <el-select
-                                                class="w120 wsecond"
-                                                :disabled="!initialUnitList.checkedUnit"
-                                                v-model="initialUnitList.unit.end"
-                                                placeholder="单元数"
-                                            >
-                                                <el-option
-                                                    v-for="item in unitOptions"
-                                                    :key="item.value"
-                                                    :label="item.label"
-                                                    :value="item.value"
-                                                >
-                                                </el-option>
-                                            </el-select>
-                                        </div>
-                                        <div class="row_class addfloo">
-                                            <div class="last_level">
-                                                <label class="label_text">每栋层数</label>
-                                                <el-select class="w120" v-model="formdata.floorsNumber" placeholder="请选择楼栋层数">
-                                                    <el-option
-                                                        v-for="item in floorlevelOptions"
-                                                        :key="item.value"
-                                                        :label="item.label"
-                                                        :value="item.value"
-                                                    >
-                                                    </el-option>
-                                                </el-select>
-                                            </div>
-                                            <div class="last_level">
-                                                <label class="label_text">每层户数</label>
-                                                <el-select class="w120" v-model="formdata.householdsPerFloor" placeholder="请选择每层户数">
-                                                    <el-option
-                                                        v-for="item in unithouseOptions"
-                                                        :key="item.value"
-                                                        :label="item.label"
-                                                        :value="item.value"
-                                                    >
-                                                    </el-option>
-                                                </el-select>
-                                            </div>
-                                            <div class="last_level" v-if="isAdd">
-                                                <label class="label_text">房屋类型</label>
-                                                <el-select
-                                                    class="w120"
-                                                    v-model="formdata.houseType"
-                                                    @change="toggleUnithOptions"
-                                                    placeholder="请选择每层户数"
-                                                >
-                                                    <el-option label="住宅" :value="1"></el-option>
-                                                    <el-option label="商业" :value="2"></el-option>
-                                                </el-select>
-                                            </div>
-                                        </div>
-                                    </template>
-                                </zz-form>
-                            </div>
-                            <div class="btn_unit">
-                                <el-button type="primary" class="el-mgRight-md" :disabled="!isAdd" @click="createDoor"
-                                    >{{ doorData.length ? '重新' : '' }}生成房屋</el-button
-                                >
-                                <el-button @click="clearDoor" :disabled="!isAdd">清空房屋</el-button>
-                            </div>
-                        </div>
-                        <div class="title_class">
-                            <span class="title_txt">楼栋信息</span>
-                            <el-tooltip v-if="doorData && doorData.length > 0" class="item text-wrapper" effect="light" placement="right">
-                                <div slot="content">
-                                    双击可对楼栋、单元名称进行自定义修改<br />单击选中楼栋、单元、单元户信息根据选中的楼栋、单元进行展示
-                                </div>
-                                <img src="@/assets/img/menuicon/icon_tishi_zhengchang.png" alt="" />
-                            </el-tooltip>
-                        </div>
+                <img
+                  src="@/assets/img/menuicon/icon_tishi_zhengchang.png"
+                  alt=""
+                />
+              </el-tooltip>
+            </div>
+          </div>
+          <div class="floorinfo">
+            <div class="door-wrap door_install">
+              <div
+                class="top_content"
+                :class="!isAdd ? 'is-disabled' : ''"
+              >
+                <el-scrollbar
+                  class="app-list-scroll"
+                  style="height: 100%"
+                >
+                  <div
+                    class="floor_unit"
+                    v-if="doorData && doorData.length > 0"
+                  >
+                    <div class="box clearfix">
+                      <div class="label_left">楼栋</div>
+                      <div class="el-fl-left tags">
+                        <el-tag
+                          :disable-transitions="false"
+                          data-code="build"
+                          class="active"
+                        >
+                          {{ formdata.buildingName }}
+                        </el-tag>
+                      </div>
                     </div>
-                    <div class="floorinfo">
-                        <div class="door-wrap door_install">
-                            <div class="top_content" :class="!isAdd ? 'is-disabled' : ''">
-                                <el-scrollbar class="app-list-scroll" style="height: 100%">
-                                    <div class="floor_unit" v-if="doorData && doorData.length > 0">
-                                        <div class="box clearfix">
-                                            <div class="label_left">楼栋</div>
-                                            <div class="el-fl-left tags">
-                                                <el-tag :disable-transitions="false" data-code="build" class="active">
-                                                    {{ formdata.buildingName }}
-                                                </el-tag>
-                                            </div>
-                                        </div>
-                                        <div
-                                            class="box clearfix"
-                                            v-if="
+                    <div
+                      class="box clearfix"
+                      v-if="
                                                 initialUnitList.enableUnit &&
                                                 doorData[buildingIndex] &&
                                                 doorData[buildingIndex].unitFloorList &&
                                                 doorData[buildingIndex].unitFloorList.length
                                             "
-                                        >
-                                            <div class="label_left">单元</div>
+                    >
+                      <div class="label_left">单元</div>
 
-                                            <div class="el-fl-left tags">
-                                                <el-tag
-                                                    :key="index2"
-                                                    v-for="(unit, index2) in doorData"
-                                                    closable
-                                                    :disable-transitions="false"
-                                                    data-code="unit"
-                                                    @close="handleClose('unit', index2, doorData)"
-                                                    @click="unitIndex = index2"
-                                                    :class="{ active: unitIndex === index2 }"
-                                                >
-                                                    <span @dblclick="showInput">{{ unit.unitName }}</span>
-                                                    <el-input
-                                                        style="display: none"
-                                                        v-model="unit.unitName"
-                                                        @keyup.enter.native="inputConfirm($event, doorData)"
-                                                        @blur="inputConfirm($event, doorData)"
-                                                        data-code="unit"
-                                                        maxlength="20"
-                                                    ></el-input>
-                                                </el-tag>
-                                                <el-button class="el-icon-plus button-new-tag" size="small" @click="showInput"></el-button>
-                                                <el-input
-                                                    class="input-new-tag"
-                                                    style="display: none"
-                                                    size="small"
-                                                    placeholder="请输入单元号"
-                                                    v-model="inputValue.unit"
-                                                    @keyup.enter.native="handleInputConfirm($event, doorData)"
-                                                    @blur="handleInputConfirm($event, doorData)"
-                                                    data-code="unit"
-                                                    maxlength="20"
-                                                >
-                                                </el-input>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div v-else class="empty_floor">
-                                        <p>暂无相关信息</p>
-                                    </div>
-                                    <div class="title_class border_hr">
-                                        <span class="title_txt">单元户信息</span>
-                                        <el-tooltip
-                                            v-if="
+                      <div class="el-fl-left tags">
+                        <el-tag
+                          :key="index2"
+                          v-for="(unit, index2) in doorData"
+                          closable
+                          :disable-transitions="false"
+                          data-code="unit"
+                          @close="handleClose('unit', index2, doorData)"
+                          @click="unitIndex = index2"
+                          :class="{ active: unitIndex === index2 }"
+                        >
+                          <span @dblclick="showInput">{{ unit.unitName }}</span>
+                          <el-input
+                            style="display: none"
+                            v-model="unit.unitName"
+                            @keyup.enter.native="inputConfirm($event, doorData)"
+                            @blur="inputConfirm($event, doorData)"
+                            data-code="unit"
+                            maxlength="20"
+                          ></el-input>
+                        </el-tag>
+                        <el-button
+                          class="el-icon-plus button-new-tag"
+                          size="small"
+                          @click="showInput"
+                        ></el-button>
+                        <el-input
+                          class="input-new-tag"
+                          style="display: none"
+                          size="small"
+                          placeholder="请输入单元号"
+                          v-model="inputValue.unit"
+                          @keyup.enter.native="handleInputConfirm($event, doorData)"
+                          @blur="handleInputConfirm($event, doorData)"
+                          data-code="unit"
+                          maxlength="20"
+                        >
+                        </el-input>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    v-else
+                    class="empty_floor"
+                  >
+                    <p>暂无相关信息</p>
+                  </div>
+                  <div class="title_class border_hr">
+                    <span class="title_txt">单元户信息</span>
+                    <el-tooltip
+                      v-if="
                                                 doorData[buildingIndex] &&
                                                 doorData[buildingIndex].unitFloorList &&
                                                 doorData[buildingIndex].unitFloorList.length
                                             "
-                                            class="item"
-                                            effect="light"
-                                            placement="right"
-                                            :content="unitMsg"
-                                        >
-                                            <img src="@/assets/img/menuicon/icon_tishi_zhengchang.png" alt="" />
-                                        </el-tooltip>
-                                    </div>
+                      class="item"
+                      effect="light"
+                      placement="right"
+                      :content="unitMsg"
+                    >
+                      <img
+                        src="@/assets/img/menuicon/icon_tishi_zhengchang.png"
+                        alt=""
+                      />
+                    </el-tooltip>
+                  </div>
 
-                                    <div
-                                        class="unit"
-                                        v-if="
+                  <div
+                    class="unit"
+                    v-if="
                                             doorData[buildingIndex] &&
                                             doorData[buildingIndex].unitFloorList &&
                                             doorData[buildingIndex].unitFloorList.length
                                         "
-                                    >
-                                        <div
-                                            class="floor"
-                                            v-if="
+                  >
+                    <div
+                      class="floor"
+                      v-if="
                                                 doorData[buildingIndex].unitFloorList[unitIndex] &&
                                                 doorData[buildingIndex].unitFloorList[unitIndex].roomList &&
                                                 doorData[buildingIndex].unitFloorList[unitIndex].roomList.length
                                             "
-                                        >
-                                            <!-- <h2>单元户<span>鼠标双击修改名称; 修改楼层名称后,请自行修改单元户的名称</span></h2> -->
-                                            <div
-                                                class="box clearfix"
-                                                :key="index3"
-                                                v-for="(floor, index3) in doorData[buildingIndex].unitFloorList"
-                                            >
-                                                <!-- <span class="el-fl-left label">楼层:</span> -->
-                                                <div class="unit_left">
-                                                    <el-tag
-                                                        closable
-                                                        :disable-transitions="false"
-                                                        data-code="floor"
-                                                        @close="handleClose('floor', index3, doorData[buildingIndex].unitFloorList)"
-                                                    >
-                                                        <span @dblclick="showInput">{{ floor.floorNumber }}</span>
-                                                        <el-input
-                                                            style="display: none"
-                                                            v-model="floor.floorNumber"
-                                                            @keyup.enter.native="
+                    >
+                      <!-- <h2>单元户<span>鼠标双击修改名称; 修改楼层名称后,请自行修改单元户的名称</span></h2> -->
+                      <div
+                        class="box clearfix"
+                        :key="index3"
+                        v-for="(floor, index3) in doorData[buildingIndex].unitFloorList"
+                      >
+                        <!-- <span class="el-fl-left label">楼层:</span> -->
+                        <div class="unit_left">
+                          <el-tag
+                            closable
+                            :disable-transitions="false"
+                            data-code="floor"
+                            @close="handleClose('floor', index3, doorData[buildingIndex].unitFloorList)"
+                          >
+                            <span @dblclick="showInput">{{ floor.floorNumber }}</span>
+                            <el-input
+                              style="display: none"
+                              v-model="floor.floorNumber"
+                              @keyup.enter.native="
                                                                 inputConfirm($event, doorData[buildingIndex].unitFloorList)
                                                             "
-                                                            @blur="inputConfirm($event, doorData[buildingIndex].unitFloorList)"
-                                                            data-code="floor"
-                                                            maxlength="20"
-                                                        ></el-input>
-                                                    </el-tag>
-                                                    <span class="unit_text">层</span>
-                                                </div>
-                                                <span class="el-fl-left tags">
-                                                    <div class="door" v-if="floor">
-                                                        <el-tag
-                                                            :key="index4"
-                                                            v-for="(door, index4) in floor.roomList"
-                                                            closable
-                                                            :disable-transitions="false"
-                                                            data-code="door"
-                                                            @close="handleClose('door', index4, floor.roomList)"
-                                                        >
-                                                            <span @dblclick="showInput">{{ door.roomNumber }}</span>
-                                                            <el-input
-                                                                style="display: none"
-                                                                v-model="door.roomNumber"
-                                                                @keyup.enter.native="inputConfirm($event, floor.roomList)"
-                                                                @blur="inputConfirm($event, floor.roomList)"
-                                                                data-code="door"
-                                                                maxlength="20"
-                                                            ></el-input>
-                                                        </el-tag>
-                                                        <el-button
-                                                            class="el-icon-plus button-new-tag"
-                                                            size="small"
-                                                            @click="showInput"
-                                                        ></el-button>
-                                                        <el-input
-                                                            class="input-new-tag"
-                                                            style="display: none"
-                                                            size="small"
-                                                            placeholder="请输入户号"
-                                                            v-model="inputValue.door"
-                                                            @keyup.enter.native="handleInputConfirm($event, floor.roomList)"
-                                                            @blur="handleInputConfirm($event, floor.roomList)"
-                                                            data-code="door"
-                                                            maxlength="20"
-                                                        >
-                                                        </el-input>
-                                                    </div>
-                                                </span>
-                                            </div>
-                                            <div class="add-floor">
-                                                <el-button class="el-icon-plus button-new-tag" size="small" @click="showInput"></el-button>
-                                                <el-input
-                                                    class="input-new-tag"
-                                                    style="display: none"
-                                                    size="small"
-                                                    placeholder="请输入楼层号"
-                                                    v-model="inputValue.floor"
-                                                    @keyup.enter.native="handleInputConfirm($event, doorData[buildingIndex].unitFloorList)"
-                                                    @blur="handleInputConfirm($event, doorData[buildingIndex].unitFloorList)"
-                                                    data-code="floor"
-                                                    maxlength="20"
-                                                >
-                                                </el-input>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div v-else class="unit_empty">
-                                        <div class="center_text">
-                                            <img src="@assets/img/menuicon/img_wuxiaoxi@2x.png" alt="" />
-                                            <span>暂无相关信息</span>
-                                        </div>
-                                    </div>
-                                </el-scrollbar>
-                            </div>
-                            <div class="btns footer_btn">
-                                <el-button @click="resetForm">重置</el-button>
-                                <el-button @click="close">取消</el-button>
-                                <el-button type="primary" @click="submit">保存</el-button>
-                            </div>
+                              @blur="inputConfirm($event, doorData[buildingIndex].unitFloorList)"
+                              data-code="floor"
+                              maxlength="20"
+                            ></el-input>
+                          </el-tag>
+                          <span class="unit_text">层</span>
                         </div>
+                        <span class="el-fl-left tags">
+                          <div
+                            class="door"
+                            v-if="floor"
+                          >
+                            <el-tag
+                              :key="index4"
+                              v-for="(door, index4) in floor.roomList"
+                              closable
+                              :disable-transitions="false"
+                              data-code="door"
+                              @close="handleClose('door', index4, floor.roomList)"
+                            >
+                              <span @dblclick="showInput">{{ door.roomNumber }}</span>
+                              <el-input
+                                style="display: none"
+                                v-model="door.roomNumber"
+                                @keyup.enter.native="inputConfirm($event, floor.roomList)"
+                                @blur="inputConfirm($event, floor.roomList)"
+                                data-code="door"
+                                maxlength="20"
+                              ></el-input>
+                            </el-tag>
+                            <el-button
+                              class="el-icon-plus button-new-tag"
+                              size="small"
+                              @click="showInput"
+                            ></el-button>
+                            <el-input
+                              class="input-new-tag"
+                              style="display: none"
+                              size="small"
+                              placeholder="请输入户号"
+                              v-model="inputValue.door"
+                              @keyup.enter.native="handleInputConfirm($event, floor.roomList)"
+                              @blur="handleInputConfirm($event, floor.roomList)"
+                              data-code="door"
+                              maxlength="20"
+                            >
+                            </el-input>
+                          </div>
+                        </span>
+                      </div>
+                      <div class="add-floor">
+                        <el-button
+                          class="el-icon-plus button-new-tag"
+                          size="small"
+                          @click="showInput"
+                        ></el-button>
+                        <el-input
+                          class="input-new-tag"
+                          style="display: none"
+                          size="small"
+                          placeholder="请输入楼层号"
+                          v-model="inputValue.floor"
+                          @keyup.enter.native="handleInputConfirm($event, doorData[buildingIndex].unitFloorList)"
+                          @blur="handleInputConfirm($event, doorData[buildingIndex].unitFloorList)"
+                          data-code="floor"
+                          maxlength="20"
+                        >
+                        </el-input>
+                      </div>
                     </div>
-                </div>
+                  </div>
+                  <div
+                    v-else
+                    class="unit_empty"
+                  >
+                    <div class="center_text">
+                      <img
+                        src="@assets/img/menuicon/img_wuxiaoxi@2x.png"
+                        alt=""
+                      />
+                      <span>暂无相关信息</span>
+                    </div>
+                  </div>
+                </el-scrollbar>
+              </div>
+              <div class="btns footer_btn">
+                <el-button @click="resetForm">重置</el-button>
+                <el-button @click="close">取消</el-button>
+                <el-button
+                  type="primary"
+                  @click="submit"
+                >保存</el-button>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import initList from '../mixins/initList';
 import { initDoor, calcDoor } from './basedata';
 const createContinueData = (type, num) => {
-    //type--类型,num生成的个数
-    let objArr = [];
-    if (type == 'Number') {
-        [...new Array(Number(num)).keys()].map((idx) => {
-            let obj = { label: Number(idx) + 1, value: Number(idx) + 1 };
-            objArr.push(obj);
-        });
-    } else {
-        for (let i = 0; i < num; i++) {
-            let letter = String.fromCharCode(65 + i);
-            let obj = { label: letter, value: letter };
-            objArr.push(obj);
-        }
+  //type--类型,num生成的个数
+  let objArr = [];
+  if (type == 'Number') {
+    [...new Array(Number(num)).keys()].map((idx) => {
+      let obj = { label: Number(idx) + 1, value: Number(idx) + 1 };
+      objArr.push(obj);
+    });
+  } else {
+    for (let i = 0; i < num; i++) {
+      let letter = String.fromCharCode(65 + i);
+      let obj = { label: letter, value: letter };
+      objArr.push(obj);
     }
-    return objArr;
+  }
+  return objArr;
 };
 const txtI18n = {
-    build: '楼栋',
-    unit: '单元',
-    floor: '楼层',
-    door: '单元户'
+  build: '楼栋',
+  unit: '单元',
+  floor: '楼层',
+  door: '单元户'
 };
 export default {
-    mixins: [initList],
-    name: 'editBuilding',
-    data() {
-        return {
-            unitCols: [[{ label: '单元', slot: 'unitRule', prop: 'unitRule' }]],
-            detailCols: [
-                [
-                    {
-                        label: '所属社区',
-                        prop: 'communityId',
-                        slot: 'communityId'
-                    },
-                    {
-                        label: '楼栋名称',
-                        prop: 'buildingName',
-                        input: 'true'
-                    },
-                    {
-                        label: '楼栋编号',
-                        prop: 'buildingNumber',
-                        input: 'true'
-                    },
-                    {
-                        label: '楼栋类型',
-                        prop: 'buildingTypeList',
-                        slot: 'buildingTypeList'
-                    },
-                    {
-                        label: '楼栋用途',
-                        prop: 'buildingPurpose',
-                        slot: 'buildingPurpose'
-                    },
-                    {
-                        label: '建筑结构',
-                        prop: 'buildingStructure',
-                        slot: 'buildingStructure'
-                    },
-                    {
-                        label: '建成日期',
-                        prop: 'builtDate',
-                        date: 'true',
-                        widt: true
-                    },
-                    {
-                        label: '验收日期',
-                        prop: 'acceptanceDate',
-                        date: 'true',
-                        widt: true
-                    },
-                    {
-                        label: '建筑面积',
-                        prop: 'buildingArea',
-                        input: true
-                    },
-                    {
-                        label: '使用面积',
-                        prop: 'useArea',
-                        input: 'true'
-                    },
-                    {
-                        label: '备注信息',
-                        prop: 'remarks',
-                        slot: 'remarks'
-                    }
-                ]
-            ],
-            formdata: {
-                communityId: '',
-                buildingName: '',
-                buildingNumber: '', //楼栋编号
-                buildingType: '',
-                buildingPurpose: '',
-                buildingStructure: '',
-                builtDate: '',
-                acceptanceDate: '',
-                buildingArea: '',
-                useArea: '',
-                remarks: '',
-                houseType: 1,
-                floorsNumber: '1', //每栋层数
-                unitNumber: 1, //单元数
-                householdsPerFloor: '1' //每层户数
-            },
-            initialUnitList: {
-                checkedUnit: true,
-                enableUnit: 1, //勾选了复选框
-                unit: {
-                    type: 'Number', //  Number letter
-                    start: '1', // 1 A单元的起始单元
-                    end: '1'
-                }
-            },
-            formrules: {
-                communityId: this.$valid.selectRequired(['社区']),
-                buildingName: [this.$valid.inputRequired('楼栋名称')]
-            },
-            buildingPurposeType: [
-                {
-                    label: '住宅楼',
-                    id: 1
-                },
-                {
-                    label: '商场',
-                    id: 2
-                },
-                {
-                    label: '写字楼',
-                    id: 3
-                },
-                {
-                    label: '公寓',
-                    id: 4
-                },
-                {
-                    label: '别墅',
-                    id: 5
-                },
-                {
-                    label: '自建楼',
-                    id: 6
-                },
-                {
-                    label: '其他',
-                    id: 7
-                }
-            ],
-            buildingStructureType: [
-                {
-                    label: '钢结构',
-                    id: 1
-                },
-                {
-                    label: '钢筋混凝土结构',
-                    id: 2
-                },
-                {
-                    label: '筋混凝土结构',
-                    id: 3
-                },
-                {
-                    label: '混合结构',
-                    id: 4
-                },
-                {
-                    label: '砖木结构',
-                    id: 5
-                },
-                {
-                    label: '其他结构',
-                    id: 6
-                }
-            ]
-        };
-    },
-    props: {
-        params: {
-            type: Object
+  mixins: [initList],
+  name: 'editBuilding',
+  data () {
+    return {
+      unitCols: [[{ label: '单元', slot: 'unitRule', prop: 'unitRule' }]],
+      detailCols: [
+        [
+          {
+            label: '所属社区',
+            prop: 'communityId',
+            slot: 'communityId'
+          },
+          {
+            label: '楼栋名称',
+            prop: 'buildingName',
+            input: 'true'
+          },
+          {
+            label: '楼栋编号',
+            prop: 'buildingNumber',
+            input: 'true'
+          },
+          {
+            label: '楼栋类型',
+            prop: 'buildingTypeList',
+            slot: 'buildingTypeList'
+          },
+          {
+            label: '楼栋用途',
+            prop: 'buildingPurpose',
+            slot: 'buildingPurpose'
+          },
+          {
+            label: '建筑结构',
+            prop: 'buildingStructure',
+            slot: 'buildingStructure'
+          },
+          {
+            label: '建成日期',
+            prop: 'builtDate',
+            date: 'true',
+            widt: true
+          },
+          {
+            label: '验收日期',
+            prop: 'acceptanceDate',
+            date: 'true',
+            widt: true
+          },
+          {
+            label: '建筑面积',
+            prop: 'buildingArea',
+            input: true
+          },
+          {
+            label: '使用面积',
+            prop: 'useArea',
+            input: 'true'
+          },
+          {
+            label: '备注信息',
+            prop: 'remarks',
+            slot: 'remarks'
+          }
+        ]
+      ],
+      formdata: {
+        communityId: '',
+        buildingName: '',
+        buildingNumber: '', //楼栋编号
+        buildingType: '',
+        buildingPurpose: '',
+        buildingStructure: '',
+        builtDate: '',
+        acceptanceDate: '',
+        buildingArea: '',
+        useArea: '',
+        remarks: '',
+        houseType: 1,
+        floorsNumber: '1', //每栋层数
+        unitNumber: 1, //单元数
+        householdsPerFloor: '1' //每层户数
+      },
+      initialUnitList: {
+        checkedUnit: true,
+        enableUnit: 1, //勾选了复选框
+        unit: {
+          type: 'Number', //  Number letter
+          start: '1', // 1 A单元的起始单元
+          end: '1'
+        }
+      },
+      formrules: {
+        communityId: this.$valid.selectRequired(['社区']),
+        buildingName: [this.$valid.inputRequired('楼栋名称')]
+      },
+      buildingPurposeType: [
+        {
+          label: '住宅楼',
+          id: 1
+        },
+        {
+          label: '商场',
+          id: 2
+        },
+        {
+          label: '写字楼',
+          id: 3
         },
-        isAdd: {
-            type: Boolean,
-            default: true
+        {
+          label: '公寓',
+          id: 4
+        },
+        {
+          label: '别墅',
+          id: 5
+        },
+        {
+          label: '自建楼',
+          id: 6
+        },
+        {
+          label: '其他',
+          id: 7
         }
-    },
-    methods: {
-        radioChange(type, val) {
-            let length = val == 'Number' ? '20' : '26';
-            if (val == 'Letter') {
-                this.unitOptions = createContinueData(val, length);
-                this.initialUnitList.unit.type = 'Letter';
-                this.initialUnitList.unit.start = 'A';
-                this.initialUnitList.unit.end = 'A';
-            } else {
-                this.initialUnitList.unit = this.copyrules.unit;
-                this.unitOptions = createContinueData(val, length);
-            }
+      ],
+      buildingStructureType: [
+        {
+          label: '钢结构',
+          id: 1
         },
-
-        resetForm() {
-            this.formdata = {};
-            this.formdata = this.copyformdata;
-            // this.doorData = [];
-            this.$refs.detailform.validateField('communityId');
+        {
+          label: '钢筋混凝土结构',
+          id: 2
         },
-
-        checkedUnit(val) {
-            if (val) {
-                this.initialUnitList.enableUnit = 1;
-            } else {
-                this.formdata.unitNumber = 1;
-                this.initialUnitList.enableUnit = 0;
-            }
+        {
+          label: '筋混凝土结构',
+          id: 3
         },
-        createDoor() {
-            if (this.formdata.buildingName == '') {
-                this.$message.error('先输入楼栋名称');
-                return;
-            }
-            new Promise((resolve) => {
-                this.$refs.unitform.validate(resolve);
-            }).then((v) => {
-                if (this.initialUnitList.checkedUnit) {
-                    this.initialUnitList.enableUnit = 1;
-                } else {
-                    this.formdata.unitNumber = 1;
-                    this.initialUnitList.enableUnit = 0;
-                }
-                let isNumberUnitFlag = this.initialUnitList.unit.type == 'Number' ? true : false;
-                let checkUnit = this.initialUnitList.unit.start <= this.initialUnitList.unit.end ? true : false;
-                if (this.initialUnitList.checkedUnit) {
-                    if (checkUnit && isNumberUnitFlag) {
-                        this.formdata.unitNumber = this.initialUnitList.unit.end - this.initialUnitList.unit.start + 1;
-                    } else if (!isNumberUnitFlag && checkUnit) {
-                        this.formdata.unitNumber =
-                            this.initialUnitList.unit.end.charCodeAt() - this.initialUnitList.unit.start.charCodeAt() + 1;
-                    } else {
-                        this.formdata.unitNumber = 1;
-                        this.$message.error('单元起始和结束设置出错');
-                        return;
-                    }
-                }
-
-                this.doorData = initDoor(this.formdata, this.initialUnitList).generateUnit;
-            });
+        {
+          label: '混合结构',
+          id: 4
         },
-        handleInputConfirm(e, arr) {
-            const { value, dataset } = e.target;
-            if (value && dataset) {
-                const { code } = dataset;
-                const querySame = () => _.isEmpty(_.filter(arr, (v) => v.name == value));
-                const generate = {
-                    unit: initDoor(this.formdata, this.initialUnitList).generateUnit,
-                    floor: initDoor(this.formdata, this.initialUnitList).generateFloor,
-                    door: initDoor(this.formdata, this.initialUnitList).generateDoor(value)
-                };
-                if (querySame()) {
-                    if (code == 'unit') {
-                        arr.push({
-                            unitName: value,
-                            unitFloorList: code != 'door' ? generate['floor'] : undefined
-                        });
-                    } else if (code == 'door') {
-                        arr.push({
-                            roomNumber: value
-                        });
-                    } else if (code == 'floor') {
-                        arr.push({
-                            floorNumber: value,
-                            roomList: code != 'door' ? generate['door'] : undefined
-                        });
-                    }
-                    this.inputValue[code] = '';
-                } else {
-                    this.$message.error(`${txtI18n[code]}名称重复,请重新添加`);
-                }
-            }
-            e.target.parentElement.style.display = 'none';
-            e.target.parentElement.previousElementSibling.style.display = 'inline-block';
-            e.target.value = '';
+        {
+          label: '砖木结构',
+          id: 5
         },
+        {
+          label: '其他结构',
+          id: 6
+        }
+      ]
+    };
+  },
+  props: {
+    params: {
+      type: Object
+    },
+    isAdd: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    radioChange (type, val) {
+      let length = val == 'Number' ? '20' : '26';
+      if (val == 'Letter') {
+        this.unitOptions = createContinueData(val, length);
+        this.initialUnitList.unit.type = 'Letter';
+        this.initialUnitList.unit.start = 'A';
+        this.initialUnitList.unit.end = 'A';
+      } else {
+        this.initialUnitList.unit = this.copyrules.unit;
+        this.unitOptions = createContinueData(val, length);
+      }
+    },
 
-        submit() {
-            new Promise((resolve) => {
-                this.$refs.detailform.validate(resolve);
-            }).then((v) => {
-                const { buildNumber, unitNumber, floorNumber, doorNumber } = calcDoor(this.doorData, this.initialUnitList.checkedUnit);
-                const txt = `请检查信息是否填写完整(包含重复名称,名称为空现象)<br>确认提交单元户信息:<br>总楼栋数:${buildNumber}${
-                    this.initialUnitList.enableUnit ? `<br>总单元数:${unitNumber}` : ''
-                }<br>总楼层数:${floorNumber}<br>总单元户数:${doorNumber}`;
+    resetForm () {
+      this.formdata = {};
+      this.formdata = this.copyformdata;
+      // this.doorData = [];
+      this.$refs.detailform.validateField('communityId');
+    },
 
-                this.__confirm(txt, '提交')
-                    .then((v) => {
-                        if (!this.initialUnitList.checkedUnit) {
-                            this.doorData[0].unitName = '';
-                            this.formdata.unitNumber = 0;
-                        }
-                        this.formdata.buildingUnitList = this.doorData;
+    checkedUnit (val) {
+      if (val) {
+        this.initialUnitList.enableUnit = 1;
+      } else {
+        this.formdata.unitNumber = 1;
+        this.initialUnitList.enableUnit = 0;
+      }
+    },
+    createDoor () {
+      if (this.formdata.buildingName == '') {
+        this.$message.error('先输入楼栋名称');
+        return;
+      }
+      new Promise((resolve) => {
+        this.$refs.unitform.validate(resolve);
+      }).then((v) => {
+        if (this.initialUnitList.checkedUnit) {
+          this.initialUnitList.enableUnit = 1;
+        } else {
+          this.formdata.unitNumber = 1;
+          this.initialUnitList.enableUnit = 0;
+        }
+        let isNumberUnitFlag = this.initialUnitList.unit.type == 'Number' ? true : false;
+        let checkUnit = this.initialUnitList.unit.start <= this.initialUnitList.unit.end ? true : false;
+        if (this.initialUnitList.checkedUnit) {
+          if (checkUnit && isNumberUnitFlag) {
+            this.formdata.unitNumber = this.initialUnitList.unit.end - this.initialUnitList.unit.start + 1;
+          } else if (!isNumberUnitFlag && checkUnit) {
+            this.formdata.unitNumber =
+              this.initialUnitList.unit.end.charCodeAt() - this.initialUnitList.unit.start.charCodeAt() + 1;
+          } else {
+            this.formdata.unitNumber = 1;
+            this.$message.error('单元起始和结束设置出错');
+            return;
+          }
+        }
 
-                        let url = '/sc-community/assets/building/add';
-                        if (!!this.params.id) {
-                            url = '/sc-community/assets/building/update';
-                        }
-                        this.$http
-                            .post(url, this.formdata)
-                            .then(({ msg, status }) => {
-                                this.$message({
-                                    type: status === 0 ? 'success' : 'error',
-                                    message: msg
-                                });
-                                if (status === 0) {
-                                    this.close();
-                                }
-                            })
-                            .catch(() => {});
-                    })
-                    .catch(() => {});
+        this.doorData = initDoor(this.formdata, this.initialUnitList).generateUnit;
+      });
+    },
+    handleInputConfirm (e, arr) {
+      const { value, dataset } = e.target;
+      if (value && dataset) {
+        const { code } = dataset;
+        const querySame = () => _.isEmpty(_.filter(arr, (v) => v.name == value));
+        const generate = {
+          unit: initDoor(this.formdata, this.initialUnitList).generateUnit,
+          floor: initDoor(this.formdata, this.initialUnitList).generateFloor,
+          door: initDoor(this.formdata, this.initialUnitList).generateDoor(value)
+        };
+        if (querySame()) {
+          if (code == 'unit') {
+            arr.push({
+              unitName: value,
+              unitFloorList: code != 'door' ? generate['floor'] : undefined
             });
-        },
-
-        getDetailData(id) {
-            this.$http.get('/sc-community/assets/building/house/find', { id: id }).then(({ status, data, msg }) => {
-                if (0 === status) {
-                    if (data.buildingUnitList.length !== 0) {
-                        this.formdata = data;
-                        this.formdata.householdsPerFloor = data.buildingUnitList[0].unitFloorList[0].roomList.length;
-                        this.initialUnitList = {
-                            checkedUnit: data.unitNumber !== 0 ? true : false,
-                            enableUnit: data.unitNumber !== 0 ? 1 : 0,
-                            unit: {
-                                type: 'Number', //  Number letter
-                                start: data.buildingUnitList[0]['unitName'], // 1 A单元的起始单元
-                                end: data.buildingUnitList[data.buildingUnitList.length - 1]['unitName']
-                            }
-                        };
-                        this.doorData = data.buildingUnitList;
-                    }
-                }
+          } else if (code == 'door') {
+            arr.push({
+              roomNumber: value
             });
+          } else if (code == 'floor') {
+            arr.push({
+              floorNumber: value,
+              roomList: code != 'door' ? generate['door'] : undefined
+            });
+          }
+          this.inputValue[code] = '';
+        } else {
+          this.$message.error(`${txtI18n[code]}名称重复,请重新添加`);
         }
+      }
+      e.target.parentElement.style.display = 'none';
+      e.target.parentElement.previousElementSibling.style.display = 'inline-block';
+      e.target.value = '';
     },
-    mounted() {},
-    created() {
-        this.copyformdata = this.deepClone(this.formdata);
-        if (!!this.params.id) {
-            this.getDetailData(this.params.id);
+
+    submit () {
+      new Promise((resolve) => {
+        this.$refs.detailform.validate(resolve);
+      }).then((v) => {
+        const { buildNumber, unitNumber, floorNumber, doorNumber } = calcDoor(this.doorData, this.initialUnitList.checkedUnit);
+        const txt = `请检查信息是否填写完整(包含重复名称,名称为空现象)<br>确认提交单元户信息:<br>总楼栋数:${buildNumber}${this.initialUnitList.enableUnit ? `<br>总单元数:${unitNumber}` : ''
+          }<br>总楼层数:${floorNumber}<br>总单元户数:${doorNumber}`;
+
+        this.__confirm(txt, '提交')
+          .then((v) => {
+            if (!this.initialUnitList.checkedUnit) {
+              this.doorData[0].unitName = '';
+              this.formdata.unitNumber = 0;
+            }
+            this.formdata.buildingUnitList = this.doorData;
+
+            let url = '/sc-community/assets/building/add';
+            if (!!this.params.id) {
+              url = '/sc-community/assets/building/update';
+            }
+            this.$http
+              .post(url, this.formdata)
+              .then(({ msg, status }) => {
+                this.$message({
+                  type: status === 0 ? 'success' : 'error',
+                  message: msg
+                });
+                if (status === 0) {
+                  this.close();
+                }
+              })
+              .catch(() => { });
+          })
+          .catch(() => { });
+      });
+    },
+
+    getDetailData (id) {
+      this.$http.get('/sc-community/assets/building/house/find', { id: id }).then(({ status, data, msg }) => {
+        if (0 === status) {
+          // if (data.buildingUnitList.length !== 0) {
+          this.formdata = data;
+          this.formdata.householdsPerFloor = data.buildingUnitList[0].unitFloorList[0].roomList.length;
+          this.initialUnitList = {
+            checkedUnit: data.unitNumber !== 0 ? true : false,
+            enableUnit: data.unitNumber !== 0 ? 1 : 0,
+            unit: {
+              type: 'Number', //  Number letter
+              start: data.buildingUnitList[0]['unitName'], // 1 A单元的起始单元
+              end: data.buildingUnitList[data.buildingUnitList.length - 1]['unitName']
+            }
+          };
+          this.doorData = data.buildingUnitList;
+          // }
         }
-        this.copyrules = JSON.parse(JSON.stringify(this.initialUnitList));
+      });
+    }
+  },
+  mounted () { },
+  created () {
+    this.copyformdata = this.deepClone(this.formdata);
+    if (!!this.params.id) {
+      this.getDetailData(this.params.id);
     }
+    this.copyrules = JSON.parse(JSON.stringify(this.initialUnitList));
+  }
 };
 </script>
 <style lang="scss" >