问题修复

zengh

2021-03-24 33c4e059eeb71de6f186bc4ee22e05bfd3bd5aeb

 src/views/clientManagement/clientManagement.vue

@@ -28,7 +28,7 @@
                   @on-load="onLoad">
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       size="mini"
                       icon="el-icon-delete"
                       plain
                       v-if="permission.clientManagement_delete"
@@ -43,42 +43,158 @@
              }}
            </el-tag>
          </template>
          <template slot-scope="{ type, size, row }" slot="menu">
            <el-button
              icon="el-icon-video-camera-solid"
              :size="size"
              :type="type"
              @click.stop="handleStart(row)"
            >视频
            </el-button>
            <el-button
              icon="el-icon-location-outline"
              :size="size"
              :type="type"
              @click.stop="handleMap(row)"
            >定位
            </el-button>
          </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="jfzt">
            <i class="el-icon-check client-jf" v-if="row.type == 0"></i>
            <i class="el-icon-close client-qf" v-else-if="row.type == 1"></i>
          </template>

        </avue-crud>


        <el-drawer
          title="电子地图"
          append-to-body="true"
          :visible.sync="showMap"
        >
          <iframe
            id="mapDiv"
            ref="mapDiv"
            src="/map/index.html?openid=ClientManagement&ISinit=1"
            frameborder="0"
            width="100%"
            height="100%"
          ></iframe>
        </el-drawer>

      </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-dialog title="缴费提醒" :visible.sync="dialogTableVisible" top="280px" custom-class="payWin" append-to-body="true">


      <el-dialog
        class="real-jf-dialog"
        title="缴费"
        :visible.sync="realjf"
        append-to-body="true"
        :modal="false"
      >
        <el-form
          :model="form"
          label-position="right"
          size="mini"
          label-width="100px"
        >
          <el-col span="12">
            <el-form-item label="到期时间">
              <el-date-picker
                v-model="form.expireTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :offset="4">
            <el-form-item>
              <el-button type="primary" @click.stop="generate(form)"
              >缴费
              </el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-dialog>


      <el-table
        :data="gridData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="xb"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="deviceNumber"
          label="设备编码"
          width="150">
        </el-table-column>
        <el-table-column
          prop="ownership"
          label="所属单位"
          width="160">
        </el-table-column>
        <el-table-column
          prop="expireTime"
          label="到期时间"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="pay"
          label="缴费信息"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">一键缴费</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-row>
</template>

<script>
  import {getList, remove, update, add, getclient, getDeptLazyTree,getAll} from "@/api/client/client";
  import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates} from "@/api/client/client";
  import {mapGetters} from "vuex";
  import axios from "axios";

  export default {
    created() {
      this.payWin();
      //this.payWin();
    },
    data() {
      return {
        form: {},
        query: {},
        showMap: false,
        initFlag: true,
        loading: true,
        page: {
          pageSize: 10,
@@ -86,7 +202,8 @@
          total: 0
        },
        dialogTableVisible: false,
        gridData:null,
        realjf: false,
        gridData: null,
        selectionList: [],
        treeDeptId: '',
        treeData: [],
@@ -120,7 +237,8 @@
          calcHeight: 80,
          labelWidth: '100',
          dialogWidth: 950,
          menuWidth: 160,
          menuWidth: 250,
          size: "mini",
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
@@ -133,22 +251,149 @@
          column: [
            {
              label: "设备名称",
              width: 130,
              width: 200,
              prop: "deviceName",
              searchPlaceholder: "请输入设备名称/编号",
              searchPlaceholder: "设备名称/编号",
              search: true,
            },
            {
              label: "上级菜单",
              prop: "pid",
              type: "tree",
              dicUrl: "/api/blade-jfpts/catalogs/catalogs/tree",
              hide: true,
              props: {
                label: "title"
              },
              rules: [
                {
                  required: false,
                  message: "请选择上级菜单",
                  trigger: "click"
                }
              ]
            },
            {
              label: "到期时间",
              prop: "releaseTimeRange",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              searchRange: true,
              searchSpan: 6,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入时间",
                  trigger: "blur"
                }
              ]
            }
            ,
            {
              label: "设备编号",
              prop: "deviceNumber",
              width: 130
              width: 130,
              editDisabled: true,
              rules: [
                {
                  required: false,
                  message: "请输入设备编号",
                  trigger: "click"
                }
              ]
            },
            {
              label: "序列号",
              prop: "serialNumber",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "通道号",
              prop: "channelNumber",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "缴费状态",
              prop: "jfzt",
              slot: true,
              align: "center",
              addDisplay: false,
              editDisplay: false,
            }, {
              label: "布撤防状态",
              align: "center",
              prop: "devicestate",
              type: "select",
              slot: true,
              width: 100,
              rules: [{
                required: true,
                message: "请选择布撤防状态",
                trigger: "blur"
              }],
              dicData: [
                {
                  label: "撤防",
                  value: "0"
                },
                {
                  label: "布防",
                  value: "1"
                }
              ]
            },
            {
              label: "设备状态",
              align: "center",
              prop: "dxzt",
              slot: true,
              addDisplay: false,
              editDisplay: false,
            },
            {
              label: "故障状态",
              prop: "state",
              addDisplay: false,
              editDisplay: false
            },
            {
              label: "故障原因",
              prop: "reason",
              addDisplay: false,
              editDisplay: false
            },
            {
              label: "设备类型",
              prop: "deviceType",
              width: 100,
              search: true,
              searchSpan: 3,
              searchLabelWidth: 80,
              searchPlaceholder: "请选择",
              type: "select",
              props: {
                label: "dictValue",
                value: "dictValue"
              },
              dicUrl: "/api/blade-system/dict-biz/child-list?parentId=1357568691367661569",
            },
            {
              label: "省份",
              prop: "province",
              search: true,
              searchSpan: 3,
              searchLabelWidth: 60,
              searchLabelWidth: 45,
              placeholder: "省份",
              type: "select",
              props: {
@@ -195,64 +440,38 @@
              span: 3,
              labelWidth: "0",
              className: "cityClass3"
            }, {
              label: "布撤防状态",
              prop: "devicestate",
              type: "select",
              slot: true,
              width: 100,
              dicData: [
                {
                  label: "撤防",
                  value: "0"
                },
                {
                  label: "布防",
                  value: "1"
                }
              ]
            }, {
              label: "设备状态",
              prop: "dtype",
              search: true,
              slot: true,
              type: "select",
              dicData: [
                {
                  label: "掉线",
                  value: "0"
                },
                {
                  label: "在线",
                  value: "1"
                }
              ]
            }, {
              label: "设备类型",
              prop: "deviceType",
              width: 150,
              search: true,
            }, {
            },
            {
              label: "权属",
              prop: "ownership",
              width: 150
            }, {
              label: "街道",
              prop: "street",
              width: 150
              width: 200
            }, {
              label: "到期时间",
              prop: "expireTime",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              width: 130
            }, {
              label: "缴费信息",
              prop: "pay",
            }, {
              label: "安装时间",
              prop: "stime",
              width: 130
            }, {
              label: "到期时间",
              prop: "expireTime",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              width: 130
            }, {
              label: "最后上传时间",
              prop: "heartbeat",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              width: 130
            },

@@ -266,7 +485,7 @@
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.clientManagement_add, false),
          viewBtn: this.vaildData(this.permission.clientManagement_view, false),
          viewBtn: this.vaildData(null, false),
          delBtn: this.vaildData(this.permission.clientManagement_delete, false),
          editBtn: this.vaildData(this.permission.clientManagement_edit, false)
        };
@@ -280,6 +499,25 @@
      }
    },
    methods: {
      generate(row) {
        updates(row.expireTime, row.deviceNumber).then(() => {
          this.dialogTableVisible = false;
          this.realjf = false;
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "缴费成功!"
          });
        }, error => {
          window.console.log(error);
        });
      },
      handleClick(row) {
        this.form = row;
        this.dialogTableVisible = true;
        this.realjf = true;

      },
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
@@ -329,6 +567,7 @@
          });
      },
      searchReset() {
        this.treeDeptId = null;
        this.query = {};
        this.onLoad(this.page);
      },
