南昌市物联网技防平台-前端
jxdnsong
2021-02-03 c1a378042f93f92ed257f1d34650766eb2a11dd6
src/views/clientManagement/clientManagement.vue
@@ -44,24 +44,46 @@
            </el-tag>
          </template>
          <template slot-scope="{ row }" slot="dtype">
          <template slot-scope="{ row }" slot="dxzt">
            <el-tag>{{
              row.dtype == "0" ? "掉线" : row.dtype == "1" ? "在线" : "无"
              row.dxzt == "0" ? "掉线" : row.dxzt == "1" ? "在线" : "无"
              }}
            </el-tag>
          </template>
          <template slot-scope="{ row }" slot="expireTime">
            <span>
              {{
                row.expireTime == "" ? row.expireTime : row.expireTime == null ? row.expireTime : row.expireTime.split(" ")[0]
              }}
            </span>
            <i class="el-icon-warning" v-if="row.type == 1"></i>
          </template>
        </avue-crud>
      </basic-container>
    </el-col>
    <el-dialog title="缴费提醒" :visible.sync="dialogTableVisible" custom-class="payWin" append-to-body="true">
      <el-table :data="gridData">
        <el-table-column property="xb" label="序号" width="50"></el-table-column>
        <el-table-column property="deviceName" label="设备名称" width="150"></el-table-column>
        <el-table-column property="deviceNumber" label="设备编号" width="150"></el-table-column>
        <el-table-column property="street" label="所属单位" width="200"></el-table-column>
        <el-table-column property="expireTime" label="到期时间"></el-table-column>
      </el-table>
    </el-dialog>
  </el-row>
</template>
<script>
  import {getList, remove, update, add, getclient, getDeptLazyTree} from "@/api/client/client";
  import {getList, remove, update, add, getclient, getDeptLazyTree, getAll} from "@/api/client/client";
  import {mapGetters} from "vuex";
  export default {
    created() {
      this.payWin();
    },
    data() {
      return {
        form: {},
@@ -72,6 +94,8 @@
          currentPage: 1,
          total: 0
        },
        dialogTableVisible: false,
        gridData: null,
        selectionList: [],
        treeDeptId: '',
        treeData: [],
@@ -105,6 +129,8 @@
          calcHeight: 80,
          labelWidth: '100',
          dialogWidth: 950,
          menuWidth: 160,
          size: "mini",
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
@@ -112,7 +138,7 @@
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          selection: false,
          dialogClickModal: false,
          column: [
            {
@@ -123,20 +149,93 @@
              search: true,
            },
            {
              label: "到期时间",
              prop: "releaseTimeRange",
              type: "datetime",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              searchRange: true,
              searchSpan: 5,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入时间",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "设备编号",
              prop: "deviceNumber",
              width: 130
            },
            {
              label: "行政区",
              prop: "addvcd",
              label: "省份",
              prop: "province",
              search: true,
              searchSpan: 3,
              searchLabelWidth: 60,
              placeholder: "省份",
              type: "select",
              props: {
                label: "name",
                value: "code"
              },
              cascaderItem: ["city", "district"],
              dicUrl: "/api/blade-system/region/select",
              span: 6,
              className: "cityClass1"
            },
            {
              label: "地市",
              prop: "city",
              type: "select",
              searchPlaceholder: "地市",
              placeholder: "地市",
              searchLabelWidth: 1,
              searchSpan: 2,
              search: true,
              props: {
                label: "name",
                value: "code"
              },
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass2"
            },
            {
              label: "区县",
              searchSpan: 2,
              searchLabelWidth: 1,
              searchPlaceholder: "区县",
              placeholder: "区县",
              search: true,
              prop: "district",
              type: "select",
              props: {
                label: "name",
                value: "code"
              },
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass3"
            }, {
              label: "布撤防状态",
              prop: "devicestate",
              type: "select",
              slot: true,
              width: 100,
              rules: [{
                required: true,
                trigger: "blur"
              }],
              dicData: [
                {
                  label: "撤防",
@@ -149,20 +248,13 @@
              ]
            }, {
              label: "设备状态",
              prop: "dtype",
              search: true,
              prop: "dxzt",
              slot: true,
              type: "select",
              dicData: [
                {
                  label: "掉线",
                  value: "0"
                },
                {
                  label: "在线",
                  value: "1"
                }
              ]
              addDisplay: false,
              editDisplay: false,
            }, {
              label: "缴费信息",
              prop: "pay",
            }, {
              label: "设备类型",
              prop: "deviceType",
@@ -176,19 +268,26 @@
              prop: "street",
              width: 150
            }, {
              label: "缴费信息",
              prop: "pay",
            }, {
              label: "安装时间",
              prop: "stime",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              width: 130
            }, {
              label: "到期时间",
              prop: "expireTime",
              width: 130
              type: "datetime",
              slot: true,
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              width: 150
            }, {
              label: "最后上传时间",
              prop: "heartbeat",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              width: 130
            },
@@ -328,39 +427,91 @@
        if (releaseTimeRange) {
          values = {
            ...params,
            releaseTime_datege: releaseTimeRange[0],
            releaseTime_datelt: releaseTimeRange[1],
            beginTime: releaseTimeRange[0],
            endTime: releaseTimeRange[1],
            ...this.query
          };
          values.releaseTimeRange = null;
        } else {
          values = {
            ...params,
            ...this.query
          };
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, values, this.treeDeptId).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          var Dqdate = new Date().getTime();
          for (var i = 0; i < data.records.length; i++) {
            var date = new Date(data.records[i].heartbeat).getTime();
            if ((Dqdate - date) >= (60 * 60 * 24 * 1000)) {
              data.records[i].dxzt = 0;
            } else if (data.records[i].heartbeat == "") {
              data.records[i].dxzt = 0;
            } else {
              data.records[i].dxzt = 1;
            }
          }
          data.records.sort((a,b)=>{
            return a.dxzt - b.dxzt;
          });
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }, rowStyle({row, column, rowIndex}) {
        if (row.heartbeat != null && row.heartbeat != "" ) {
        if (row.heartbeat != null && row.heartbeat != "") {
          var date = new Date(row.heartbeat).getTime();
          var Dqdate = new Date().getTime();
          if ((Dqdate - date) >= (60 * 60 * 24 * 1000)) {
            return {
              color: "#15a2fe"
              color: "#fe1515"
            };
          }
        }else if(row.heartbeat == ""){
        } else if (row.heartbeat == "") {
          return {
            color: "#15a2fe"
            color: "#fe1515"
          };
        }
      },
      payWin() {
        var that = this;
        getAll().then(res => {
          var data = res.data.data;
          var lists = [];
          var xb = 0;
          for (var i = 0; i < data.length; i++) {
            if (data[i].type == "1") {
              xb++;
              data[i].xb = xb;
              lists.push(data[i]);
            }
          }
          if (lists.length > 0) {
            that.gridData = lists;
            that.dialogTableVisible = true;
          }
        });
      }
    }
  };
</script>
<style>
  .payWin {
    overflow-y: auto;
    height: 350px;
  }
  .payWin .el-dialog__body {
    padding-top: 0px !important;
  }
</style>