地图模式设备状态修改

Administrator

2021-05-07 14e02654e0545ee69456d64aef2f35c7c219d708

 src/views/system/cs.vue

@@ -20,6 +20,7 @@
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @row-click="rowClick"
    >
      <template slot="menuLeft">
        <el-button
@@ -88,10 +89,53 @@
        @submit="handleDatasourceSubmit"
      />
    </el-dialog>
    <!-- 右侧弹窗，业主的设备 -->
    <el-dialog
      :title="onceData.tenantName"
      :visible.sync="dialogVisible"
      width="780px"
      :before-close="handleClose"
      modal-append-to-body="false"
      append-to-body="true"
      class="right-open"
    >
      <el-divider></el-divider>
      <div class="r-o-our">
        <avue-crud
          :option="options"
          @on-load="onLoads"
          :data="datas"
          :page="pages"
          @search-change="searchChanges"
          @search-reset="searchResets"
          @row-click="rowClicks"
          @current-change="currentChanges"
          @size-change="sizeChanges"
        >
          <template slot="states" slot-scope="scope">
            <el-tag
              :class="[
                scope.row.states == '掉线'
                  ? 'diaoxianl'
                  : scope.row.states == '在线'
                  ? 'zaixianl'
                  : scope.row.states == '故障'
                  ? 'guzhagnl'
                  : scope.row.states == '预警'
                  ? 'baojinl'
                  : '',
              ]"
              >{{ scope.row.states }}</el-tag
            >
          </template>
        </avue-crud>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getListliu, getListliuc } from "@/api/client/client";
import {
  getList,
  getDetail,
@@ -128,6 +172,89 @@
      loading: true,
      box: false,
      datasourceBox: false,
      dialogVisible: false, //右侧弹窗
      onceData: {}, //数据
      datas: [], //cc
      loadings: true, //等待
      querys: {}, //搜索
      isEdit:false,
      pages: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      options: {
        //表格数据
        addBtn: false,
        height: "auto",
        indexLabel: "序号",
        index: true,
        card: true,
        menu: false,
        header: false,
        searchShow: true,
        searchMenuSpan: 8,
        searchSpan: 8,
        searchEnter: true,
        calcHeight: 80,
        stripe: true,
        title: "表格的标题",
        titleSize: "h3",
        titleStyle: {
          color: "red",
        },
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "设备名称",
            width: 200,
            prop: "deviceName",
            searchPlaceholder: "设备名称/编号",
            search: true,
            sortable: false,
            rules: [
              {
                required: true,
                message: "请输入设备名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "设备编号",
            prop: "deviceNumber",
            width: 110,
          },
          {
            label: "使用方",
            prop: "pid",
            width: 200,
            search: true,
            hide: true,
            type: "select",
            // dicUrl: "/api/blade-system/dept/trees",
            dicData: [], //getUser中直接赋值
          },
          {
            label: "使用方",
            prop: "deptName",
            width: 200,
          },
          {
            label: "布撤防状态",
            prop: "stateSevicestate",
            width: 110,
          },
          {
            label: "设备状态",
            prop: "states",
            width: 90,
            slot: true,
            // className: "cityClass1",
          },
        ],
      },
      page: {
        pageSize: 10,
        currentPage: 1,
@@ -135,7 +262,7 @@
      },
      option: {
        height: "auto",
        calcHeight: 80,
        calcHeight: 54,
        size: "mini",
        tip: false,
        searchShow: true,
@@ -253,9 +380,20 @@
          },
          {
            label: "地址",
            prop: "map",
            prop: "address",
            span: 10,
            // labelWidth: '60',
            hide: true,
            span: 24,
          },
          {
            label: null,
            prop: "map",
            labelWidth: "0",
            searchSpan: 0,
            maxlength: 0,
            hide: true,
            span: 2,
            // display:false,
            component: "AvueMap",
          },
          {
@@ -263,12 +401,15 @@
            hide: true,
            addDisplay: false,
            prop: "wd",
            span: 6,
          },
          {
            label: "经度",
            labelWidth: "50",
            hide: true,
            addDisplay: false,
            prop: "jd",
            span: 5,
          },
          {
            label: "账号额度",
@@ -366,17 +507,6 @@
                        ],
                      },
                      {
                        label: "地址",
                        prop: "had",
                        rules: [
                          {
                            required: true,
                            message: "请输入地址",
                            trigger: "blur",
                          },
                        ],
                      },
                      {
                        label: "介绍",
                        prop: "content",
                        rules: [
@@ -440,16 +570,6 @@
                        ],
                      },
                      {
                        label: "地址",
                        prop: "had",
                        rules: [
                          {
                            required: true,
                            message: "请输入地址",
                          },
                        ],
                      },
                      {
                        label: "介绍",
                        prop: "content",
                        span: 24,
@@ -503,16 +623,6 @@
                          {
                            required: true,
                            message: "请输入开发商",
                          },
                        ],
                      },
                      {
                        label: "地址",
                        prop: "had",
                        rules: [
                          {
                            required: true,
                            message: "请输入地址",
                          },
                        ],
                      },
