cyzh-park/src/views/device/iot/iotdevice.vue

<template>
  <basic-container>
    <el-dialog  :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="alarmRecordVisible" title="历史告警记录"
                width="80%" height="50%">
      <alarmhistory :imei="imei" ref="alarmRecordRef"></alarmhistory>
    </el-dialog>
    <el-dialog  :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="editVisible" title="编辑"
                width="80%">
      <avue-form v-model="editForm" :option="option" @submit="submitSmartDevice">
        <template slot="mapSelect">
          <input class="el-input--small el-input__inner" placeholder="选择地址" @click="mapVisible2 = true">
        </template>
      </avue-form>
    </el-dialog>
    <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="mapVisible2"
               title="编辑地址" width="80%">
      <customAvueMap v-if="mapVisible2" v-model="editForm.mapSelect"></customAvueMap>
    </el-dialog>
    <el-dialog  :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="viewVisible" title="详情"
                width="80%">
      <avue-form v-model="detailForm" :option="detailoption" disabled="false">

      </avue-form>
    </el-dialog>

    <el-container>
      <el-main>
        <template>
          <el-carousel :interval="5000" type="card" height="200px">
            <el-carousel-item v-for="item in deviceCount" :key="item">
              <el-container>
                <el-header style="background-color: rgb(29,67,58);height: 65px">
                  <div class="titleLabel">
                    <el-row :gutter="40">
                      <div @click="deviceClick(item.deviceType)">
                        <el-col :span="20"><div class="titleText">{{item.deviceTypeName}}</div></el-col>
                        <el-col :span="4"><div class="titleCount">{{item.deviceCount}}</div></el-col>
                      </div>
                    </el-row>
                  </div>
                </el-header>
                <el-main>
                  <div style="margin-left: 100px">
                    <avue-data-display :option="dataShow(item)"></avue-data-display>
                  </div>
                </el-main>
              </el-container>
            </el-carousel-item>
          </el-carousel>
        </template>

      </el-main>

    </el-container>

    <el-divider class="divider-bottom"></el-divider>

    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"></avue-crud>

      <template slot="mapSelectForm" slot-scope="scope">
        <div>
          <el-button @click="mapVisible = true"> 选择地址</el-button>
          <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="mapVisible"
                     title="编辑地址" width="80%">
            <!--            <customAvueMap v-if="mapVisible" v-model="scope.row.mapSelect"></customAvueMap>-->
            <editPolygonMap v-if="mapVisible" v-model="scope.row.mapSelect" :visible.sync="mapVisible"></editPolygonMap>
          </el-dialog>
        </div>
        <!-- <avue-map v-model="scope.row.mapSelect"></avue-map> -->
      </template>
      <template slot="menu" slot-scope="scope">
        <!--         <el-button icon="el-icon-view" type="text" @click="viewDetail(scope.row)">查看</el-button>-->
        <el-button v-if="permission.bind_residential" icon="el-icon-paperclip" :class="{changeBind: !!scope.row.residentialId}" type="text" @click="showDeviceBind(scope.row)">{{!scope.row.residentialId ? '设备绑定' : '设备改绑'}}</el-button>
        <el-button type="text" size="small" icon="el-icon-setting">
          <el-dropdown @command="tip">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"> </i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-view" type="text" @click.native="viewDetail(scope.row)">查看</el-dropdown-item>
              <el-dropdown-item divided @click.native="edit(scope.row)" icon="el-icon-edit">编辑</el-dropdown-item>
              <el-dropdown-item icon="el-icon-paperclip" :class="{changeBind: !!scope.row.residentialId}" type="text" @click.native="showDeviceBind(scope.row)">{{!scope.row.residentialId ? '设备绑定' : '设备改绑'}}</el-dropdown-item>
              <el-dropdown-item icon="el-icon-office-building" type="text" @click.native="showEnterpriseSelect(scope.row)">绑定企业</el-dropdown-item>
              <el-dropdown-item divided v-if="scope.row.imei!=''" @click.native="viewAlarmRecord(scope.row)" icon="el-icon-bell">历史告警</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-button>

      </template>

    <!--    小区列表-->
    <el-dialog :modal-append-to-body="false" append-to-body :visible.sync="bindVisible" title="设备绑定" center width="20%">
      <div style="text-align: center;">
        <el-select v-model="selectValue" filterable placeholder="请选择">
          <el-option v-for="item in residentialList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <p style="margin-top: 20px;">
          <el-button type="primary" icon="el-icon-paperclip" @click="bindDevice">绑定</el-button>
        </p>
      </div>
    </el-dialog>

    <!--    企业列表-->
    <el-dialog :modal-append-to-body="true" append-to-body :visible.sync="enterpriseVisible" title="企业绑定" center width="20%">
      <div style="text-align: center;">
        <el-select v-model="enterpriseSelect" multiple filterable placeholder="请选择企业">
          <el-option v-for="item in enterpriseList" :key="item.id" :label="item.enterpriseName" :value="item.id">
          </el-option>
        </el-select>
        <p style="margin-top: 20px;">
          <el-button type="primary" icon="el-icon-office-building" @click="enterpriseBindDevice">绑定</el-button>
        </p>
      </div>
    </el-dialog>

  </basic-container>
