地图模式设备状态修改

Administrator

2021-05-07 14e02654e0545ee69456d64aef2f35c7c219d708

 src/views/system/cs.vue

@@ -99,20 +99,35 @@
      append-to-body="true"
      class="right-open"
    >
      <el-divider ></el-divider>
      <el-divider></el-divider>
      <div class="r-o-our">
        <avue-crud
          :option="options"
          :data="datas"
          :table-loading="loadings"
          :page="pages"
          @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>
@@ -120,7 +135,7 @@
</template>

<script>
import { getAll, getListliu, getListliuc } from "@/api/client/client";
import { getListliu, getListliuc } from "@/api/client/client";
import {
  getList,
  getDetail,
@@ -159,9 +174,10 @@
      datasourceBox: false,
      dialogVisible: false, //右侧弹窗
      onceData: {}, //数据
      datas: "", //cc
      datas: [], //cc
      loadings: true, //等待
      querys: {}, //搜索
      isEdit:false,
      pages: {
        pageSize: 10,
        currentPage: 1,
@@ -173,6 +189,7 @@
        height: "auto",
        indexLabel: "序号",
        index: true,
        card: true,
        menu: false,
        header: false,
        searchShow: true,
@@ -233,6 +250,8 @@
            label: "设备状态",
            prop: "states",
            width: 90,
            slot: true,
            // className: "cityClass1",
          },
        ],
      },
@@ -709,11 +728,13 @@
      // form是表单或者表格绑定的数据集，v-model='form'
      handler(val) {
        if (val) {
          getDetail(this.form.id).then((res) => {
            this.form = res.data.data;
          });
          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) {
@@ -730,10 +751,10 @@
          }
          //写入新的省市区
          that.form.province = val.addressComponent.province;
          if(val.addressComponent.city==""){
              that.form.city = val.addressComponent.province;
          }else{
              that.form.city = val.addressComponent.city;
          if (val.addressComponent.city == "") {
            that.form.city = val.addressComponent.province;
          } else {
            that.form.city = val.addressComponent.city;
          }
          that.form.district = val.addressComponent.district;
        }
@@ -884,6 +905,7 @@
    },
    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;
@@ -975,6 +997,10 @@
            });
          }
        });
      }

      if (["edit"].includes(type)) {
        that.isEdit=false;        
      }
      done();
    },
@@ -1124,6 +1150,7 @@
    },
    changeDataOpen(dat) {
      //处理弹出框数据
      console.log(dat);
      if (dat.length > 0) {
        for (var key in dat) {
          let states;
@@ -1153,13 +1180,13 @@
    },
    getMout(fid) {
      getListliuc(fid).then((res) => {
      // console.log(res.data.data);
        // console.log(res.data.data);
        this.getUser(res.data.data);
      });
    },
    getUser(dat) {
      //建立使用方搜索关键词
      console.log(dat);
      // console.log(dat);
      if (dat.length > 0) {
        this.users = [];
        for (var key in dat) {
@@ -1169,6 +1196,11 @@
          });
        }
      }
      // this.users.push([
      //   {

      //   }
      // ])
      this.options.column[2].dicData = this.users;
    },
    searchResets() {
@@ -1196,14 +1228,20 @@
    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) => {
          //拿到数据
@@ -1348,10 +1386,10 @@

  .el-dialog {
    margin: 0 auto !important;
    height: 98%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 1%;
    top: 0;
    right: 0;
    .el-dialog__body {
      position: absolute;
@@ -1392,4 +1430,24 @@
    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>