@@ -616,11 +726,37 @@
  watch: {
    "form.map": {
      // form是表单或者表格绑定的数据集，v-model='form'

      handler(val) {
        if (val) {
          this.form.wd = val.latitude;
          this.form.jd = val.longitude;
          if(that.isEdit){
            getDetail(this.form.id).then((res) => {
              this.form = res.data.data;
              this.form.wd = val.latitude;
              this.form.jd = val.longitude;
            });
          }
          //地址截取，从县/区开始截取,并且取从县区第一个出现的位置开始
          var address = val.formattedAddress.toString();
          if (address.search("县") != -1) {
            this.form.address = address.substring(
              address.indexOf("县") + 1,
              address.length
            );
          }
          if (address.search("区") != -1) {
            this.form.address = address.substring(
              address.indexOf("区") + 1,
              address.length
            );
          }
          //写入新的省市区
          that.form.province = val.addressComponent.province;
          if (val.addressComponent.city == "") {
            that.form.city = val.addressComponent.province;
          } else {
            that.form.city = val.addressComponent.city;
          }
          that.form.district = val.addressComponent.district;
        }
      },
      immediate: true,
@@ -652,9 +788,10 @@
      add(row).then(
        () => {
          if (row.type == "0") {
            console.log(123);
            instery(
              row.dj,
              row.had,
              // row.had,
              row.ht,
              row.ctime,
              row.content,
@@ -662,8 +799,9 @@
            );
          } else if (row.type == "1") {
            insertss(
              row.dj,
              row.nature,
              row.had,
              // row.had,
              row.motto,
              row.ctime,
              row.content,
@@ -671,10 +809,11 @@
            );
          } else if (row.type == "2") {
            insertsr(
              row.dj,
              row.category,
              row.attributes,
              row.developers,
              row.had,
              // row.had,
              row.housetype,
              row.content,
              row.hn
@@ -705,6 +844,7 @@
        );
      } else if (row.type == "1") {
        updateInfos(
          row.dj,
          row.nature,
          row.had,
          row.motto,
@@ -714,6 +854,7 @@
        );
      } else if (row.type == "2") {
        updateInfor(
          row.dj,
          row.category,
          row.attributes,
          row.developers,
@@ -764,35 +905,39 @@
    },
    beforeOpen(done, type) {
      if (["edit"].includes(type)) {
        that.isEdit=true;
        getDetail(this.form.id).then((res) => {
          if (this.form.type == "1") {
            const data = res.data.data;
            selectTs(this.form.tenantName).then((re) => {
              const data = res.data.data;
              data.nature = re.data.data[0].nature;
              data.dj = re.data.data[0].dj;
              data.motto = re.data.data[0].motto;
              data.ctime = re.data.data[0].ctime;
              data.had = re.data.data[0].had;
              //data.had = re.data.data[0].had;
              data.content = re.data.data[0].content;
              this.form = data;
            });
          } else if (this.form.type == "0") {
            selectTy(this.form.tenantName).then((re) => {
              console.log(re, 123);
              const data = res.data.data;
              data.dj = re.data.data[0].dj;
              data.ht = re.data.data[0].ht;
              data.ctime = re.data.data[0].ctime;
              data.had = re.data.data[0].had;
              //.had = re.data.data[0].had;
              data.content = re.data.data[0].content;
              this.form = data;
            });
          } else if (this.form.type == "2") {
            selectTr(this.form.tenantName).then((re) => {
              const data = res.data.data;
              data.dj = re.data.data[0].dj;
              data.category = re.data.data[0].category;
              data.attributes = re.data.data[0].attributes;
              data.developers = re.data.data[0].developers;
              data.had = re.data.data[0].had;
              //data.had = re.data.data[0].had;
              data.housetype = re.data.data[0].housetype;
              data.content = re.data.data[0].content;
              this.form = data;
@@ -807,7 +952,7 @@
              data.nature = re.data.data[0].nature;
              data.motto = re.data.data[0].motto;
              data.ctime = re.data.data[0].ctime;
              data.had = re.data.data[0].had;
              //data.had = re.data.data[0].had;
              data.content = re.data.data[0].content;
              if (!(data.accountNumber > 0)) {
                data.accountNumber = "不限制";
@@ -823,7 +968,7 @@
              data.dj = re.data.data[0].dj;
              data.ht = re.data.data[0].ht;
              data.ctime = re.data.data[0].ctime;
              data.had = re.data.data[0].had;
              //data.had = re.data.data[0].had;
              data.content = re.data.data[0].content;
              if (!(data.accountNumber > 0)) {
                data.accountNumber = "不限制";
@@ -839,7 +984,7 @@
              data.category = re.data.data[0].category;
              data.attributes = re.data.data[0].attributes;
              data.developers = re.data.data[0].developers;
              data.had = re.data.data[0].had;
              //data.had = re.data.data[0].had;
              data.housetype = re.data.data[0].housetype;
              data.content = re.data.data[0].content;
              if (!(data.accountNumber > 0)) {
@@ -852,6 +997,10 @@
            });
          }
        });
      }

      if (["edit"].includes(type)) {
        that.isEdit=false;        
      }
      done();
    },
@@ -975,6 +1124,8 @@
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        // console.log(res);
        // this.onceData = res.data.data.records[0];
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
@@ -982,7 +1133,133 @@
        this.selectionClear();
      });
    },
    rowClick(val) {
      //行点击事件 //右侧弹窗事件
      this.onceData = val;
      this.dialogVisible = true;
    },
    rowClicks(val) {
      //弹窗行点击事件
      // console.log(val);
      // this.$router.push({ path: "/dataL/dataL", query: val });
      let routeData = this.$router.resolve({
        path: "/datalOnce",
        query: val,
      });
      window.open(routeData.href, "_blank");
    },
    changeDataOpen(dat) {
      //处理弹出框数据
      console.log(dat);
      if (dat.length > 0) {
        for (var key in dat) {
          let states;
          if (dat[key].state != "") {
            states = "故障";
          } else {
            if (dat[key].jtype != 1) {
              if (dat[key].onlineStatus == 1) {
                states = "在线";
              } else {
                states = "掉线";
              }
            } else {
              states = "预警";
            }
          }
          // console.log(states);
          dat[key].states = states;
          dat[key].stateSevicestate =
            dat[key].devicestate == "0"
              ? "撤防"
              : dat[key].devicestate == "1"
              ? "布防"
              : "无";
        }
      }
    },
    getMout(fid) {
      getListliuc(fid).then((res) => {
        // console.log(res.data.data);
        this.getUser(res.data.data);
      });
    },
    getUser(dat) {
      //建立使用方搜索关键词
      // console.log(dat);
      if (dat.length > 0) {
        this.users = [];
        for (var key in dat) {
          this.users.push({
            label: dat[key].title,
            value: dat[key].id,
          });
        }
      }
      // this.users.push([
      //   {

      //   }
      // ])
      this.options.column[2].dicData = this.users;
    },
    searchResets() {
      //清空搜索框中的内容
      this.querys = {};
      //清空this.$route.query
      this.$router.push({ querys: {} });
      this.onLoads(this.pages);
    },
    searchChanges(params, done) {
      //搜索
      console.log(params, done, 222);
      this.querys = params;
      this.pages.currentPage = 1;
      this.onLoads(this.pages, params);
      done();
    },
    currentChanges(currentPage) {
      //分页改变时候触发
      this.pages.currentPage = currentPage;
    },
    sizeChanges(pageSize) {
      this.pages.pageSize = pageSize;
    },
    onLoads(pages, params = {}) {
      // this.$message.success("分页信息:" + JSON.stringify(pages));
      // this.pages.total = 40;
      // console.log(1)
      this.loadings = true;
      //  console.log(2)
      let values = {
        ...params,
      };
      // console.log(3)
      // getListliu(1, 10, {}, val.id).then((res) => {
      var useId = this.onceData.deptId;
      // console.log(4)
      getListliu(pages.currentPage, pages.pageSize, values, useId).then(
        (res) => {
          // console.log(5)
          // console.log(pages.currentPage, pages.pageSize, values, useId,332332)
          // console.log(this.datas);
          // getListliu('1', '10', {}, '1353972967828533249').then((res) => {
          //拿到数据
          this.datas = res.data.data.records;
          // console.log(this.datas);
          // console.log(pages.currentPage);
          // console.log(pages.pageSize);
          // console.log(this.onceData);
          const data = res.data.data;
          this.pages.total = data.total;
          this.changeDataOpen(this.datas);
          this.getMout(this.onceData.deptId);
          this.loadings = false;
        }
      );
    },
  },
  mounted() {},
};
</script>

@@ -1100,4 +1377,77 @@
.el-input__inner {
  width: aotu;
}
.right-open {
  //右侧弹窗样式
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;

  .el-dialog {
    margin: 0 auto !important;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
  @keyframes dialog-fade-in {
    0% {
      transform: translate3d(0, 0, 0, 100%);
      opacity: 0;
    }
    100% {
      transform: translate3d(0, 0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes dialog-fade-out {
    0% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 0;
    }
  }
  .r-o-our {
    width: calc(100% - 2px);
    height: calc(100% - 28px);
    // border: hotpink 1px solid;
    overflow: auto;
  }
}
.diaoxianl {
  border: 1px solid #fff;
  color: #fff;
  background-color: #cdcdcd;
}
.zaixianl {
  border: 1px solid #fff;
  color: #fff;
  background-color: #32c1a2;
}
.guzhagnl {
  border: 1px solid #fff;
  color: #fff;
  background-color: #f49966;
}
.baojinl {
  border: 1px solid #fff;
  color: #fff;
  background-color: #f35b5b;
}
</style>