</template>



<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  deviceListCount
} from "@/api/device/iotdevice";
// import { getList as getUserList} from "@/api/system/user";
import {
  mapGetters
} from "vuex";
import {getAllList} from "@/api/community/residential";
import alarmhistory from "../../../components/device/alarmhistory.vue";
import {dataDisplay} from "@/api/dataview/dataviewoption";
import customAvueMap from "../../../components/residential/customAvueMap.vue"
import editPolygonMap from "../../../components/residential/editPolygonMap.vue"
import {getEnterpriseList} from "../../../api/device/iotdevice";
export default {
  components:{
    alarmhistory,customAvueMap,editPolygonMap
  },
  data() {
    return {
      mapVisible:false,
      mapVisible2:false,
      // alarmRecordForm:{},
      // treeDateList:[],
      enterpriseVisible:false,
      enterpriseList:[],
      enterpriseSelect:[],

      imei:"",
      alarmRecordVisible: false,
      editForm: {},
      editVisible: false,
      residentialId : '',
      SmartDeviceStaticVo: {},
      deviceCount: {},
      allVisible: true,
      activeName: "first",
      detailVisible: false,
      bindVisible: false,
      residentialList: [],
      selectValue: '',
      form: {},
      detailForm:{
      },
      viewVisible:false,
      titleText: '',
      deviceDetail: {},

      alarmData: [],
      alarmSetData: [],

      homeUserData: [],
      bindedHomeUserData: [],
      query: {},
      loading: true,

      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },

      selectionList: [],
      dataShowOption: {},

      option: {
        height: 'auto',
        menuWidth: 300,
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        border: true,
        index: true,
        viewBtn:false,
        // addBtn: false,
        delBtn: false,
        editBtn: false,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "设备类型",
            prop: "deviceType",
            type: "select",
            searchSpan: 4,
            search: true,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=iot_device_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请选择设备类型",
              trigger: "blur"
            }]
          },
          {
            label: "设备名称",
            prop: "deviceName",
            searchSpan: 4,
            search: true,
            overHidden:true,
            rules: [{
              required: true,
              message: "请输入设备名称",
              trigger: "blur"
            }]
          },
          {
            label: "IMEI",
            prop: "imei",
            rules: [{
              required: true,
              message: "请输入IMEI",
              trigger: "blur"
            }]
          },
          {
            label: "设备状态",
            prop: "deviceStatus",
            type: "select",
            searchSpan: 4,
            search: true,
            editDisplay: false,
            addDisplay: false,
            dicData:[
              {
                label: "已注册",
                value: 0
              },
              {
                label: "已激活",
                value: 1
              },
              {
                label: "已注销",
                value: 2
              }
            ]
          },
          {
            label: "在线状态",
            prop: "deviceNetStatus",
            type: "select",
            searchSpan: 4,
            search: true,
            editDisplay: false,
            addDisplay: false,
            dicData:[
              {
                label: "在线",
                value: 1
              },
              {
                label: "离线",
                value: 2
              },
            ]
          },
          /*{
            label: "所属园区",
            prop: "agencyId",
            searchSpan: 4,
            slot: true,
            search: true,
            cascaderItem: ['residentialId'],
            type: "select",
            remote: true,
            dicUrl: "/api/cyzh-community/agency/list",
            dicFormatter:(res)=>{
              return res.data.records;//返回字典的层级结构
            },
            props: {
              label: "name",
              value: "id"
            },
            rules: [{
              required: true,
              message: "请选择所属社区",
              trigger: "blur"
            }]
          },
          {
            label: "所属区域",
            prop: "residentialId",
            slot: true,
            type: "select",
            dicUrl: "/api/cyzh-community/residential/list?agencyId={{key}}",
            dicFormatter:(res)=>{
              return res.data.records;//返回字典的层级结构
            },
            filterable: true,
            props: {
              label: "name",
              value: "id"
            },
            rules: [{
              required: true,
              message: "请选择所属小区",
              trigger: "blur"
            }]
          },*/
          {
            label: "所属园区",
            prop: "agencyName",
          },
          {
            label: "所属区域",
            prop: "residentialName",
          },
          {
            label: "经度",
            prop: "longitude",
            hide: true,
            rules: [{
              required: false,
              message: "请输入经纬度",
              trigger: "blur"
            }]
          },
          {
            label: "纬度",
            prop: "latitude",
            hide: true,
            rules: [{
              required: false,
              message: "请输入经纬度",
              trigger: "blur"
            }]
          },

          {
            label: "安装位置",
            prop: "deviceInstallAddress",
            rules: [{
              required: false,
              message: "请输入安装位置",
              trigger: "blur"
            }]
          },
          {
            label: "最后上线时间",
            prop: "lastOnlineAt",
            hide: true,
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "最后上线时间",
            prop: "lastOfflineAt",
            hide: true,
            addDisplay: false,
            editDisplay: false,
          },
        ]
      },
      //详情字段
      detailoption: {
        submitBtn:false,
        emptyBtn:false,
        disabled: true,
        column: [{
          label: "设备编码",
          prop: "deviceId",
          width: 100,
          hide: true,
          // search:true,
          // display: false,
          rules: [{
            required: true,
            message: "请输入设备唯一标识",
            trigger: "blur"
          }]
        },
          {
            label: "IMEI号",
            prop: "imei",
            width: 130,
            hide: true,
            rules: [{
              required: true,
              message: "请输入IMEI号",
              trigger: "blur"
            }]
          },
          {
            label: "设备名称",
            prop: "deviceName",
            searchSpan: 4,
            search: true,
            // width:200,
            overHidden:true,
            rules: [{
              required: true,
              message: "请输入设备名称",
              trigger: "blur"
            }]
          },
          {
            label: "归属",
            prop: "residentialId",
            type:"select",
            searchSpan: 4,
            remote: true,
            dicUrl: "/api/cyzh-community/residential/list?name={{key}}",
            props:{
              label: "name",
              value: "id"
            },
            searchFilterable: true,
            search: true,
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }]
          },
          {
            label: "企业",
            prop: "enterpriseIds",
            type: "select",
            searchSpan: 4,
            display: false,
            hide: true,
            remote: true,
            dicUrl: "/api/cyzh-enterprise/enterprise/list?enterpriseName={{key}}",
            props:{
              label: "enterpriseName",
              value: "id"
            },
            searchFilterable: true,
            search: false,
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }]
          },
          {
            label: "设备注册平台标识",
            prop: "isAep",
            type: "select",
            width: 80,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=device_registry_label",
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dataType: "number",
            // search: true,
            searchLabelWidth: 140,
            searchSpan: 8,

            rules: [{
              required: true,
              message: "请输入设备注册平台标识,1:aep,2:华为,3:厂商",
              trigger: "blur"
            }]
          },
          {
            label: "经纬度",
            prop: "latitudeLongitude",
            hide: true,
            rules: [{
              required: true,
              message: "请输入经纬度",
              trigger: "blur"
            }]
          },
          {
            label: "操作者",
            prop: "operator",
            hide: true,
            addDisplay: false,
            display: false,
            rules: [{
              required: false,
              message: "请输入操作者",
              trigger: "blur"
            }]
          },
          {
            label: "产品ID",
            prop: "productId",
            hide: true,
            addDisplay: false,
            display: false,
            rules: [{
              required: false,
              message: "请输入产品ID",
              trigger: "blur"
            }]
          },
          {
            label: "订阅事件",
            prop: "autoObserver",
            type: "select",
            hide: true,
            addDisplay: false,
            display: false,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=auto_subscribe",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            rules: [{
              required: false,
              message: "请输入0 自动订阅（默认），1 取消自动订阅 (LWM2M 协议选填，其他协议不填）",
              trigger: "blur"
            }]
          },
          {
            label: "设备类型",
            prop: "deviceType",
            type: "select",
            width: 70,
            searchSpan: 4,
            search: true,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=iot_device_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "string",
            // display: false,
            rules: [{
              required: true,
              message: "请输入设备类型",
              trigger: "blur"
            }]
          },
          {
            label: "设备状态",
            prop: "deviceStatus",
            type: "select",
            search: true,
            searchSpan: 4,
            width: 70,
            display: false,
            addDisplay: false,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=device_status",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            rules: [{
              required: true,
              message: "请输入设备状态",
              trigger: "blur"
            }]
          },
          {
            label: "电池电量",
            prop: "battery",
            slot: true,
            width: 100,
            display: false,
            addDisplay: false,
            rules: [{
              required: true,
              message: "请输入电池电量",
              trigger: "blur"
            }]
          },
          {
            label: "信号强度",
            prop: "signalIntensity",
            slot: true,
            display: false,
            width: 80,
            addDisplay: false,
            rules: [{
              required: true,
              message: "请输入信号强度",
              trigger: "blur"
            }]
          },
          {
            label: "厂家名称",
            prop: "manufacturers",
            hide: true,
            rules: [{
              required: false,
              message: "请输入厂家名称",
              trigger: "blur"
            }]
          },
          {
            label: "厂商编号(附录)",
            prop: "manufacturersNo",
            hide: true,
            display: false,
            addDisplay: false,
            rules: [{
              required: false,
              message: "请输入厂商编号(附录)",
              trigger: "blur"
            }]
          },
          {
            label: "设备型号",
            prop: "deviceSpecld",
            hide: true,
            rules: [{
              required: false,
              message: "请输入设备型号",
              trigger: "blur"
            }]
          },

        ]
      },
      data: []
    };
  },

  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.smartdevice_add, false),
        viewBtn: this.vaildData(this.permission.smartdevice_view, false),
        delBtn: this.vaildData(this.permission.smartdevice_delete, false),
        editBtn: this.vaildData(this.permission.smartdevice_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  watch: {
    'form.mapSelect': {
      handler: function (value) {
        if (!value) {
          return
        } else {
          this.form.longitude = this.form.mapSelect.longitude;
          this.form.latitude = this.form.mapSelect.latitude;
          this.form.latitudeLongitude = this.form.mapSelect.longitude + ',' + this.form.mapSelect.latitude;
          this.form.deviceInstallAddress = this.form.mapSelect.formattedAddress;
        }
      },
    },
    'editForm.mapSelect': {
      handler: function (value) {
        if (!value) {
          return
        } else {
          this.editForm.longitude = this.editForm.mapSelect.longitude;
          this.editForm.latitude = this.editForm.mapSelect.latitude;
          this.editForm.latitudeLongitude = this.editForm.mapSelect.longitude + ',' + this.editForm.mapSelect.latitude;
          // this.editForm.deviceInstallAddress = this.editForm.mapSelect.formattedAddress;
        }
      },
    },
  },
  created() {
    deviceListCount().then(res =>{
      this.deviceCount = res.data.data;
    })
  },
  mounted() {
    // this.option.column[4].search = this.permission.bind_enterprises;

    let tenantType = localStorage.getItem("tenantType");
    const residentialColumn = this.findObject(this.option.column, "residentialId");
    if (tenantType == 1) { //园区
      residentialColumn.label = "所属区域";
    } else { //社区
      residentialColumn.label = "所属小区";
    }

  },
  methods: {
    dataShow(obj){
      return dataDisplay(obj,this)
    },
    select(deviceType,deviceStatus,params={}) {
      this.$refs.crud.searchForm.deviceType = deviceType;
      this.query.deviceType = deviceType;
      this.$refs.crud.searchForm.deviceStatus = deviceStatus;
      this.query.deviceStatus = deviceStatus;
      this.onLoad(this.page,this.query);
    },
    enterpriseBindDevice(){
      let enterpriseSelectStr = '';

      for (let i = 0; i < this.enterpriseSelect.length; i++){
        enterpriseSelectStr += this.enterpriseSelect[i]+',';
      }
      this.form.enterpriseIds = enterpriseSelectStr;
      console.log(this.form.enterpriseIds);
      //保存
      update(this.form).then(() => {
        this.onLoad(this.page);
        this.enterpriseVisible = false;
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        console.log(error);
      });
    },
    showEnterpriseSelect(row){
      if (this.enterpriseList.length == 0){
        //  请求获取企业列表
        getEnterpriseList(5000).then(res => {
          console.log(res.data.data,"企业列表数据");
          this.enterpriseList = res.data.data.records;
          this.enterpriseVisible = true;
          console.log(res);
        })
      }else{
        this.enterpriseVisible = true;
      }
      this.form = row;
    },
    viewAlarmRecord(row,params={}){
      this.imei = row.imei;
      this.alarmRecordVisible = true;
      this.$nextTick(()=>{
        this.$refs.alarmRecordRef.init();
      })
    },
    submitSmartDevice(row,done,loading){
      update(this.editForm).then(() => {
        this.onLoad(this.page);
        this.editVisible = false;
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    edit(row){
      this.editForm = row;
      this.editVisible = true;
    },
    deviceClick(type){
      this.$refs.crud.searchForm.deviceType = type;
      this.query.deviceType = type;
      this.onLoad(this.page);
    },
    handleClick(tab, event) {
      console.log(tab + " " + event)
    },
    showDeviceBind(row){
      this.selectValue = row.residentialId;
      if (this.residentialList.length == 0){
        //  请求获取小区列表
        getAllList(5000).then(res => {
          this.residentialList = res.data.data.records;
          this.bindVisible = true;
        })
      }else{
        this.bindVisible = true;
      }
      this.form = row;
    },
    bindDevice(){
      this.form.residentialId = this.selectValue;
      //保存
      update(this.form).then(() => {
        this.onLoad(this.page);
        this.bindVisible = false;
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        console.log(error);
      });
    },
    rowView(row){

    },
    viewDetail(row) {
      this.detailForm = row;
      this.viewVisible = true;
      // console.log("row" + JSON.stringify(row))
      // this.titleText = row.$deviceType
      // this.deviceDetail = row;
      // /*getUserList(this.page.currentPage, this.page.pageSize, {residential: row.residentialId}).then(res =>{
      //   this.alarmData = res.data.data.records;
      // })*/
      // this.residentialId = row.residentialId
      // /*this.alarmData = [
      //   {
      //   name: "李德",
      //   tel: "15089107336",
      //   area: "阅海万家D区"
      // }, {
      //   name: "黄俊豪",
      //   tel: "15145867336",
      //   area: "阅海万家D区"
      // }, {
      //   name: "林旭光",
      //   tel: "17899572954",
      //   area: "阅海万家D区"
      // }, {
      //   name: "蔡志彬",
      //   tel: "17899584512",
      //   area: "阅海万家D区"
      // }, {
      //   name: "黄坚伟",
      //   tel: "17899571256",
      //   area: "阅海万家D区"
      // } ];*/
      // this.alarmSetData = [
      //   {
      //     name: "蔡志彬",
      //     tel: "17899584512",
      //     area: "阅海万家D区"
      //   }, {
      //     name: "黄坚伟",
      //     tel: "17899571256",
      //     area: "阅海万家D区"
      //   }];
      // this.homeUserData = [
      //   {
      //     name: "李德",
      //     tel: "15089107336",
      //     area: "阅海万家D区"
      //   }, {
      //     name: "黄俊豪",
      //     tel: "15145867336",
      //     area: "阅海万家D区"
      //   }, {
      //     name: "林旭光",
      //     tel: "17899572954",
      //     area: "阅海万家D区"
      //   }, {
      //     name: "蔡志彬",
      //     tel: "17899584512",
      //     area: "阅海万家D区"
      //   }, {
      //     name: "黄坚伟",
      //     tel: "17899571256",
      //     area: "阅海万家D区"
      //   }];
      // this.bindedHomeUserData = [];
      // this.detailVisible = true;
    },
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },

    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },


    onLoad(page, params = {}) {
      this.loading = true;
      /*getSmartDeviceStaticVo(Object.assign(params, this.query)).then(res =>{
        this.SmartDeviceStaticVo = res.data.data;
      })*/
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });


    }
  }
};
</script>