@@ -392,12 +631,12 @@
        if (releaseTimeRange) {
          values = {
            ...params,
            releaseTime_datege: releaseTimeRange[0],
            releaseTime_datelt: releaseTimeRange[1],
            beginTime: releaseTimeRange[0],
            endTime: releaseTimeRange[1],
            ...this.query
          };
          values.releaseTimeRange = null;
        }else{
        } else {
          values = {
            ...params,
            ...this.query
@@ -407,30 +646,52 @@
        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(){
      handleManage(row) {
        this.form;
        this.dialogTableVisible = true;
      },
      payWin() {
        var that = this;
        getAll().then(res => {
          var data =res.data.data;
          var data = res.data.data;
          var lists = [];
          var xb = 0;
          for (var i = 0; i < data.length; i++) {
@@ -440,25 +701,80 @@
              lists.push(data[i]);
            }
          }
          if (lists.length > 0){
          if (lists.length > 0) {
            that.gridData = lists;
            that.dialogTableVisible = true;
          }
        });

      }
      }, handleStart(row) {
        var arr = [];
        this.$store.state.tags.tagList.forEach(item => {
          if (item.label != "视频") {
            arr.push(item);
          }
        });
        this.$store.state.tags.tagList = arr;
        this.$router.push({
          path: `/real/video/`, query: row
        });
      }, handleMap(row) {
        this.showMap = true;
        this.$nextTick(() => {
          this.$refs.mapDiv.onload = () => {
            window.frames[0].init("equipment", {x: row.jd, y: row.wd});
          };
        })
      },
    }
  };
</script>

<style>
  .payWin{
  .payWin {
    overflow-y: auto;
    height: 350px;
  }

  .payWin .el-dialog__body{
  .payWin .el-dialog__body {
    padding-top: 0px !important;
  }

  .real-jf-dialog {
    position: absolute !important;
    top: 0 !important;
    left: auto !important;
    right: 0px !important;
    bottom: 0 !important;
    margin: auto !important;
    height: 100% !important;
    width: 800px !important;
  }

  .real-jf-dialog .el-dialog {
    position: absolute !important;
    top: 140px !important;
    left: 245px !important;
    right: 0px !important;
    bottom: 0 !important;
    margin: auto !important;
    margin-top: 15vh !important;
    height: 170px;
  }

  .real-jf-dialog .el-dialog .el-dialog__body {
    height: calc(100% - 54px);
    box-sizing: border-box;
  }

  .client-jf {
    font-size: 25px;
    color: green;
  }

  .client-qf {
    font-size: 25px;
    color: red;
  }

</style>