<style scoped>
.avue-crud{
  padding-bottom: 20px;
  /* height: 800px; */
}
>>> .el-pagination{
  position: absolute;
  top: 0px;
  bottom: 0px;
  /* height: 100px; */
}
.shadow{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.titleLabel{
  color: white;
  height: 65px;
  line-height: 65px;
}
.titleText{
  font-size: 25px;
  font-weight: bolder;
  padding-left: 10px;
}
.titleCount{
  font-size: 25px;
  font-weight: bolder;
}
.colMarginBottom{
  margin-bottom: 0px;
}
.statusText{
  font-size: 14px;
  font-weight: bolder;
  color: green;
}
.statusCount{
  font-size: 14px;
  font-weight: 700;
  color: red;
}
.el-divider--vertical {
  /* height: 100%; */
}
>>> .el-divider--horizontal{
  margin: 0px !important;
  margin-bottom: 5px !important;
}
>>> .el-main{
  overflow: hidden;
}
>>> .divider-bottom{
  margin: 0 !important;
  margin-bottom: 10px !important;
}
>>> aside font {
  cursor: pointer;
}
>>> .changeBind {
  color: orange;
}

.el-carousel__item:nth-child(2n) {
  background-color: rgb(217,236,255);
}

.el-carousel__item:nth-child(2n+1) {
  background-color: rgb(236,245,255);
}
</style>