样式

liuyg

2021-07-16 f5641fd76ef90a66599e8ce121f3acfd97d779e8

样式

 src/styles/element-ui.scss

@@ -357,8 +357,53 @@
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: $inputB1 !important;
}
.el-picker-panel__icon-btn {
  color: $fontColor !important;
}

//首页的body不加颜色
#avue-view .el-card__body {
  background-color: transparent !important;
}
//top导航颜色
.avue-header {
  background-color: $mainB !important;
}

//表格斑马线
// .theme-deep-bule .el-card .el-table td {
//   background-color: $mainB !important;
// }
// .theme-deep-bule .el-card .el-table td,
// .theme-deep-bule .el-card .el-table th.is-leaf {
//   border-color: $mainB !important;
// }
// .theme-deep-bule .el-card .el-table td {
//   background-color: $mainB !important;
// }
// .el-table__row:hover {
//   background-color: $mainBhover !important;
// }

//表格右侧白色
.el-table__fixed-right-patch {
  background-color: $mainB !important;
}
.el-table--border th,
.el-table__fixed-right-patch {
  border-bottom: $mainB !important;
}
//子表单
.el-collapse-item__header {
  background-color: $mainB !important;
  color: $fontColor !important;
}
.avue-group__icon,
.avue-group__title {
  color: $fontColor !important;
}

//main背景
.avue-main {
  background-color: $mainBx2 !important;
}

 src/styles/ourBackgroundColor.scss

@@ -9,6 +9,7 @@
$mainB2: #0048e5;
$mainB: #004ca7;
$mainBx1: #013e8a;
$mainBx2: #03277c;

$mainBhover: #1d5ce4;


 src/styles/theme/bule.scss

@@ -1,5 +1,4 @@
.theme-bule {

  .avue-header,
  .avue-logo {
    background: #004ca7;
@@ -37,16 +36,13 @@
  }

  .avue-top {

    .el-menu-item {

      i,
      span {
        color: #fff;
      }

      &:hover {

        i,
        span {
          color: #fff;
@@ -56,30 +52,28 @@
  }
}



.theme-deep-bule {
  background: #19305C;
  background: #19305c;

  .avue-tags .el-tabs--card>.el-tabs__header .el-tabs__item {
  .avue-tags .el-tabs--card > .el-tabs__header .el-tabs__item {
    color: #fff;
  }

  .avue-tags .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    color: #409EFF;
  .avue-tags .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    color: #409eff;
  }

  .avue-contail {
    background: #19305C;
    background: #19305c;
  }

  .avue-header,
  .avue-logo {
    background: #19305C;
    background: #19305c;
  }

  .avue-sidebar {
    background: #19305C;
    background: #19305c;

    .el-menu-item.is-active,
    .el-submenu__title.is-active {
@@ -110,16 +104,13 @@
  }

  .avue-top {

    .el-menu-item {

      i,
      span {
        color: #fff;
      }

      &:hover {

        i,
        span {
          color: #fff;
@@ -129,18 +120,17 @@
  }

  .el-select-dropdown {
    background: #0146F0;
    background: #0146f0;
    color: #8ab6ff;
    border: 1px solid #0140D8;
    border: 1px solid #0140d8;
  }


  .el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: #0146F0;
  .el-popper[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #0146f0;
  }

  .el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: #0146F0;
  .el-popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: #0146f0;
  }

  .el-select-dropdown__item {
@@ -149,14 +139,14 @@

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #155CF7;
    background-color: #155cf7;
  }

  .el-button:focus,
  .el-button:hover {
    color: #F0F0F0;
    border-color: #83C1FF;
    background-color: #83C1FF;
    color: #f0f0f0;
    border-color: #83c1ff;
    background-color: #83c1ff;
  }

  .avue-crud__right {
@@ -164,20 +154,19 @@
  }

  .el-button--default {
    background-color: #409EFF;
    border-color: #409EFF;
    color: #FFF9FF;
    background-color: #409eff;
    border-color: #409eff;
    color: #fff9ff;
  }

  .el-card {
    height: 100%;
    background: #19305C;
    background: #19305c;
    color: #fff;

    .el-table,
    .el-table__expanded-cell {
      background-color: #19305C;

      background-color: #19305c;
    }

    .el-table--border::after,
@@ -191,23 +180,22 @@
      background-color: #1a325f;
    }


    .el-loading-mask {
      background-color: #1a325fe1;
    }

    .el-table th {
      background-color: #155CF7;
      background-color: #155cf7;
      color: #fff;
    }

    //表格 行颜色
    .el-table td {
      background: #0142D6;
      background: #004ca7;
      color: #fff;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: #044BE3;
      background: #044be3;
    }

    .el-button--text {
@@ -215,8 +203,7 @@
    }

    .el-collapse-item__wrap {
      background-color: #19305C;

      background-color: #19305c;
    }

    .el-collapse {
@@ -225,11 +212,10 @@
    }

    .avue-crud__menu {
      background-color: #19305C;
      background-color: #19305c;
    }

    .el-form-item__label {

      color: #fff;
    }

@@ -252,7 +238,7 @@

    .el-table--border td,
    .el-table--border th,
    .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
      border-color: #53a7fa;
    }

@@ -262,12 +248,12 @@
    }

    .el-input__inner {
      background: #0146F0;
      background: #0146f0;
      color: #8ab6ff;
    }

    .el-tooltip input {
      background: #0146F0;
      background: #0146f0;
      color: #8ab6ff;
    }

@@ -277,48 +263,46 @@

    .el-date-editor,
    .el-input input {
      border-color: #0140D8;
      border-color: #0140d8;
    }

    .avue-group .el-collapse,
    .avue-group .el-collapse-item__wrap {
      border-color: #19305C;
      border-color: #19305c;
    }

    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
      margin: 0 5px;
      background-color: #409EFF;
      background-color: #409eff;
      color: #fff;
      min-width: 30px;
      border-radius: 2px;
    }

    .el-tag {
      background-color: #409EFF;
      background-color: #409eff;
      color: #fff;
      border-color: #53a7fa;
    }

  }

  #avue-view {
    &>.el-row {

      &>.el-col:first-child {
    & > .el-row {
      & > .el-col:first-child {
        padding-right: 2px;
      }

      &>.el-col:last-child {
      & > .el-col:last-child {
        padding-left: 2px;
      }

      &>.el-col {
      & > .el-col {
        height: 100%;
        margin-bottom: 0px;

        &>.basic-container {
        & > .basic-container {
          padding: 0;
          height: 100%;
        }

 src/views/animalHeat/animalHeat.vue

@@ -1,475 +1,541 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               :search.sync="search"
               :row-style="rowStyle"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @row-click="rowClick"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
        <template slot="menuLeft">
          <el-button
            v-bind:class="activeClass == 0 ? 'btn-color' : ''"
            size="small "
            @click="getAnimalData(0)"
            >本日
          </el-button>
          <el-button
            v-bind:class="activeClass == 1 ? 'btn-color' : ''"
            size="small "
            @click="getAnimalData(1)"
            >本周
          </el-button>
          <el-button
            v-bind:class="activeClass == 2 ? 'btn-color' : ''"
            size="small "
            @click="getAnimalData(2)"
            >本月
          </el-button>
        </template>
        <template slot="menuLeft">
          <el-button type="warning"
                      size="small"
                      plain
                      icon="el-icon-download"
                      @click="handleExport">导出
          </el-button>
          <el-button type="warning"
                      size="small"
                      plain
                      icon="el-icon-pie-chart"
                      @click="handleExportStatis">导出报表
          </el-button>
        </template>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      :search.sync="search"
      :row-style="rowStyle"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @row-click="rowClick"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          v-bind:class="activeClass == 0 ? 'btn-color' : ''"
          size="small "
          @click="getAnimalData(0)"
          >本日
        </el-button>
        <el-button
          v-bind:class="activeClass == 1 ? 'btn-color' : ''"
          size="small "
          @click="getAnimalData(1)"
          >本周
        </el-button>
        <el-button
          v-bind:class="activeClass == 2 ? 'btn-color' : ''"
          size="small "
          @click="getAnimalData(2)"
          >本月
        </el-button>
      </template>
      <template slot="menuLeft">
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
          >导出
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-pie-chart"
          @click="handleExportStatis"
          >导出报表
        </el-button>
      </template>
    </avue-crud>

    <template>
      <div>
          <el-image-viewer
              class="img"
              v-if="showViewer"
              :on-close="closeViewer"
              :url-list="[imgUrl]" />
        <el-image-viewer
          class="img"
          v-if="showViewer"
          :on-close="closeViewer"
          :url-list="[imgUrl]"
        />
      </div>
    </template>
  </basic-container>
</template>

<script>
  import {getList} from "@/api/animalHeat/animalHeat";
  import {mapGetters} from "vuex";
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { getList } from "@/api/animalHeat/animalHeat";
import { mapGetters } from "vuex";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

  export default {
    name:'index',
    components: { ElImageViewer },
    data() {
      return {
        form: {},
        query: {},
        search:{},
        showViewer:false,
        activeClass: 0,
        imgUrl:'',
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          menu:false,
          height:'auto',
          calcHeight: 54,
          border: false,
          stripe:true,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          index: true,
          viewBtn: true,
          selection: true,
          labelWidth:120,
          dialogClickModal: false,
          headerAlign: 'center',
          align: 'center',
          column: [
            {
              label: '坐标',
              prop: 'test',
              hide: true,
              span: 24,
              component: "avueMap",
              clickChild: (obj) => {
                this.form.jd = obj.latitude
                this.form.wd = obj.longitude
export default {
  name: "index",
  components: { ElImageViewer },
  data() {
    return {
      form: {},
      query: {},
      search: {},
      showViewer: false,
      activeClass: 0,
      imgUrl: "",
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        menu: false,
        height: "auto",
        calcHeight: 54,
        border: false,
        //stripe:true,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        index: true,
        viewBtn: true,
        selection: true,
        labelWidth: 120,
        dialogClickModal: false,
        headerAlign: "center",
        align: "center",
        column: [
          {
            label: "坐标",
            prop: "test",
            hide: true,
            span: 24,
            component: "avueMap",
            clickChild: (obj) => {
              this.form.jd = obj.latitude;
              this.form.wd = obj.longitude;
            },
          },
          {
            label: "检测时间",
            prop: "createTime",
          },
          {
            label: "体温",
            prop: "tempRed",
          },
          // {
          //   label: '图片',
          //   prop: 'picture',
          //   type: 'img',
          //   alone:false,
          //   width: 300,
          //   //listType: 'picture-img',
          //   span: 24
          // },
          {
            label: "检测时间",
            prop: "dateTime",
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            searchRange: true,
            searchValue: [this.getStartTime(), this.getEndTime()],
            searchSpan: 5,
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入时间",
                trigger: "blur",
              },
            },
            {
              label: "检测时间",
              prop: "createTime"
            },
            {
              label: "体温",
              prop: "tempRed"
            },
            // {
            //   label: '图片',
            //   prop: 'picture',
            //   type: 'img',
            //   alone:false,
            //   width: 300,
            //   //listType: 'picture-img',
            //   span: 24
            // },
            {
              label: "检测时间",
              prop: "dateTime",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              searchRange: true,
              searchValue:[this.getStartTime(),this.getEndTime()],
              searchSpan: 5,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入时间",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "体温状态",
              search: true,
              searchLabelWidth: 120,
              searchValue: this.getAnimalType(),
              prop: "status",
              searchSpan: 5,
              width:110,
              type: "select",
              dicData: [
                {
                  label: "正常",
                  value: 0
                },
                {
                  label: "异常",
                  value: 1
                }
              ],
            }

          ]
        },
        data: []
            ],
          },
          {
            label: "体温状态",
            search: true,
            searchLabelWidth: 120,
            searchValue: this.getAnimalType(),
            prop: "status",
            searchSpan: 5,
            width: 110,
            type: "select",
            dicData: [
              {
                label: "正常",
                value: 0,
              },
              {
                label: "异常",
                value: 1,
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(null, false),
        viewBtn: this.vaildData(null, false),
        delBtn: this.vaildData(null, false),
        editBtn: this.vaildData(null, false),
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(null, false),
          viewBtn: this.vaildData(null, false),
          delBtn: this.vaildData(null, false),
          editBtn: this.vaildData(null, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },

  methods: {
    beforeOpen(done, type) {},
    //清空按钮
    searchReset() {
      //清空搜索框中的内容
      this.query = {};
      //清空this.$route.query
      this.$router.push({ query: {} });
      //清空后默认查当日的数据
      this.activeClass = 0;
      this.onLoad(this.page);
    },
    //搜索按钮
    searchChange(params, done) {
      //清空this.$route.query
      this.$router.push({ query: {} });
      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);
    },
    getStartTime() {
      if (
        this.$route.query.startTime != undefined &&
        this.$route.query.startTime != null &&
        this.$route.query.startTime != ""
      ) {
        return this.$route.query.startTime;
      }
      // 当前时间
      var date = new Date();
      //年
      var Y = date.getFullYear();
      //月
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "-" + M + "-" + D;
    },
    getEndTime() {
      if (
        this.$route.query.endTime != undefined &&
        this.$route.query.endTime != null &&
        this.$route.query.endTime != ""
      ) {
        return this.$route.query.endTime;
      }
      // 当前时间
      var date = new Date();
      //年
      var Y = date.getFullYear();
      //月
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "-" + M + "-" + D;
    },

    methods: {
      beforeOpen(done, type) {
      },
      //清空按钮
      searchReset() {
        //清空搜索框中的内容
        this.query = {};
        //清空this.$route.query
        this.$router.push({ query: {} });
        //清空后默认查当日的数据
        this.activeClass=0;
        this.onLoad(this.page);
      },
      //搜索按钮
      searchChange(params, done) {
        //清空this.$route.query
        this.$router.push({ query: {} });
        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);
      },
      getStartTime(){
           if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
             return this.$route.query.startTime
           }
           // 当前时间
          var date = new Date();
          //年
          var Y = date.getFullYear();
          //月
          var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
          //日
          var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
           return Y + "-" + M + "-" + D;
      },
      getEndTime(){
           if (this.$route.query.endTime != undefined && this.$route.query.endTime != null && this.$route.query.endTime != "" ) {
             return this.$route.query.endTime
           }
            // 当前时间
            var date = new Date();
            //年
            var Y = date.getFullYear();
            //月
            var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            //日
            var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return Y + "-" + M + "-" + D;
      },

      //本日，本周，本月  按钮
      getAnimalData(e) {
        this.activeClass=e;
        this.query={};
        this.$router.push({ query: {} });
        //type 0:本日  1：本周  2：本月   status: 0:正常   1：异常
        var today = new Date();
        var params ={};
        if(e==0){
          //修改搜索框中的值
          this.search.releaseTimeRange=[this.showToDay(today)+" 00:00:00",this.showToDay(today)+" 23:59:59"]
        }
        if(e==1){
          //修改搜索框中的值
          this.search.releaseTimeRange=[this.showWeekFirstDay(today)+" 00:00:00",this.showToDay(today)+" 23:59:59"]
        }
        if(e==2){
          //修改搜索框中的值
          this.search.releaseTimeRange=[this.showMonthFirstDay(today)+" 00:00:00",this.showToDay(today)+" 23:59:59"]
        }
        params = {
          type: e
        };
        if(this.search.status){
          params = {
            ... params,
            status: this.search.status
          };
        }
        this.query=params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      },
      //本日
      showToDay(Nowdate){
        var M=Number(Nowdate.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        var day = Nowdate.getDate();
        if(day<10){
          day = "0"+day;
        }
        return Nowdate.getFullYear()+"-"+M+"-"+day;
      },

      //本周第一天
      showWeekFirstDay(Nowdate){
        var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
        var M=Number(WeekFirstDay.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        var day = WeekFirstDay.getDate();
        if(day<10){
          day = "0"+day;
        }
        return WeekFirstDay.getFullYear()+"-"+M+"-"+day;
      },

      //本月第一天
      showMonthFirstDay(Nowdate){
        var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
        var M=Number(MonthFirstDay.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+MonthFirstDay.getDate();
      },

      //数据导出
      handleExport() {
        this.$confirm("是否导出体温数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let begTime = this.$route.query.startTime==undefined? '':this.$route.query.startTime;
          let endTime = this.$route.query.endTime==undefined? '':this.$route.query.endTime;
          let status = this.$route.query.status==undefined? '':this.$route.query.status;
          let timeDesc = this.$route.query.timeDesc==undefined? '':this.$route.query.timeDesc;
          window.open(`/api/animalHeat/animalHeat/export-animalHeat?begTime=${begTime}&endTime=${endTime}&status=${status}&timeDesc=${timeDesc}`);
        });
      },
      //数据报表导出
      handleExportStatis() {
          let begTime = this.$route.query.startTime==undefined? '':this.$route.query.startTime;
          let endTime = this.$route.query.endTime==undefined? '':this.$route.query.endTime;
          let status = this.$route.query.status==undefined? '':this.$route.query.status;
          let timeDesc = this.$route.query.timeDesc==undefined? '':this.$route.query.timeDesc;
          //window.open(`/api/animalHeat/animalHeat/getAnimalHeatStatis?begTime=${begTime}&endTime=${endTime}&status=${status}&timeDesc=${timeDesc}`);
          window.open(`https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-animalHeat.statis.ureport.xml&begTime=${begTime}&endTime=${endTime}&status=${status}&timeDesc=${timeDesc}`);
      },
      //修改行颜色
      rowStyle({row, column, rowIndex}){
         if(row.status=="1"){
           return {
             color:"#fe1515"
           }
         }
      },
      //图片行点击事件
      rowClick(row){
        var that = this;
        that.imgUrl = row.picture;
        this.showViewer = true
      },
      // 关闭查看器
      closeViewer() {
        this.showViewer = false
      },

      //体温状态回填
      getAnimalType(){
          if (this.$route.query.status != undefined) {
              return this.$route.query.status
          }
      },
      onLoad(page, params={}) {
        const { dateTime } = this.query;
        let values = {
          ...params,
        };
        if (this.$route.query.type!=undefined && this.$route.query != undefined && this.$route.query != null && this.$route.query != "" ) {
            if (this.$route.query.status != undefined) {
              this.page.currentPage = 1;
              params = {
                status:this.$route.query.status,
                type:this.$route.query.type
              }
            } else {
              this.page.currentPage = 1;
              params = {
                type:this.$route.query.type
              };
            }
            this.activeClass=4;
        }else if(this.$route.query.status != undefined){
            params = {
              status: this.$route.query.status,
              begTime: this.$route.query.startTime,
              endTime: this.$route.query.endTime
            }
            this.activeClass=4;
        }

        //初始进入默认展示当天数据
        if(this.activeClass==0 && this.query.dateTime==null){
            params = {
                type:this.activeClass
            }
        }

        if (dateTime) {
          this.activeClass=4;
          values = {
            ...params,
            begTime: dateTime[0],
            endTime: dateTime[1],
            ...this.query,
          };
          values.dateTime = null;
        } else {
          values = {
            ...params,
            ...this.query,
          };
        }

        if (this.$route.query.timeDesc) {
          values = {
            ...params,
            timeDesc: this.$route.query.timeDesc,
            ...this.query,
          };
        }

        this.loading = true;
        getList(page.currentPage, page.pageSize, values).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
    //本日，本周，本月  按钮
    getAnimalData(e) {
      this.activeClass = e;
      this.query = {};
      this.$router.push({ query: {} });
      //type 0:本日  1：本周  2：本月   status: 0:正常   1：异常
      var today = new Date();
      var params = {};
      if (e == 0) {
        //修改搜索框中的值
        this.search.releaseTimeRange = [
          this.showToDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
    }
  };
      if (e == 1) {
        //修改搜索框中的值
        this.search.releaseTimeRange = [
          this.showWeekFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      if (e == 2) {
        //修改搜索框中的值
        this.search.releaseTimeRange = [
          this.showMonthFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      params = {
        type: e,
      };
      if (this.search.status) {
        params = {
          ...params,
          status: this.search.status,
        };
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    //本日
    showToDay(Nowdate) {
      var M = Number(Nowdate.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = Nowdate.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return Nowdate.getFullYear() + "-" + M + "-" + day;
    },

    //本周第一天
    showWeekFirstDay(Nowdate) {
      var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);
      var M = Number(WeekFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = WeekFirstDay.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return WeekFirstDay.getFullYear() + "-" + M + "-" + day;
    },

    //本月第一天
    showMonthFirstDay(Nowdate) {
      var MonthFirstDay = new Date(
        Nowdate.getFullYear(),
        Nowdate.getMonth(),
        1
      );
      var M = Number(MonthFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      return (
        MonthFirstDay.getFullYear() +
        "-" +
        M +
        "-" +
        "0" +
        MonthFirstDay.getDate()
      );
    },

    //数据导出
    handleExport() {
      this.$confirm("是否导出体温数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let begTime =
          this.$route.query.startTime == undefined
            ? ""
            : this.$route.query.startTime;
        let endTime =
          this.$route.query.endTime == undefined
            ? ""
            : this.$route.query.endTime;
        let status =
          this.$route.query.status == undefined ? "" : this.$route.query.status;
        let timeDesc =
          this.$route.query.timeDesc == undefined
            ? ""
            : this.$route.query.timeDesc;
        window.open(
          `/api/animalHeat/animalHeat/export-animalHeat?begTime=${begTime}&endTime=${endTime}&status=${status}&timeDesc=${timeDesc}`
        );
      });
    },
    //数据报表导出
    handleExportStatis() {
      let begTime =
        this.$route.query.startTime == undefined
          ? ""
          : this.$route.query.startTime;
      let endTime =
        this.$route.query.endTime == undefined ? "" : this.$route.query.endTime;
      let status =
        this.$route.query.status == undefined ? "" : this.$route.query.status;
      let timeDesc =
        this.$route.query.timeDesc == undefined
          ? ""
          : this.$route.query.timeDesc;
      //window.open(`/api/animalHeat/animalHeat/getAnimalHeatStatis?begTime=${begTime}&endTime=${endTime}&status=${status}&timeDesc=${timeDesc}`);
      window.open(
        `https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-animalHeat.statis.ureport.xml&begTime=${begTime}&endTime=${endTime}&status=${status}&timeDesc=${timeDesc}`
      );
    },
    //修改行颜色
    rowStyle({ row, column, rowIndex }) {
      if (row.status == "1") {
        return {
          color: "#fe1515",
        };
      }
    },
    //图片行点击事件
    rowClick(row) {
      var that = this;
      that.imgUrl = row.picture;
      this.showViewer = true;
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false;
    },

    //体温状态回填
    getAnimalType() {
      if (this.$route.query.status != undefined) {
        return this.$route.query.status;
      }
    },
    onLoad(page, params = {}) {
      const { dateTime } = this.query;
      let values = {
        ...params,
      };
      if (
        this.$route.query.type != undefined &&
        this.$route.query != undefined &&
        this.$route.query != null &&
        this.$route.query != ""
      ) {
        if (this.$route.query.status != undefined) {
          this.page.currentPage = 1;
          params = {
            status: this.$route.query.status,
            type: this.$route.query.type,
          };
        } else {
          this.page.currentPage = 1;
          params = {
            type: this.$route.query.type,
          };
        }
        this.activeClass = 4;
      } else if (this.$route.query.status != undefined) {
        params = {
          status: this.$route.query.status,
          begTime: this.$route.query.startTime,
          endTime: this.$route.query.endTime,
        };
        this.activeClass = 4;
      }

      //初始进入默认展示当天数据
      if (this.activeClass == 0 && this.query.dateTime == null) {
        params = {
          type: this.activeClass,
        };
      }

      if (dateTime) {
        this.activeClass = 4;
        values = {
          ...params,
          begTime: dateTime[0],
          endTime: dateTime[1],
          ...this.query,
        };
        values.dateTime = null;
      } else {
        values = {
          ...params,
          ...this.query,
        };
      }

      if (this.$route.query.timeDesc) {
        values = {
          ...params,
          timeDesc: this.$route.query.timeDesc,
          ...this.query,
        };
      }

      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>
<style lang="scss">
  .el-button.btn-color {
    color: rgb(255, 255, 255);
    background-color: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
  }
.el-button.btn-color {
  color: rgb(255, 255, 255);
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}

  .img {
      .el-icon-circle-close {
        color: white;
      }
.img {
  .el-icon-circle-close {
    color: white;
  }
}
</style>

 src/views/article/article.vue

@@ -1,30 +1,34 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               ref="crud"
               @row-del="rowDel"
               v-model="form"
               :permission="permissionList"
               @row-update="rowUpdate"
               @row-save="rowSave"
               :before-open="beforeOpen"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      @row-del="rowDel"
      v-model="form"
      :permission="permissionList"
      @row-update="rowUpdate"
      @row-save="rowSave"
      :before-open="beforeOpen"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.article_delete"
                   @click="handleDelete">删 除
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.article_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
@@ -32,291 +36,305 @@
</template>

<script>
  import {getList, remove, update, add, getNotice} from "@/api/article/article";
  import {mapGetters} from "vuex";
import { getList, remove, update, add, getNotice } from "@/api/article/article";
import { mapGetters } from "vuex";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        datetime:"",
        selectionList: [],
        option: {
          height: 'auto',
          calcHeight: 54,
          dialogWidth: 950,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: false,
          stripe:true,
          index: true,
          viewBtn: true,
          selection: true,
          excelBtn: true,
          dialogClickModal: false,
          column: [
            {
              label: "资讯标题",
              prop: "title",
              span: 24,
              row: true,
              searchSpan:5,
              search: true,
              rules: [{
export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      datetime: "",
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 54,
        dialogWidth: 950,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        //stripe:true,
        index: true,
        viewBtn: true,
        selection: true,
        excelBtn: true,
        dialogClickModal: false,
        column: [
          {
            label: "资讯标题",
            prop: "title",
            span: 24,
            row: true,
            searchSpan: 5,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入资讯标题",
                trigger: "blur"
              }]
            },
            {
                trigger: "blur",
              },
            ],
          },
          {
            label: "资讯封面",
            prop: "url",
            // align:'center',
            width:80,
            type: 'upload',
            listType: 'picture-img',
            action: '/api/blade-resource/oss/endpoint/put-file',
            width: 80,
            type: "upload",
            listType: "picture-img",
            action: "/api/blade-resource/oss/endpoint/put-file",
            propsHttp: {
              res: 'data',
              url: 'link',
              res: "data",
              url: "link",
            },
            // hide: true,
            span: 24,
          },
            {
              label: "资讯来源",
              prop: "sourceName",
              search: true,
              searchSpan:4,
              span: 24,
              rules: [{
          {
            label: "资讯来源",
            prop: "sourceName",
            search: true,
            searchSpan: 4,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入资讯类型",
                trigger: "blur"
              }]
            },
            {
              label: "资讯类型",
              prop: "articleType",
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
              searchSpan: 3,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=articleType",
              props: {
                label: "dictValue",
                value: "dictKey"
                trigger: "blur",
              },
              search:true,
              type:"select",
              rules: [{
            ],
          },
          {
            label: "资讯类型",
            prop: "articleType",
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
            searchSpan: 3,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=articleType",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            search: true,
            type: "select",
            rules: [
              {
                required: true,
                message: "请选择资讯类型",
                trigger: "blur"
              }],
            },
            {
              label: "发布时间",
              prop: "dateTime",
              type: "datetime",
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              searchRange:true,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "发布时间",
            prop: "dateTime",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            searchRange: true,
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            search: true,
            rules: [
              {
                required: true,
                message: "请选择发布时间",
                trigger: "blur"
              }]
            },
            {
              label: "发布时间",
              prop: "createTime",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              type: "date",
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss"
            },
            {
              label: "资讯内容",
              prop: "content",
              component: 'AvueUeditor',
              options: {
                action: '/api/blade-resource/oss/endpoint/put-file',
                // customConfig: {
                //   lineHeights: ['1', '1.15', '1.6', '2', '2.5', '3']
                // },//wangEditor编辑的配置
                props: {
                  res: "data",
                  url: "link",
                }
                trigger: "blur",
              },
              hide: true,
              minRows: 6,
              span: 24,
            }
          ]
        },
        data: []
            ],
          },
          {
            label: "发布时间",
            prop: "createTime",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            type: "date",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label: "资讯内容",
            prop: "content",
            component: "AvueUeditor",
            options: {
              action: "/api/blade-resource/oss/endpoint/put-file",
              // customConfig: {
              //   lineHeights: ['1', '1.15', '1.6', '2', '2.5', '3']
              // },//wangEditor编辑的配置
              props: {
                res: "data",
                url: "link",
              },
            },
            hide: true,
            minRows: 6,
            span: 24,
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.article_add, true),
        viewBtn: this.vaildData(this.permission.article_view, true),
        delBtn: this.vaildData(this.permission.article_delete, true),
        editBtn: this.vaildData(this.permission.article_edit, true),
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.article_add, true),
          viewBtn: this.vaildData(this.permission.article_view, true),
          delBtn: this.vaildData(this.permission.article_delete, true),
          editBtn: this.vaildData(this.permission.article_edit, true)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    methods: {
      rowSave(row, done, loading) {
        add(row).then(() => {
  },
  methods: {
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (error) => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
    },
    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();
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
      },
      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();
      },
      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)) {
          getNotice(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        const {dateTime} = this.query;
        let values = {
          ...params,
        };
        if (dateTime) {
          values = {
            ...params,
            startTime: dateTime[0],
            endTime: dateTime[1],
            ...this.query
          };
          values.datetime = null;
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, values).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getNotice(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
    }
  };
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      const { dateTime } = this.query;
      let values = {
        ...params,
      };
      if (dateTime) {
        values = {
          ...params,
          startTime: dateTime[0],
          endTime: dateTime[1],
          ...this.query,
        };
        values.datetime = null;
      }
      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style>

 src/views/attendance/attendance.vue

@@ -1,500 +1,553 @@
<template>
  <el-row>
  <el-col :span="3" style="display:none">
    <div class="box">
      <el-scrollbar>
        <basic-container>
          <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
        </basic-container>
      </el-scrollbar>
    </div>
  </el-col>
  <el-col>
  <basic-container>
    <avue-crud :option="option"
               :search.sync="search"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               :row-style="rowStyle"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.attendance_delete"
                   @click="handleDelete">删 除
        </el-button>
        <el-button type="warning"
                   size="small"
                   plain
                   icon="el-icon-download"
                   @click="handleExport">导出
        </el-button>
      </template>
      <template slot-scope="{ row }" slot="clocktype">
        <el-tag>{{
            row.clocktype == "0" ? "上班" : row.clocktype == "1" ? "下班" : "无"
          }}
        </el-tag>
      </template>
      <template slot-scope="{ row }" slot="attendancetype">
        <el-tag>{{
            row.attendancetype == "0" ? "正常" : row.attendancetype == "1" ? "迟到" : row.attendancetype == "2" ? "早退" : "无效"
          }}
        </el-tag>
      </template>
    </avue-crud>
  </basic-container>
  </el-col>
    <el-col :span="3" style="display: none">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <avue-tree
              :option="treeOption"
              :data="treeData"
              @node-click="nodeClick"
            />
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col>
      <basic-container>
        <avue-crud
          :option="option"
          :search.sync="search"
          :table-loading="loading"
          :data="data"
          :page.sync="page"
          :permission="permissionList"
          :before-open="beforeOpen"
          v-model="form"
          ref="crud"
          @row-update="rowUpdate"
          @row-save="rowSave"
          @row-del="rowDel"
          :row-style="rowStyle"
          @search-change="searchChange"
          @search-reset="searchReset"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          @on-load="onLoad"
        >
          <template slot="menuLeft">
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              plain
              v-if="permission.attendance_delete"
              @click="handleDelete"
              >删 除
            </el-button>
            <el-button
              type="warning"
              size="small"
              plain
              icon="el-icon-download"
              @click="handleExport"
              >导出
            </el-button>
          </template>
          <template slot-scope="{ row }" slot="clocktype">
            <el-tag
              >{{
                row.clocktype == "0"
                  ? "上班"
                  : row.clocktype == "1"
                  ? "下班"
                  : "无"
              }}
            </el-tag>
          </template>
          <template slot-scope="{ row }" slot="attendancetype">
            <el-tag
              >{{
                row.attendancetype == "0"
                  ? "正常"
                  : row.attendancetype == "1"
                  ? "迟到"
                  : row.attendancetype == "2"
                  ? "早退"
                  : "无效"
              }}
            </el-tag>
          </template>
        </avue-crud>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/attendance/attendance";
  import {mapGetters} from "vuex";
  import {getDeptLazyTree, getDeptTree} from "@/api/system/dept";
  import website from "@/config/website";
import {
  getList,
  getDetail,
  add,
  update,
  remove,
} from "@/api/attendance/attendance";
import { mapGetters } from "vuex";
import { getDeptLazyTree, getDeptTree } from "@/api/system/dept";
import website from "@/config/website";

  export default {
    data() {
      return {
        form: {},
        query: {},
        search:{},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        treeDeptId: '',
        treeData: [],
        treeOption: {
          nodeKey: 'id',
          lazy: true,
          treeLoad: function (node, resolve) {
            const parentId = (node.level === 0) ? 0 : node.data.id;
            getDeptLazyTree(parentId).then(res => {
              resolve(res.data.data.map(item => {
export default {
  data() {
    return {
      form: {},
      query: {},
      search: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      treeDeptId: "",
      treeData: [],
      treeOption: {
        nodeKey: "id",
        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getDeptLazyTree(parentId).then((res) => {
            resolve(
              res.data.data.map((item) => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                }
              }))
            });
          },
          addBtn: false,
          menu: false,
          size: 'small',
          props: {
            labelText: '标题',
            label: 'title',
            value: 'value',
            children: 'children'
          }
                  leaf: !item.hasChildren,
                };
              })
            );
          });
        },
        option: {
          height:'auto',
          calcHeight: 54,
          border: false,
          stripe:true,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          index: true,
          viewBtn: true,
          selection: true,
          labelWidth:120,
          dialogClickModal: false,
          headerAlign: 'center',
          align: 'center',
          column: [
            // {
            //   label: "所属租户",
            //   prop: "tenantId",
            //   hide: true,
            //   width: 200,
            //   type: "tree",
            //   dicUrl: "/api/blade-system/tenant/select",
            //   props: {
            //     label: "tenantName",
            //     value: "tenantId"
            //   },
            //   addDisplay: website.tenantMode,
            //   editDisplay: website.tenantMode,
            //   viewDisplay: website.tenantMode,
            //   rules: [{
            //     required: true,
            //     message: "请输入所属租户",
            //     trigger: "click"
            //   }],
            //   span: 24,
            // },
            {
              label: "员工编号",
              searchSpan: 3,
              prop: "number",
            },
            {
              label: "姓名",
              searchLabelWidth: 45,
              searchSpan:3,
              prop: "name",
              search: true,
            },
            // {
            //   label: "组织机构",
            //   prop: "deptName",
            //   type: "select",
            //   dicUrl: "/api/blade-system/dept/tree",
            //   width: 85,
            //   props: {
            //     label: "deptName",
            //     value: "deptId"
            //   },
            //   rules: [{
            //     required: true,
            //     message: "请输入组织机构",
            //     trigger: "blur"
            //   }]
            // },
            {
              label: "考勤时间",
              prop: "releaseTimeRange",
              type: "datetime",
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              searchSpan: 6,
              searchRange:true,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [{
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children",
        },
      },
      option: {
        height: "auto",
        calcHeight: 54,
        border: false,
        //stripe:true,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        index: true,
        viewBtn: true,
        selection: true,
        labelWidth: 120,
        dialogClickModal: false,
        headerAlign: "center",
        align: "center",
        column: [
          // {
          //   label: "所属租户",
          //   prop: "tenantId",
          //   hide: true,
          //   width: 200,
          //   type: "tree",
          //   dicUrl: "/api/blade-system/tenant/select",
          //   props: {
          //     label: "tenantName",
          //     value: "tenantId"
          //   },
          //   addDisplay: website.tenantMode,
          //   editDisplay: website.tenantMode,
          //   viewDisplay: website.tenantMode,
          //   rules: [{
          //     required: true,
          //     message: "请输入所属租户",
          //     trigger: "click"
          //   }],
          //   span: 24,
          // },
          {
            label: "员工编号",
            searchSpan: 3,
            prop: "number",
          },
          {
            label: "姓名",
            searchLabelWidth: 45,
            searchSpan: 3,
            prop: "name",
            search: true,
          },
          // {
          //   label: "组织机构",
          //   prop: "deptName",
          //   type: "select",
          //   dicUrl: "/api/blade-system/dept/tree",
          //   width: 85,
          //   props: {
          //     label: "deptName",
          //     value: "deptId"
          //   },
          //   rules: [{
          //     required: true,
          //     message: "请输入组织机构",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "考勤时间",
            prop: "releaseTimeRange",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            searchSpan: 6,
            searchRange: true,
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入考勤时间",
                trigger: "blur"
              }]
            },
            {
              label: "考勤时间",
              prop: "clocktime",
              type: "date",
              width: 200,
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "考勤时间",
            prop: "clocktime",
            type: "date",
            width: 200,
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            rules: [
              {
                required: true,
                message: "请输入clocktime",
                trigger: "click"
              }]
            },
            {
              label: "星期",
              prop: "week",
              rules: [{
                trigger: "click",
              },
            ],
          },
          {
            label: "星期",
            prop: "week",
            rules: [
              {
                required: true,
                message: "请输入星期",
                trigger: "blur"
              }]
            },
            // {
            //   label: "天气",
            //   prop: "weather",
            //   rules: [{
            //     required: true,
            //     message: "请输入天气",
            //     trigger: "blur"
            //   }]
            // },
            {
              label: "经度",
              prop: "jd",
              hide: true,
              rules: [{
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: "天气",
          //   prop: "weather",
          //   rules: [{
          //     required: true,
          //     message: "请输入天气",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "经度",
            prop: "jd",
            hide: true,
            rules: [
              {
                required: true,
                message: "请输入经度",
                trigger: "blur"
              }]
            },
            {
              label: "纬度",
              hide: true,
              prop: "wd",
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "纬度",
            hide: true,
            prop: "wd",
            rules: [
              {
                required: true,
                message: "请输入纬度",
                trigger: "blur"
              }]
            },
            {
              label: "打卡类型",
              searchSpan: 3,
              prop: "clocktype",
              width: 120,
              type: "select",
              slot: true,
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "打卡类型",
            searchSpan: 3,
            prop: "clocktype",
            width: 120,
            type: "select",
            slot: true,
            rules: [
              {
                required: true,
                message: "请输入打卡类型",
                trigger: "blur"
              }],
              dicData: [
                {
                  label: "上班",
                  value: "0"
                },
                {
                  label: "下班",
                  value: "1"
                }
              ]
            },
            {
              label: "考勤类型",
              search: true,
              searchSpan:3,
              prop: "attendancetype",
              slot: true,
              type: "select",
              rules: [{
                trigger: "blur",
              },
            ],
            dicData: [
              {
                label: "上班",
                value: "0",
              },
              {
                label: "下班",
                value: "1",
              },
            ],
          },
          {
            label: "考勤类型",
            search: true,
            searchSpan: 3,
            prop: "attendancetype",
            slot: true,
            type: "select",
            rules: [
              {
                required: true,
                message: "请输入考勤类型",
                trigger: "blur"
              }],
              dicData: [
                {
                  label: "正常",
                  value: "0"
                },
                {
                  label: "迟到",
                  value: "1"
                },
               {
                 label: "早退",
                   value: "2"
                },
               {
                 label: "无效",
                   value: "4"
               }
              ]
            },
            {
              label: "考勤地址",
              prop: "address",
              width: 450,
              rules: [{
                trigger: "blur",
              },
            ],
            dicData: [
              {
                label: "正常",
                value: "0",
              },
              {
                label: "迟到",
                value: "1",
              },
              {
                label: "早退",
                value: "2",
              },
              {
                label: "无效",
                value: "4",
              },
            ],
          },
          {
            label: "考勤地址",
            prop: "address",
            width: 450,
            rules: [
              {
                required: true,
                message: "请输入地址",
                trigger: "blur"
              }]
            },
          ]
        },
        data: []
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(null, false),
        viewBtn: this.vaildData(this.permission.attendance_view, true),
        delBtn: this.vaildData(this.permission.attendance_delete, true),
        editBtn: this.vaildData(null, false),
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(null, false),
          viewBtn: this.vaildData(this.permission.attendance_view, true),
          delBtn: this.vaildData(this.permission.attendance_delete, true),
          editBtn: this.vaildData(null, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    methods: {
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      rowSave(row, done, loading) {
        add(row).then(() => {
  },
  methods: {
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (error) => {
          loading();
          window.console.log(error);
        });
      },
      initData(tenantId) {
        getDeptTree(tenantId).then(res => {
          const column = this.findObject(this.option.column, "deptId");
          column.dicData = res.data.data;
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
        }
      );
    },
    initData(tenantId) {
      getDeptTree(tenantId).then((res) => {
        const column = this.findObject(this.option.column, "deptId");
        column.dicData = res.data.data;
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (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"
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
      },
      handleExport() {
        this.$confirm("是否导出考勤数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          window.open(`/api/attendance/export-Attendance?name=${this.search.name}&beginTime=${this.search.releaseTimeRange[0]}
        });
    },
    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();
        });
    },
    handleExport() {
      this.$confirm("是否导出考勤数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(`/api/attendance/export-Attendance?name=${this.search.name}&beginTime=${this.search.releaseTimeRange[0]}
          &endTime=${this.search.releaseTimeRange[1]}&attendancetype=${this.search.attendancetype}`);
      });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.treeDeptId = '';
        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 = {}) {
        const {releaseTimeRange} = this.query;
        let values = {
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.treeDeptId = "";
      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 = {}) {
      const { releaseTimeRange } = this.query;
      let values = {
        ...params,
      };
      if (releaseTimeRange) {
        values = {
          ...params,
          beginTime: releaseTimeRange[0],
          endTime: releaseTimeRange[1],
          ...this.query,
        };
        if (releaseTimeRange) {
          values = {
            ...params,
            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 => {
        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;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      },
      rowStyle({row, column, rowIndex}) {
        if (row.attendancetype == 1) {
          return {
            color: "#fe1515"
          }
        }
        else if(row.attendancetype == 2){
          return {
            color: "#FFCC33"
          }
        }
      },
    }
  };
      );
    },
    rowStyle({ row, column, rowIndex }) {
      if (row.attendancetype == 1) {
        return {
          color: "#fe1515",
        };
      } else if (row.attendancetype == 2) {
        return {
          color: "#FFCC33",
        };
      }
    },
  },
};
</script>

<style>

 src/views/clientManagement/clientManagement.vue

@@ -2,87 +2,106 @@
  <el-row>
    <el-col :span="3">
      <basic-container>
        <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
        <avue-tree
          :option="treeOption"
          :data="treeData"
          @node-click="nodeClick"
        />
      </basic-container>
    </el-col>
    <el-col :span="21">
      <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
                   ref="crud"
                   @row-del="rowDel"
                   v-model="form"
                   :permission="permissionList"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   :row-style="rowStyle"
                   @contextmenu.prevent.native=""
                   @row-contextmenu="rightClick"
                   row-class-name="tabFontSize"
                   :before-open="beforeOpen"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad"
                   @row-click="rowClick">

        <avue-crud
          :option="option"
          :table-loading="loading"
          :data="data"
          :page.sync="page"
          ref="crud"
          @row-del="rowDel"
          v-model="form"
          :permission="permissionList"
          @row-update="rowUpdate"
          @row-save="rowSave"
          :row-style="rowStyle"
          @contextmenu.prevent.native=""
          @row-contextmenu="rightClick"
          row-class-name="tabFontSize"
          :before-open="beforeOpen"
          @search-change="searchChange"
          @search-reset="searchReset"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          @on-load="onLoad"
          @row-click="rowClick"
        >
          <template slot="menuLeft">
            <el-button type="danger"
                       size="mini"
                       icon="el-icon-delete"
                       plain
                       v-if="permission.clientManagement_delete"
                       @click="handleDelete">删 除
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              plain
              v-if="permission.clientManagement_delete"
              @click="handleDelete"
              >删 除
            </el-button>
<!--            <span>&lt;!&ndash;图例 components&ndash;&gt;-->
<!--              <Legend :datas="datalistLIU"></Legend>-->
<!--            </span>-->
            <!--            <span>&lt;!&ndash;图例 components&ndash;&gt;-->
            <!--              <Legend :datas="datalistLIU"></Legend>-->
            <!--            </span>-->
          </template>

          <template slot-scope="{ row }" slot="devicestate">
            <el-tag>{{
              row.devicestate == "0" ? "撤防" : row.devicestate == "1" ? "布防" : "无"
            <el-tag
              >{{
                row.devicestate == "0"
                  ? "撤防"
                  : row.devicestate == "1"
                  ? "布防"
                  : "无"
              }}
            </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="{ 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 class="tdtype" slot-scope="{ row }" slot="dxzt">
            <el-tag class="dtype">
              {{
              row.dxzt == "0" ? "掉线" : row.dxzt == "1" ? "正常" :row.dxzt == "2" ? "预警":row.dxzt == "3" ? "故障":"无"
                row.dxzt == "0"
                  ? "掉线"
                  : row.dxzt == "1"
                  ? "正常"
                  : row.dxzt == "2"
                  ? "预警"
                  : row.dxzt == "3"
                  ? "故障"
                  : "无"
              }}
              <i class="dx" v-if="row.dxzt == '0' "></i>
              <i class="zc" v-if="row.dxzt == '1' "></i>
              <i class="yj" v-if="row.dxzt == '2' "></i>
              <i class="gz" v-if="row.dxzt == '3' "></i>
              <i class="dx" v-if="row.dxzt == '0'"></i>
              <i class="zc" v-if="row.dxzt == '1'"></i>
              <i class="yj" v-if="row.dxzt == '2'"></i>
              <i class="gz" v-if="row.dxzt == '3'"></i>
            </el-tag>

          </template>

          <template slot-scope="{ row }" slot="type">
            <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>
            <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>

          <template slot-scope="{ type, size, row }" slot="menu">
@@ -92,10 +111,9 @@
              :size="size"
              :type="type"
              @click.stop="updateDtype(row)"
            >办结
              >办结
            </el-button>
          </template>

        </avue-crud>

        <div v-show="menuVisible">
@@ -104,7 +122,6 @@
            <li class="menu_item" @click.stop="handleMap">定位</li>
          </ul>
        </div>


        <el-drawer
          title="电子地图"
@@ -120,12 +137,15 @@
            height="100%"
          ></iframe>
        </el-drawer>

      </basic-container>
    </el-col>
    <el-dialog title="缴费提醒" :visible.sync="dialogTableVisible" top="280px" custom-class="payWin" append-to-body="true">


    <el-dialog
      title="缴费提醒"
      :visible.sync="dialogTableVisible"
      top="280px"
      custom-class="payWin"
      append-to-body="true"
    >
      <el-dialog
        class="real-jf-dialog"
        title="缴费"
@@ -153,59 +173,30 @@
          <el-col :offset="4">
            <el-form-item>
              <el-button type="primary" @click.stop="generate(form)"
              >缴费
              </el-button
              >
                >缴费
              </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 :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 prop="deviceName" label="设备名称" width="180">
        </el-table-column>
        <el-table-column
          prop="deviceNumber"
          label="设备编码"
          width="150">
        <el-table-column prop="deviceNumber" label="设备编码" width="150">
        </el-table-column>
        <el-table-column
          prop="ownership"
          label="所属单位"
          width="160">
        <el-table-column prop="ownership" label="所属单位" width="160">
        </el-table-column>
        <el-table-column
          prop="expireTime"
          label="到期时间"
          width="160"
        >
        <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">
        <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>
            <el-button type="text" size="small" @click="handleClick(scope.row)"
              >一键缴费</el-button
            >
          </template>
        </el-table-column>
      </el-table>
@@ -214,961 +205,993 @@
</template>

<script>
  import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates,getBaTree} from "@/api/client/client";
  // import {getDeptTree} from "@/api/system/dept";
  import {mapGetters} from "vuex";
  import axios from "axios";
  import Legend from '../../components/liu-legend/Legend'
  import AvueMap from "avue-plugin-map";
  import website from '@/config/website';
import {
  getList,
  remove,
  update,
  add,
  getclient,
  getDeptLazyTree,
  getAll,
  updates,
  getBaTree,
} from "@/api/client/client";
// import {getDeptTree} from "@/api/system/dept";
import { mapGetters } from "vuex";
import axios from "axios";
import Legend from "../../components/liu-legend/Legend";
import AvueMap from "avue-plugin-map";
import website from "@/config/website";

  export default {
    components:{
      Legend,
    },
    created() {
      //this.payWin();
    },
    data() {
      return {
        dataLIU:{
          color:"#DFDFDF"
export default {
  components: {
    Legend,
  },
  created() {
    //this.payWin();
  },
  data() {
    return {
      dataLIU: {
        color: "#DFDFDF",
      },
      //legend-liu数据
      datalistLIU: [
        {
          color: "#DFDFDF",
          text: "掉线",
        },
        //legend-liu数据
        datalistLIU:[
                {
                    color: "#DFDFDF",
                    text: '掉线'
                },
                {
                    color: "#29C093",
                    text: '正常'
                },
                {
                    color: "#F34A4A",
                    text: '预警'
                },
                {
                    color: "#F48F57",
                    text: '故障'
                }
        ],
        form: {},
        query: {},
        showMap: false,
        selectRow:null,
        initFlag: true,
        loading: true,
        menuVisible:false,
        isEdit:false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        {
          color: "#29C093",
          text: "正常",
        },
        dialogTableVisible: false,
        realjf: false,
        gridData: null,
        selectionList: [],
        treeDeptId: '',
        treeData: [],
        treeOption: {
          nodeKey: 'id',
          lazy: true,
          treeLoad: function (node, resolve) {
            const parentId = (node.level === 0) ? 0 : node.data.id;
            getDeptLazyTree(parentId).then(res => {
              resolve(res.data.data.map(item => {
        {
          color: "#F34A4A",
          text: "预警",
        },
        {
          color: "#F48F57",
          text: "故障",
        },
      ],
      form: {},
      query: {},
      showMap: false,
      selectRow: null,
      initFlag: true,
      loading: true,
      menuVisible: false,
      isEdit: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      dialogTableVisible: false,
      realjf: false,
      gridData: null,
      selectionList: [],
      treeDeptId: "",
      treeData: [],
      treeOption: {
        nodeKey: "id",
        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getDeptLazyTree(parentId).then((res) => {
            resolve(
              res.data.data.map((item) => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                }
              }))
            });
          },
          addBtn: false,
          menu: false,
          size: 'small',
          props: {
            labelText: '标题',
            label: 'title',
            value: 'value',
            children: 'children'
          }
                  leaf: !item.hasChildren,
                };
              })
            );
          });
        },
        option: {
          height: 'auto',
          indexLabel: '序号',
          calcHeight: 54,
          labelWidth: '125',
          dialogWidth: 1150,
          menuWidth: 200,
          align:"center",
          size: "mini",
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
          searchSpan: 4,
          border: false,
          stripe:true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          indexFixed:false,
          column: [
            {
              label: "设备名称",
              width: 200,
              prop: "deviceName",
              searchPlaceholder: "设备名称/编号",
              search: true,
              sortable:true,
              rules: [{
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children",
        },
      },
      option: {
        height: "auto",
        indexLabel: "序号",
        calcHeight: 54,
        labelWidth: "125",
        dialogWidth: 1150,
        menuWidth: 200,
        align: "center",
        size: "mini",
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        searchSpan: 4,
        border: false,
        //stripe:true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        indexFixed: false,
        column: [
          {
            label: "设备名称",
            width: 200,
            prop: "deviceName",
            searchPlaceholder: "设备名称/编号",
            search: true,
            sortable: true,
            rules: [
              {
                required: true,
                message: "请输入设备名称",
                trigger: "blur"
              }],
            }
            ,
            {
              label: "设备编号",
              prop: "deviceNumber",
              width: 130,
              rules: [
                {
                  required: true,
                  message: "请输入设备编号",
                  trigger: "click"
                }
              ]
            },
            {
              label: "使用方",
              prop: "deptName",
              display: false
            },
            {
              label: "使用方",
              prop: "deptId",
              width: 200,
              type: "cascader",
              dicUrl: "/api/blade-system/dept/trees",
              dicData: [],
              checkStrictly:true,
              hide:true,
              props: {
                label: "title"
                trigger: "blur",
              },
              rules: [
                {
                  required: true,
                  message: "请选择使用方",
                  trigger: "click"
                }
              ]
            },
            // {
            //   label: "使用方",
            //   prop: "deptId",
            //   width: 200,
            //   type: "cascader",
            //   dicUrl: "/api/blade-system/dept/trees",
            //   multiple: true,
            //   checkStrictly:true,
            //   dicData: [],
            //   props: {
            //     label: "title"
            //   },
            //   rules: [
            //     {
            //       required: true,
            //       message: "请选择使用方",
            //       trigger: "click"
            //     }
            //   ]
            // },
             {
              label: "设备厂商",
              prop: "manufacturers",
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
              searchSpan: 3,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=manufacturers",
              props: {
                label: "dictValue",
                value: "dictKey"
            ],
          },
          {
            label: "设备编号",
            prop: "deviceNumber",
            width: 130,
            rules: [
              {
                required: true,
                message: "请输入设备编号",
                trigger: "click",
              },
              search:true,
              type:"select",
              rules: [{
            ],
          },
          {
            label: "使用方",
            prop: "deptName",
            display: false,
          },
          {
            label: "使用方",
            prop: "deptId",
            width: 200,
            type: "cascader",
            dicUrl: "/api/blade-system/dept/trees",
            dicData: [],
            checkStrictly: true,
            hide: true,
            props: {
              label: "title",
            },
            rules: [
              {
                required: true,
                message: "请选择使用方",
                trigger: "click",
              },
            ],
          },
          // {
          //   label: "使用方",
          //   prop: "deptId",
          //   width: 200,
          //   type: "cascader",
          //   dicUrl: "/api/blade-system/dept/trees",
          //   multiple: true,
          //   checkStrictly:true,
          //   dicData: [],
          //   props: {
          //     label: "title"
          //   },
          //   rules: [
          //     {
          //       required: true,
          //       message: "请选择使用方",
          //       trigger: "click"
          //     }
          //   ]
          // },
          {
            label: "设备厂商",
            prop: "manufacturers",
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
            searchSpan: 3,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=manufacturers",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            search: true,
            type: "select",
            rules: [
              {
                required: true,
                message: "请选择设备厂商",
                trigger: "blur"
              }],
            },
            {
              label: "设备状态",
              prop: "dxzt",
              slot: true,
              sortable:true,
              addDisplay: false,
              editDisplay: false,
            }, {
              label: "地址",
              prop: "street",
              span:10,
              hide: true,
            },
            {
              label: null,
              prop: "map",
              labelWidth: "0",
              searchSpan:0,
              maxlength:0,
              hide: true,
              span: 2,
              // display:false,
              component: "AvueMap"
            },
            {
              label: "省份",
              prop: "province",
              search: true,
              searchSpan: 2,
              labelWidth: '110',
              searchLabelWidth: 45,
              placeholder: "省份",
              type: "select",
              props: {
                label: "name",
                value: "code"
                trigger: "blur",
              },
              cascaderItem: ["city", "district"],
              dicUrl: "/api/blade-system/region/select",
              span: 8,
              className: "city1",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            ],
          },
          {
            label: "设备状态",
            prop: "dxzt",
            slot: true,
            sortable: true,
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "地址",
            prop: "street",
            span: 10,
            hide: true,
          },
          {
            label: null,
            prop: "map",
            labelWidth: "0",
            searchSpan: 0,
            maxlength: 0,
            hide: true,
            span: 2,
            // display:false,
            component: "AvueMap",
          },
          {
            label: "省份",
            prop: "province",
            search: true,
            searchSpan: 2,
            labelWidth: "110",
            searchLabelWidth: 45,
            placeholder: "省份",
            type: "select",
            props: {
              label: "name",
              value: "code",
            },
            {
              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: 2,
              labelWidth: "0",
              className: "city2",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            cascaderItem: ["city", "district"],
            dicUrl: "/api/blade-system/region/select",
            span: 8,
            className: "city1",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "地市",
            prop: "city",
            type: "select",
            searchPlaceholder: "地市",
            placeholder: "地市",
            searchLabelWidth: 1,
            searchSpan: 2,
            search: true,
            props: {
              label: "name",
              value: "code",
            },
            {
              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: 2,
              labelWidth: "0",
              className: "city3",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 2,
            labelWidth: "0",
            className: "city2",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "区县",
            searchSpan: 2,
            searchLabelWidth: 1,
            searchPlaceholder: "区县",
            placeholder: "区县",
            search: true,
            prop: "district",
            type: "select",
            props: {
              label: "name",
              value: "code",
            },
            {
              label: "经度",
              hide: true,
              prop: "jd",
              searchSpan:2,
              width:"100",
              labelWidth: "120",
              formatter: (row,value,label,column)=>{
                  return value = value.substring(0,11);
              },
              span:7,
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 2,
            labelWidth: "0",
            className: "city3",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "经度",
            hide: true,
            prop: "jd",
            searchSpan: 2,
            width: "100",
            labelWidth: "120",
            formatter: (row, value, label, column) => {
              return (value = value.substring(0, 11));
            },
            {
              label: "纬度",
              labelWidth: "45",
              hide: true,
              prop: "wd",
              formatter: (row,value,label,column) => {
                return value = value.substring(0,10);
              },
              span:5,
            span: 7,
          },
          {
            label: "纬度",
            labelWidth: "45",
            hide: true,
            prop: "wd",
            formatter: (row, value, label, column) => {
              return (value = value.substring(0, 10));
            },
            {
              label: "心跳时间",
              prop: "heartbeat",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              width: 130,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            span: 5,
          },
          {
            label: "心跳时间",
            prop: "heartbeat",
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            width: 130,
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
        ],
      },
      data: [],
    };
  },
  watch: {
    "form.map": {
      // form是表单或者表格绑定的数据集，v-model='form'
      handler(val) {
        if (val) {
          //经纬度替换
          this.form.wd = val.latitude;
          this.form.jd = val.longitude;
          //地址截取，从县/区开始截取,并且取从县区第一个出现的位置开始
          var address = val.formattedAddress.toString();
          if (address.search("县") != -1) {
            this.form.street = address.substring(
              address.indexOf("县") + 1,
              address.length
            );
          }
          if (address.search("区") != -1) {
            this.form.street = 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,
    },
    "form.oneId": {
      handler(val) {
        var that = this;
        if (val != null && val != "") {
          getBaTree(val).then((res) => {
            if (res) {
              that.form.onePhone = res.data.data.records[0].phone;
              that.form.oneContacts = res.data.data.records[0].name;
            }
          });
        }
      },
    },
    "form.twoId": {
      handler(val) {
        var that = this;
        if (val != null && val != "") {
          getBaTree(val).then((res) => {
            if (res) {
              that.form.twoPhone = res.data.data.records[0].phone;
              that.form.twoContacts = res.data.data.records[0].name;
            }
          });
        }
      },
    },
    "form.threeId": {
      handler(val) {
        var that = this;
        if (val != null && val != "") {
          getBaTree(val).then((res) => {
            if (res) {
              that.form.threePhone = res.data.data.records[0].phone;
              that.form.threeContacts = res.data.data.records[0].name;
            }
          });
        }
      },
    },

          ]
        },
        data: []
    //随意一个
    // 'form.deviceName'() {
    //   if (this.initFlag) {
    //     this.initData();
    //   }
    // }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.clientManagement_add, false),
        viewBtn: this.vaildData(null, false),
        delBtn: this.vaildData(this.permission.clientManagement_delete, false),
        editBtn: this.vaildData(this.permission.clientManagement_edit, false),
      };
    },
    watch: {
      "form.map": {
        // form是表单或者表格绑定的数据集，v-model='form'
        handler(val) {
          if (val) {
            //经纬度替换
            this.form.wd = val.latitude;
            this.form.jd = val.longitude;
            //地址截取，从县/区开始截取,并且取从县区第一个出现的位置开始
            var address = val.formattedAddress.toString();
            if(address.search("县") != -1){
                this.form.street = address.substring(address.indexOf("县")+1,address.length);
            }
            if(address.search("区") != -1){
              this.form.street = 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,
      },
      "form.oneId":{
        handler(val) {
          var that = this;
          if (val != null && val !=""){
            getBaTree(val).then(res => {
              if (res) {
                that.form.onePhone = res.data.data.records[0].phone;
                that.form.oneContacts = res.data.data.records[0].name;
              }
            });
          }
        },
      },
      "form.twoId":{
        handler(val) {
          var that = this;
          if (val != null && val !=""){
            getBaTree(val).then(res => {
              if (res) {
                that.form.twoPhone = res.data.data.records[0].phone;
                that.form.twoContacts = res.data.data.records[0].name;
              }
            });
          }
        },
      },
      "form.threeId":{
        handler(val) {
          var that = this;
          if (val != null && val !=""){
            getBaTree(val).then(res => {
              if (res) {
                that.form.threePhone = res.data.data.records[0].phone;
                that.form.threeContacts = res.data.data.records[0].name;
              }
            });
          }
        },
      },

      //随意一个
      // 'form.deviceName'() {
      //   if (this.initFlag) {
      //     this.initData();
      //   }
      // }

    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.clientManagement_add, false),
          viewBtn: this.vaildData(null, false),
          delBtn: this.vaildData(this.permission.clientManagement_delete, false),
          editBtn: this.vaildData(this.permission.clientManagement_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    mounted(){
      // 租户模式默认加载管理组数据
      // var that = this;
      //that.tenantId = website.tenantId;
    },
    methods: {
      generate(row) {
        updates(row.expireTime, row.deviceNumber).then(() => {
  },
  mounted() {
    // 租户模式默认加载管理组数据
    // var that = this;
    //that.tenantId = website.tenantId;
  },
  methods: {
    generate(row) {
      updates(row.expireTime, row.deviceNumber).then(
        () => {
          this.dialogTableVisible = false;
          this.realjf = false;
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "缴费成功!"
            message: "缴费成功!",
          });
        }, error => {
        },
        (error) => {
          window.console.log(error);
        });
      },
        }
      );
    },

      //初始化数据
      // initData() {
      //   //部门tree数据
      //   getDeptTree().then(res => {
      //     const column = this.findObject(this.option.column, "deptId");
      //     column.dicData = res.data.data;
      //   });
      // },
    //初始化数据
    // initData() {
    //   //部门tree数据
    //   getDeptTree().then(res => {
    //     const column = this.findObject(this.option.column, "deptId");
    //     column.dicData = res.data.data;
    //   });
    // },

      handleClick(row) {
        this.form = row;
        this.dialogTableVisible = true;
        this.realjf = true;
      },
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      rowSave(row, done, loading) {
    handleClick(row) {
      this.form = row;
      this.dialogTableVisible = true;
      this.realjf = true;
    },
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    rowSave(row, done, loading) {
      row.deptId = row.deptId.join(",");
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      if (Array.isArray(row.deptId)) {
        row.deptId = row.deptId.join(",");
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        if(Array.isArray(row.deptId)){
            row.deptId = row.deptId.join(",");
        }
        update(row).then(() => {
      }
      update(row).then(
        () => {
          // this.initFlag = false;
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (error) => {
          window.console.log(error);
          loading();
        });
      },
      updateDtype(row){
        row.dtype = "0";
        update(row).then(() => {
        }
      );
    },
    updateDtype(row) {
      row.dtype = "0";
      update(row).then(
        () => {
          // this.initFlag = false;
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          this.onLoad(this.page);
        }, error => {
        },
        (error) => {
          window.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: "操作成功!",
          });
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
    },
    searchReset() {
      this.treeDeptId = "";
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      console.log(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();
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
      },
      searchReset() {
        this.treeDeptId = "";
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        console.log(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();
      },
      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)) {
          getclient(this.form.id).then(res => {
            this.form = res.data.data;
            this.isEdit=true;
          });
        }
        if (["add"].includes(type)) {
          this.isEdit=false;
        }
        // this.initFlag = true;
        done();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        const {releaseTimeRange} = this.query;
        let values = {
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getclient(this.form.id).then((res) => {
          this.form = res.data.data;
          this.isEdit = true;
        });
      }
      if (["add"].includes(type)) {
        this.isEdit = false;
      }
      // this.initFlag = true;
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      const { releaseTimeRange } = this.query;
      let values = {
        ...params,
      };
      if (releaseTimeRange) {
        values = {
          ...params,
          beginTime: releaseTimeRange[0],
          endTime: releaseTimeRange[1],
          ...this.query,
        };
        if (releaseTimeRange) {
          values = {
            ...params,
            beginTime: releaseTimeRange[0],
            endTime: releaseTimeRange[1],
            ...this.query
          };
          values.releaseTimeRange = null;
        } else {
          values = {
            ...params,
            ...this.query
          };
        }
        values.releaseTimeRange = null;
      } else {
        values = {
          ...params,
          ...this.query,
        };
      }

        //在线设备
        if(this.$route.query.dxtype != undefined){
          values = {
            ...params,
            dxtype: this.$route.query.dxtype,
            ...this.query,
          };
        }
      //在线设备
      if (this.$route.query.dxtype != undefined) {
        values = {
          ...params,
          dxtype: this.$route.query.dxtype,
          ...this.query,
        };
      }

        this.loading = true;
        getList(page.currentPage, page.pageSize, values, this.treeDeptId).then(res => {
      this.loading = true;
      getList(page.currentPage, page.pageSize, values, this.treeDeptId).then(
        (res) => {
          const data = res.data.data;
          this.page.total = data.total;

          for (var i = 0; i < data.records.length; i++) {
              if(data.records[i].dtype==1){
                  data.records[i].dxzt = 1;
              }
              if(data.records[i].dtype==2){
                  data.records[i].dxzt = 2;
              }
              if(data.records[i].dtype==3){
                  data.records[i].dxzt = 3;
              }
              if(data.records[i].dtype=="" || data.records[i].dtype==0){
                  data.records[i].dxzt = 0;
              }
            if (data.records[i].dtype == 1) {
              data.records[i].dxzt = 1;
            }
            if (data.records[i].dtype == 2) {
              data.records[i].dxzt = 2;
            }
            if (data.records[i].dtype == 3) {
              data.records[i].dxzt = 3;
            }
            if (data.records[i].dtype == "" || data.records[i].dtype == 0) {
              data.records[i].dxzt = 0;
            }
          }

          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }, rowStyle({row, column, rowIndex}) {
        // 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: "#fe1515"
        //     };
        //   }
        }
      );
    },
    rowStyle({ row, column, rowIndex }) {
      // 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: "#fe1515"
      //     };
      //   }

        // } else if (row.heartbeat == "") {
      // } else if (row.heartbeat == "") {
      //   return {
      //     color: "#fe1515"
      //   };
      // }

      if (row.dtype != null && row.dtype != "") {
        // if(row.dtype=='0'){
        //   return {
        //     color: "#fe1515"
        //     color: "#DFDFDF"
        //   };
        // }

        if(row.dtype!=null && row.dtype!=""){
          // if(row.dtype=='0'){
          //   return {
          //     color: "#DFDFDF"
          //   };
          // }
          // if(row.dtype=='1'){
          //   return {
          //     color: "#29C093"
          //   };
          // }
          if(row.dtype=='2'){
            return {
              color: "#F34A4A"
            };
          }
          // if(row.dtype=='3'){
          //   return {
          //     color: "#F48F57"
          //   };
          // }
        }
      },
      handleManage(row) {
        this.form;
        this.dialogTableVisible = true;
      },
      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;
          }
        });

      }, handleStart(row) {

        console.log(row,11111111111);
        row = this.selectRow;
        console.log(row,22222222222);
        var arr = [];
        console.log(this.$store.state.tags.tagList,3333333);
        this.$store.state.tags.tagList.forEach(item => {
          if (item.label != "视频") {
            arr.push(item);
          }
        });
        this.$store.state.tags.tagList = arr;
        console.log(arr,444444444444);
        this.$router.push({
          path: `/real/video/`, query: row
        });
      }, handleMap(row) {
        row = this.selectRow;
        this.showMap = true;
        this.$nextTick(() => {
          this.$refs.mapDiv.onload = () => {
            window.frames[1].init("equipment", {x: row.jd, y: row.wd});
        // if(row.dtype=='1'){
        //   return {
        //     color: "#29C093"
        //   };
        // }
        if (row.dtype == "2") {
          return {
            color: "#F34A4A",
          };
        })
      },rightClick(row, event) {
        this.selectRow = row;
        this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
        this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
        var menu = document.querySelector('#menu');
        this.styleMenu(menu);
      },
      foo() {
        // 取消鼠标监听事件 菜单栏
        this.menuVisible = false;
        document.removeEventListener('click', this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
      },
      styleMenu(menu) {
        let cha = document.body.clientHeight - event.clientY
        //console.log(document.body.clientHeight,event.clientY,cha)
        // 防止菜单太靠底，根据可视高度调整菜单出现位置
        if (cha < 150) {
          menu.style.top = event.clientY -120 - (100) + 'px'
        } else {
          menu.style.top = event.clientY -10 - (100) + 'px'
        }
        menu.style.left = event.clientX + 10 - (60) + 'px'
        document.addEventListener('click', this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
      },
      rowClick(val){//行点击事件
        // if(row.dtype=='3'){
        //   return {
        //     color: "#F48F57"
        //   };
        // }
      }
    },
    handleManage(row) {
      this.form;
      this.dialogTableVisible = true;
    },
    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;
        }
      });
    },
    handleStart(row) {
      console.log(row, 11111111111);
      row = this.selectRow;
      console.log(row, 22222222222);
      var arr = [];
      console.log(this.$store.state.tags.tagList, 3333333);
      this.$store.state.tags.tagList.forEach((item) => {
        if (item.label != "视频") {
          arr.push(item);
        }
      });
      this.$store.state.tags.tagList = arr;
      console.log(arr, 444444444444);
      this.$router.push({
        path: `/real/video/`,
        query: row,
      });
    },
    handleMap(row) {
      row = this.selectRow;
      this.showMap = true;
      this.$nextTick(() => {
        this.$refs.mapDiv.onload = () => {
          window.frames[1].init("equipment", { x: row.jd, y: row.wd });
        };
      });
    },
    rightClick(row, event) {
      this.selectRow = row;
      this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
      this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
      var menu = document.querySelector("#menu");
      this.styleMenu(menu);
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    styleMenu(menu) {
      let cha = document.body.clientHeight - event.clientY;
      //console.log(document.body.clientHeight,event.clientY,cha)
      // 防止菜单太靠底，根据可视高度调整菜单出现位置
      if (cha < 150) {
        menu.style.top = event.clientY - 120 - 100 + "px";
      } else {
        menu.style.top = event.clientY - 10 - 100 + "px";
      }
      menu.style.left = event.clientX + 10 - 60 + "px";
      document.addEventListener("click", this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
    },
    rowClick(val) {
      //行点击事件
      // console.log(val);
      this.$router.push({ path: "/dataL/dataL", query: val });
      }
    }
  };
    },
  },
};
</script>

<style lang="scss" scoped>
$city-m-l: 10px;

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

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

// /*页面样式*/   //丢弃  因为不起作用，样式在cs.vue中  city1,2,3  liuyg改
// .el-card__body .cityClass1 {
//   width: 50px;
//   padding-right: 0px !important;
//   margin-left: $city-m-l;
// }

  // /*页面样式*/   //丢弃  因为不起作用，样式在cs.vue中  city1,2,3  liuyg改
  // .el-card__body .cityClass1 {
  //   width: 50px;
  //   padding-right: 0px !important;
  //   margin-left: $city-m-l;
  // }
// .el-card__body .cityClass2 {
//   width: 50px;
//   padding-left: 0px !important;
//   padding-right: 0px !important;
//   margin-left: $city-m-l;
// }

  // .el-card__body .cityClass2 {
  //   width: 50px;
  //   padding-left: 0px !important;
  //   padding-right: 0px !important;
  //   margin-left: $city-m-l;
  // }
// .el-card__body .cityClass3 {
//   width: 50px;
//   padding-left: 0px !important;
//   padding-right: 0px !important;
//   margin-left: $city-m-l;
// }

  // .el-card__body .cityClass3 {
  //   width: 50px;
  //   padding-left: 0px !important;
  //   padding-right: 0px !important;
  //   margin-left: $city-m-l;
  // }
// /*新增窗体样式*/
// .el-dialog .city1 {
//   width: 155px;
//   padding-right: 0px !important;
//   margin-left: $city-m-l;
// }

  // /*新增窗体样式*/
  // .el-dialog .city1 {
  //   width: 155px;
  //   padding-right: 0px !important;
  //   margin-left: $city-m-l;
  // }
// .el-dialog .city2 {
//   width: 100px;
//   padding-left: 5px !important;
//   padding-right: 5px !important;
//   margin-left: $city-m-l;
// }

  // .el-dialog .city2 {
  //   width: 100px;
  //   padding-left: 5px !important;
  //   padding-right: 5px !important;
  //   margin-left: $city-m-l;
  // }
// .el-dialog .city3 {
//   width: 100px;
//   padding-left: 0px !important;
//   padding-right: 0px !important;
//   margin-left: $city-m-l;
// }

  // .el-dialog .city3 {
  //   width: 100px;
  //   padding-left: 0px !important;
  //   padding-right: 0px !important;
  //   margin-left: $city-m-l;
  // }
// .city2 div label {
//   display: none;
// }

  // .city2 div label {
  //   display: none;
  // }
// .city3 div label {
//   display: none;
// }

  // .city3 div label {
  //   display: none;
  // }
.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 {
    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 {
    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;
}

  .real-jf-dialog .el-dialog .el-dialog__body {
    height: calc(100% - 54px);
    box-sizing: border-box;
  }
.client-jf {
  font-size: 25px;
  color: green;
}

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

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

  .dtype{
    width: 80px;
  }
.dx {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #dfdfdf;
}
.zc {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #29c093;
}
.yj {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f34a4a;
}
.gz {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f48f57;
}

  .dx{
    position: absolute;
    top: 50%;
    margin-top: -5px;
    margin-left: 6px;
    width: 10px;
    height: 10px;
    border-radius: 30%;
    background: #DFDFDF;
  }
  .zc{
    position: absolute;
    top: 50%;
    margin-top: -5px;
    margin-left: 6px;
    width: 10px;
    height: 10px;
    border-radius: 30%;
    background: #29C093;
  }
  .yj{
    position: absolute;
    top: 50%;
    margin-top: -5px;
    margin-left: 6px;
    width: 10px;
    height: 10px;
    border-radius: 30%;
    background: #F34A4A;
  }
  .gz{
    position: absolute;
    top: 50%;
    margin-top: -5px;
    margin-left: 6px;
    width: 10px;
    height: 10px;
    border-radius: 30%;
    background: #F48F57;
  }
.tabFontSize {
  font-size: 15px;
}

  .tabFontSize{
    font-size: 15px;
  }
.menu_item {
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  margin-top: 0px;
}

  .menu_item {
    cursor:pointer;
    line-height: 20px;
    text-align: center;
    margin-top: 0px;
  }

  .menu {
    height: auto;
    width: 120px;
    color: #606266;
    position: absolute;
    padding: 0px;
    box-sizing: border-box;
    /*border: 1px solid #999999;*/
    text-align: center;
    background-color: #fff;
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  }
  .menu li:hover {
    background-color: rgba(232,237,250,.6);
    color: darkslategrey;
  }
  .menu li{
    position: relative;
    display: flex;
    font-size: 14px;
    align-items: center;
    height: 34px;
    line-height: 34px;
    outline: none;
    margin-top: 0px;
    padding-left: 20px;
    padding-right: 5px;
  }



.menu {
  height: auto;
  width: 120px;
  color: #606266;
  position: absolute;
  padding: 0px;
  box-sizing: border-box;
  /*border: 1px solid #999999;*/
  text-align: center;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.menu li:hover {
  background-color: rgba(232, 237, 250, 0.6);
  color: darkslategrey;
}
.menu li {
  position: relative;
  display: flex;
  font-size: 14px;
  align-items: center;
  height: 34px;
  line-height: 34px;
  outline: none;
  margin-top: 0px;
  padding-left: 20px;
  padding-right: 5px;
}
</style>


<style>
  .avue-map input{
    position: relative !important;
    left: 30px !important;
  }
.avue-map input {
  position: relative !important;
  left: 30px !important;
}

  .avue-map .el-input-group__append{
    position: relative !important;
    left: -51px !important;
  }


.avue-map .el-input-group__append {
  position: relative !important;
  left: -51px !important;
}
</style>

 src/views/feedbackReport/feedbackReport.vue

@@ -1,390 +1,413 @@
<template>
  <basic-container>
    <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
      :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"
    >
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.feedback_delete"
                   @click="handleDelete">删 除
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.feedback_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
  
</template>

<script>
  import {getListReport, getDetails, adds, updates, remove} from "@/api/feedback/feedback";
    import {getBaTree} from "@/api/client/client";
  import {mapGetters} from "vuex";
import {
  getListReport,
  getDetails,
  adds,
  updates,
  remove,
} from "@/api/feedback/feedback";
import { getBaTree } from "@/api/client/client";
import { mapGetters } from "vuex";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height:'auto',
          calcHeight: 54,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          labelWidth: '125',
          dialogWidth: 1150,
          border: false,
          stripe:true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          images:[],
          videos:[],
          column: [
            {
              label: "上报人姓名",
              prop: "sname",
              search:true,
              searchLabelWidth:100,
              searchSpan:5,
              addDisplay:false,
              editDisplay:false
export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 54,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        labelWidth: "125",
        dialogWidth: 1150,
        border: false,
        //stripe:true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        images: [],
        videos: [],
        column: [
          {
            label: "上报人姓名",
            prop: "sname",
            search: true,
            searchLabelWidth: 100,
            searchSpan: 5,
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "上报人姓名",
            prop: "snumber",
            type: "tree",
            dicUrl: "/api/catalogs/catalogs/getBigTree",
            props: {
              label: "title",
            },
            {
              label: "上报人姓名",
              prop: "snumber",
              type: "tree",
              dicUrl: "/api/catalogs/catalogs/getBigTree",
              props: {
                label: "title"
              },
              width: 72,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: false,
              rules: [{
            width: 72,
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: false,
            rules: [
              {
                required: true,
                message: "请选择上报人",
                trigger: "blur"
              }],
            },
            {
              label: "上报地址",
              prop: "place",
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "上报地址",
            prop: "place",
            rules: [
              {
                required: true,
                message: "请输入事发地址",
                trigger: "blur"
              }]
            },
            {
              label: "备注",
              prop: "result",
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "备注",
            prop: "result",
            rules: [
              {
                required: true,
                message: "请输入处理结果",
                trigger: "blur"
              }]
            },
            {
              label: "上报时间",
              prop: "stime",
              type: "datetime",
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
            },
            {
              label: "上报时间",
              prop: "dateTime",
              type: "datetime",
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              searchRange: true,
              search:true,
              searchLabelWidth:100,
              searchSpan: 6,
              addDisplay:false,
              viewDisplay:false,
              editDisplay:false,
              hide:true,
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "上报时间",
            prop: "stime",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label: "上报时间",
            prop: "dateTime",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            searchRange: true,
            search: true,
            searchLabelWidth: 100,
            searchSpan: 6,
            addDisplay: false,
            viewDisplay: false,
            editDisplay: false,
            hide: true,
            rules: [
              {
                required: true,
                message: "请选择上报时间",
                trigger: "blur"
              }]
                trigger: "blur",
              },
            ],
          },
          {
            label: "图片",
            prop: "images",
            dataType: "array",
            type: "upload",
            span: 24,
            hide: true,
            viewDisplay: true,
            listType: "picture-card",
            action: "/api/blade-resource/oss/endpoint/put-file",
            propsHttp: {
              res: "data",
              url: "link",
            },
            {
              label: '图片',
              prop: 'images',
              dataType: 'array',
              type: 'upload',
              span: 24,
              hide:true,
              viewDisplay:true,
              listType: 'picture-card',
              action: "/api/blade-resource/oss/endpoint/put-file",
              propsHttp: {
                res: "data",
                url: "link",
              }
          },
          {
            label: "视频",
            prop: "videos",
            dataType: "array",
            type: "upload",
            accept: "video/mp4",
            hide: true,
            viewDisplay: true,
            editDisabled: true,
            listType: "picture",
            span: 24,
            action: "http://web.byisf.com:82/blade-jfpts/depl/put-depl",
            propsHttp: {
              res: "data",
              url: "link",
            },
             {
              label: '视频',
              prop: 'videos',
              dataType: 'array',
              type: 'upload',
              accept:"video/mp4",
              hide:true,
              viewDisplay:true,
              editDisabled:true,
              listType: 'picture',
              span: 24,
              action: "http://web.byisf.com:82/blade-jfpts/depl/put-depl",
              propsHttp: {
                res: "data",
                url: "link",
              }
            },
          ]
        },
        data: []
          },
        ],
      },
      data: [],
    };
  },
  watch: {
    handler(val) {
      var that = this;
      if (val != null && val != "") {
        getBaTree(val).then((res) => {
          if (res) {
            that.form.sname = res.data.data.records[0].name;
          }
        });
      }
    },
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.feedback_add, false),
        viewBtn: this.vaildData(this.permission.feedback_view, true),
        delBtn: this.vaildData(this.permission.feedback_delete, true),
        editBtn: this.vaildData(this.permission.feedback_edit, true),
      };
    },
    watch:{
      handler(val) {
          var that = this;
          if (val != null && val !=""){
            getBaTree(val).then(res => {
              if (res) {
                that.form.sname = res.data.data.records[0].name;
              }
            });
          }
        },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.feedback_add, false),
          viewBtn: this.vaildData(this.permission.feedback_view, true),
          delBtn: this.vaildData(this.permission.feedback_delete, true),
          editBtn: this.vaildData(this.permission.feedback_edit, true)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
  },
  methods: {
    rowSave(row, done, loading) {
      var data = {
        status: 1,
        tpaddress: "",
        spaddress: "",
        sname: row.$snumber,
        snumber: row.snumber,
        stime: row.stime,
        result: row.result,
        place: row.place,
      };
      if (row.images.length > 0) {
        var imageArr = row.images;
        imageArr.forEach((image) => {
          data.tpaddress += image + ",";
        });
        return ids.join(",");
        data.tpaddress = data.tpaddress.substring(0, data.tpaddress.length - 1);
      }
    },
    methods: {
      rowSave(row, done, loading) {
        var data = {
              status:1,
              tpaddress:"",
              spaddress:"",
              sname: row.$snumber,
              snumber: row.snumber,
              stime:row.stime,
              result:row.result,
              place:row.place
          }
        if (row.images.length > 0) {
                    var imageArr = row.images;
                    imageArr.forEach( image =>{
              data.tpaddress += image + ",";
          }) 
                    data.tpaddress = data.tpaddress.substring(0,data.tpaddress.length-1);
                }
                if (row.videos.length > 0) {
                    //var videoArr = row.videos;
                    //videoArr.forEach( video =>{
              //data.spaddress += video + ",";
          //}) 
                    //data.spaddress = data.spaddress.substring(0,data.spaddress.length-1);
                    data.spaddress = row.videos;
                }
        adds(data).then(() => {
      if (row.videos.length > 0) {
        //var videoArr = row.videos;
        //videoArr.forEach( video =>{
        //data.spaddress += video + ",";
        //})
        //data.spaddress = data.spaddress.substring(0,data.spaddress.length-1);
        data.spaddress = row.videos;
      }
      adds(data).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      var data = {
        id: row.id,
        status: 1,
        tpaddress: "",
        spaddress: "",
        sname: row.$snumber,
        snumber: row.snumber,
        stime: row.stime,
        result: row.result,
        place: row.place,
      };
      if (row.images.length > 0) {
        var imageArr = row.images;
        imageArr.forEach((image) => {
          data.tpaddress += image + ",";
        });
      },
      rowUpdate(row, index, done, loading) {
        var data = {
              id:row.id,
              status:1,
              tpaddress:"",
              spaddress:"",
              sname: row.$snumber,
              snumber: row.snumber,
              stime:row.stime,
              result:row.result,
              place:row.place
          }
        if (row.images.length > 0) {
                    var imageArr = row.images;
                    imageArr.forEach( image =>{
              data.tpaddress += image + ",";
          }) 
                    data.tpaddress = data.tpaddress.substring(0,data.tpaddress.length-1);
                }
                if (row.videos.length > 0) {
                    //var videoArr = row.videos;
                    //videoArr.forEach( video =>{
              //data.spaddress += video + ",";
          //}) 
                    //data.spaddress = data.spaddress.substring(0,data.spaddress.length-1);
                    data.spaddress = row.videos;
                }
        updates(data).then(() => {
        data.tpaddress = data.tpaddress.substring(0, data.tpaddress.length - 1);
      }
      if (row.videos.length > 0) {
        //var videoArr = row.videos;
        //videoArr.forEach( video =>{
        //data.spaddress += video + ",";
        //})
        //data.spaddress = data.spaddress.substring(0,data.spaddress.length-1);
        data.spaddress = row.videos;
      }
      updates(data).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (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: "操作成功!",
          });
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
        .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)) {
          getDetails(this.form.id).then(res => {
            this.form = res.data.data;
            this.images = res.data.data.images;
            this.videos = res.data.data.videos;
          });
        }
        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 = {status:1}) {
        const { dateTime } = this.query;
        let values = {
          ...params,
          status:1
        };
        if (dateTime) {
          values = {
            ...params,
            begTime: dateTime[0],
            endTime: dateTime[1],
            ...this.query,
          };
          values.dateTime = null;
        }
        this.loading = true;
        getListReport(page.currentPage, page.pageSize,values).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetails(this.form.id).then((res) => {
          this.form = res.data.data;
          this.images = res.data.data.images;
          this.videos = res.data.data.videos;
        });
      }
    }
  };
      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 = { status: 1 }) {
      const { dateTime } = this.query;
      let values = {
        ...params,
        status: 1,
      };
      if (dateTime) {
        values = {
          ...params,
          begTime: dateTime[0],
          endTime: dateTime[1],
          ...this.query,
        };
        values.dateTime = null;
      }
      this.loading = true;
      getListReport(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style>

 src/views/healthcode/healthcode.vue

@@ -1,479 +1,532 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               :row-style="rowStyle"
               :search.sync="search"
               @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">
        <template slot="menuLeft">
          <el-button
            v-bind:class="activeClass == 0 ? 'btn-color' : ''"
            size="small "
            @click="getHealthcodeData(0)"
            >本日
          </el-button>
          <el-button
            v-bind:class="activeClass == 1 ? 'btn-color' : ''"
            size="small "
            @click="getHealthcodeData(1)"
            >本周
          </el-button>
          <el-button
            v-bind:class="activeClass == 2 ? 'btn-color' : ''"
            size="small "
            @click="getHealthcodeData(2)"
            >本月
          </el-button>
        </template>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      :row-style="rowStyle"
      :search.sync="search"
      @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"
    >
      <template slot="menuLeft">
        <el-button
          v-bind:class="activeClass == 0 ? 'btn-color' : ''"
          size="small "
          @click="getHealthcodeData(0)"
          >本日
        </el-button>
        <el-button
          v-bind:class="activeClass == 1 ? 'btn-color' : ''"
          size="small "
          @click="getHealthcodeData(1)"
          >本周
        </el-button>
        <el-button
          v-bind:class="activeClass == 2 ? 'btn-color' : ''"
          size="small "
          @click="getHealthcodeData(2)"
          >本月
        </el-button>
      </template>

        <template slot="menuLeft">
          <el-button type="warning"
                      size="small"
                      plain
                      icon="el-icon-download"
                      @click="handleExport">导出
          </el-button>
          <el-button type="warning"
                      size="small"
                      plain
                      icon="el-icon-pie-chart"
                      @click="handleExportStatis">导出报表
          </el-button>
        </template>

      <template slot="menuLeft">
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
          >导出
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-pie-chart"
          @click="handleExportStatis"
          >导出报表
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {getList} from "@/api/healthcode/healthcode";
  import {mapGetters} from "vuex";
import { getList } from "@/api/healthcode/healthcode";
import { mapGetters } from "vuex";

  export default {
    data() {
export default {
  data() {
    return {
      form: {},
      query: {},
      search: {},
      loading: true,
      activeClass: 0,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        menu: false,
        height: "auto",
        calcHeight: 54,
        border: false,
        //stripe:true,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        index: true,
        viewBtn: true,
        selection: true,
        labelWidth: 120,
        dialogClickModal: false,
        headerAlign: "center",
        align: "center",
        column: [
          {
            label: "坐标",
            prop: "test",
            hide: true,
            span: 24,
            component: "avueMap",
            clickChild: (obj) => {
              this.form.jd = obj.latitude;
              this.form.wd = obj.longitude;
            },
          },
          {
            label: "检测时间",
            prop: "dtime",
          },
          {
            label: "性别",
            prop: "sex",
          },
          {
            label: "检测时间",
            prop: "dateTime",
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            searchRange: true,
            searchValue: [this.getStartTime(), this.getEndTime()],
            searchSpan: 5,
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "省份",
            prop: "province",
            //search: true,
            searchSpan: 3,
            type: "select",
            props: {
              label: "name",
              value: "name",
            },
            cascaderItem: ["city", "district"],
            dicUrl: "/api/blade-system/region/select",
            span: 6,
          },
          {
            label: "地市",
            prop: "city",
            type: "select",
            searchSpan: 3,
            //search: true,
            props: {
              label: "name",
              value: "name",
            },
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 6,
          },
          {
            label: "区县",
            searchSpan: 3,
            //search: true,
            prop: "district",
            type: "select",
            props: {
              label: "name",
              value: "name",
            },
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 6,
          },
          {
            label: "健康码颜色",
            search: true,
            searchLabelWidth: 120,
            prop: "type",
            searchSpan: 4,
            searchValue: this.getHealthcodeType(),
            width: 210,
            type: "select",
            dicData: [
              {
                label: "绿色",
                value: "1",
              },
              {
                label: "黄色",
                value: "2",
              },
              {
                label: "红色",
                value: "3",
              },
            ],
          },
        ],
      },
      data: [],
      isActive: false,
      recorder: null,
    };
  },
  mounted() {},
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        form: {},
        query: {},
        search:{},
        loading: true,
        activeClass: 0,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          menu:false,
          height:'auto',
          calcHeight: 54,
          border: false,
          stripe:true,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          index: true,
          viewBtn: true,
          selection: true,
          labelWidth:120,
          dialogClickModal: false,
          headerAlign: 'center',
          align: 'center',
          column: [
            {
              label: '坐标',
              prop: 'test',
              hide: true,
              span: 24,
              component: "avueMap",
              clickChild: (obj) => {
                this.form.jd = obj.latitude
                this.form.wd = obj.longitude
              },
            },
            {
              label: "检测时间",
              prop: "dtime"
            },
            {
              label: '性别',
              prop: 'sex'
            },
            {
              label: "检测时间",
              prop: "dateTime",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              searchRange: true,
              searchValue:[this.getStartTime(),this.getEndTime()],
              searchSpan: 5,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入时间",
                  trigger: "blur"
                }
              ]
            },
            {
              label: '省份',
              prop: 'province',
              //search: true,
              searchSpan: 3,
              type: 'select',
              props: {
                label: 'name',
                value: 'name'
              },
              cascaderItem: ['city', 'district'],
              dicUrl: '/api/blade-system/region/select',
              span: 6,
            },
            {
              label: '地市',
              prop: 'city',
              type: 'select',
              searchSpan: 3,
              //search: true,
              props: {
                label: 'name',
                value: 'name'
              },
              dicUrl: '/api/blade-system/region/select?code={{key}}',
              span: 6,
            },
            {
              label: '区县',
              searchSpan: 3,
              //search: true,
              prop: 'district',
              type: 'select',
              props: {
                label: 'name',
                value: 'name'
              },
              dicUrl: '/api/blade-system/region/select?code={{key}}',
              span: 6,
            },
            {
              label: "健康码颜色",
              search: true,
              searchLabelWidth:120,
              prop: "type",
              searchSpan: 4,
              searchValue: this.getHealthcodeType(),
              width:210,
              type: "select",
              dicData: [
                {
                  label: "绿色",
                  value: "1"
                },
                {
                  label: "黄色",
                  value: "2"
                },
                {
                  label: "红色",
                  value: "3"
                }
              ],
            }
          ]
        },
        data: [],
        isActive: false,
        recorder: null,
        addBtn: this.vaildData(null, false),
        viewBtn: this.vaildData(null, false),
        delBtn: this.vaildData(null, false),
        editBtn: this.vaildData(null, false),
      };
    },
    mounted(){

    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
  },
  methods: {
    beforeOpen(done, type) {},
    searchReset() {
      //清空搜索框中的内容
      this.query = {};
      //清空this.$route.query
      this.$router.push({ query: {} });
      this.activeClass = 0;
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      //清空this.$route.query
      this.$router.push({ query: {} });
      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);
    },
    rowStyle({ row, column, rowIndex }) {
      if (row.type == "3") {
        return {
          addBtn: this.vaildData(null, false),
          viewBtn: this.vaildData(null, false),
          delBtn: this.vaildData(null, false),
          editBtn: this.vaildData(null, false)
          color: "#fe1515",
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      beforeOpen(done, type) {
      },
      searchReset() {
        //清空搜索框中的内容
        this.query = {};
        //清空this.$route.query
        this.$router.push({ query: {} });
        this.activeClass=0;
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        //清空this.$route.query
        this.$router.push({ query: {} });
        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);
      },
      rowStyle({row, column, rowIndex}){
         if(row.type=="3"){
           return {
             color:"#fe1515"
           }
         }
      },
      getStartTime(){
           if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
             return this.$route.query.startTime
           }
           // 当前时间
          var date = new Date();
          //年
          var Y = date.getFullYear();
          //月
          var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
          //日
          var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
           return Y + "-" + M + "-" + D;
      },
      getEndTime(){
           if (this.$route.query.endTime != undefined && this.$route.query.endTime != null && this.$route.query.endTime != "" ) {
             return this.$route.query.endTime
           }
            // 当前时间
            var date = new Date();
            //年
            var Y = date.getFullYear();
            //月
            var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            //日
            var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return Y + "-" + M + "-" + D;
      },
      getHealthcodeType(){
          if (this.$route.query.type != undefined) {
              var type = this.$route.query.type+"";
              //this.$route.query = {};
              return type;
          }
      },
      getHealthcodeData(e) {
        var that = this;
        this.query={};
        this.$router.push({ query: {} });
        that.activeClass = e;
        //status 0:本日  1：本月  2：本年   type: 1:绿色   2：黄色  3：红色
        var today = new Date();
        var params ={};
        if(e==0){
          //修改搜索框中的值
          this.search.releaseTimeRange=[this.showToDay(today)+" 00:00:00",this.showToDay(today)+" 23:59:59"]
        }
        if(e==1){
          //修改搜索框中的值
          this.search.releaseTimeRange=[this.showWeekFirstDay(today)+" 00:00:00",this.showToDay(today)+" 23:59:59"]
        }
        if(e==2){
          //修改搜索框中的值
          this.search.releaseTimeRange=[this.showMonthFirstDay(today)+" 00:00:00",this.showToDay(today)+" 23:59:59"]
        }
        params = {
          ... params,
          status: e
        };
        if(this.search.type){
          params = {
            ... params,
            type: this.search.type
          };
        }
        this.query=params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      },
      //本日
      showToDay(Nowdate){
        var M=Number(Nowdate.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        var day = Nowdate.getDate();
        if(day<10){
          day = "0"+day;
        }
        return Nowdate.getFullYear()+"-"+M+"-"+day;
      },

      //本周第一天
      showWeekFirstDay(Nowdate){
        var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
        var M=Number(WeekFirstDay.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        var day = WeekFirstDay.getDate();
        if(day<10){
          day = "0"+day;
        }
        return WeekFirstDay.getFullYear()+"-"+M+"-"+day;
      },

      //本月第一天
      showMonthFirstDay(Nowdate){
        var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
        var M=Number(MonthFirstDay.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+MonthFirstDay.getDate();
      },
      //数据导出
      handleExport() {
        this.$confirm("是否导出健康码数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          window.open(`/api/healthcode/healthcode/export-healthcode?begTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&type=${this.$route.query.type}&timeDesc=${this.$route.query.timeDesc}`);
        });
      },
      //数据报表导出
      handleExportStatis() {
          let begTime = this.$route.query.startTime==undefined? '':this.$route.query.startTime;
          let endTime = this.$route.query.endTime==undefined? '':this.$route.query.endTime;
          let type = this.$route.query.type==undefined? '':this.$route.query.type;
          let timeDesc = this.$route.query.timeDesc==undefined? '':this.$route.query.timeDesc;
          //window.open(`http://localhost:8108/ureport/excel?_u=blade-healthcode.statis.xml.ureport.xml&begTime=${begTime}&endTime=${endTime}&type=${type}&timeDesc=${timeDesc}`);
          window.open(`https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-healthcode.statis.xml.ureport.xml&begTime=${begTime}&endTime=${endTime}&type=${type}&timeDesc=${timeDesc}`);
      },
      onLoad(page, params={}) {
        const { dateTime } = this.query;
        let values = {
          ...params,
        };
        if (this.$route.query.status!=undefined && this.$route.query != undefined && this.$route.query != null && this.$route.query != "" ) {
            if (this.$route.query.type != undefined) {
              this.page.currentPage = 1;
              params = {
                status:this.$route.query.status,
                type:this.$route.query.type
              }
            } else {
              this.page.currentPage = 1;
              params = {
                type:this.$route.query.status
              };
            }
            this.activeClass =4;
        }else if(this.$route.query.type != undefined){
          params = {
            type: this.$route.query.type,
            begTime: this.$route.query.startTime,
            endTime: this.$route.query.endTime
          }
          this.activeClass =4;
        }
        // else{
        //   params = {
        //       status:this.$route.query.status,
        //       type:this.$route.query.type
        //   }
        // }

        if(this.activeClass == 0 && this.query.dateTime==null){
          params = {
              status:this.activeClass,
          }
        }

        if (dateTime) {
          this.activeClass =4;
          values = {
            ...params,
            begTime: dateTime[0],
            endTime: dateTime[1],
            ...this.query,
          };
          values.dateTime = null;
        } else {
          values = {
            ...params,
            ...this.query,
          };
        }

        if (this.$route.query.timeDesc) {
          values = {
            ...params,
            timeDesc: this.$route.query.timeDesc,
            ...this.query,
          };
        }

        this.loading = true;
        getList(page.currentPage, page.pageSize,values).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
    getStartTime() {
      if (
        this.$route.query.startTime != undefined &&
        this.$route.query.startTime != null &&
        this.$route.query.startTime != ""
      ) {
        return this.$route.query.startTime;
      }
    }
  };
      // 当前时间
      var date = new Date();
      //年
      var Y = date.getFullYear();
      //月
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "-" + M + "-" + D;
    },
    getEndTime() {
      if (
        this.$route.query.endTime != undefined &&
        this.$route.query.endTime != null &&
        this.$route.query.endTime != ""
      ) {
        return this.$route.query.endTime;
      }
      // 当前时间
      var date = new Date();
      //年
      var Y = date.getFullYear();
      //月
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "-" + M + "-" + D;
    },
    getHealthcodeType() {
      if (this.$route.query.type != undefined) {
        var type = this.$route.query.type + "";
        //this.$route.query = {};
        return type;
      }
    },
    getHealthcodeData(e) {
      var that = this;
      this.query = {};
      this.$router.push({ query: {} });
      that.activeClass = e;
      //status 0:本日  1：本月  2：本年   type: 1:绿色   2：黄色  3：红色
      var today = new Date();
      var params = {};
      if (e == 0) {
        //修改搜索框中的值
        this.search.releaseTimeRange = [
          this.showToDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      if (e == 1) {
        //修改搜索框中的值
        this.search.releaseTimeRange = [
          this.showWeekFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      if (e == 2) {
        //修改搜索框中的值
        this.search.releaseTimeRange = [
          this.showMonthFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      params = {
        ...params,
        status: e,
      };
      if (this.search.type) {
        params = {
          ...params,
          type: this.search.type,
        };
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    //本日
    showToDay(Nowdate) {
      var M = Number(Nowdate.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = Nowdate.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return Nowdate.getFullYear() + "-" + M + "-" + day;
    },

    //本周第一天
    showWeekFirstDay(Nowdate) {
      var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);
      var M = Number(WeekFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = WeekFirstDay.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return WeekFirstDay.getFullYear() + "-" + M + "-" + day;
    },

    //本月第一天
    showMonthFirstDay(Nowdate) {
      var MonthFirstDay = new Date(
        Nowdate.getFullYear(),
        Nowdate.getMonth(),
        1
      );
      var M = Number(MonthFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      return (
        MonthFirstDay.getFullYear() +
        "-" +
        M +
        "-" +
        "0" +
        MonthFirstDay.getDate()
      );
    },
    //数据导出
    handleExport() {
      this.$confirm("是否导出健康码数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(
          `/api/healthcode/healthcode/export-healthcode?begTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&type=${this.$route.query.type}&timeDesc=${this.$route.query.timeDesc}`
        );
      });
    },
    //数据报表导出
    handleExportStatis() {
      let begTime =
        this.$route.query.startTime == undefined
          ? ""
          : this.$route.query.startTime;
      let endTime =
        this.$route.query.endTime == undefined ? "" : this.$route.query.endTime;
      let type =
        this.$route.query.type == undefined ? "" : this.$route.query.type;
      let timeDesc =
        this.$route.query.timeDesc == undefined
          ? ""
          : this.$route.query.timeDesc;
      //window.open(`http://localhost:8108/ureport/excel?_u=blade-healthcode.statis.xml.ureport.xml&begTime=${begTime}&endTime=${endTime}&type=${type}&timeDesc=${timeDesc}`);
      window.open(
        `https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-healthcode.statis.xml.ureport.xml&begTime=${begTime}&endTime=${endTime}&type=${type}&timeDesc=${timeDesc}`
      );
    },
    onLoad(page, params = {}) {
      const { dateTime } = this.query;
      let values = {
        ...params,
      };
      if (
        this.$route.query.status != undefined &&
        this.$route.query != undefined &&
        this.$route.query != null &&
        this.$route.query != ""
      ) {
        if (this.$route.query.type != undefined) {
          this.page.currentPage = 1;
          params = {
            status: this.$route.query.status,
            type: this.$route.query.type,
          };
        } else {
          this.page.currentPage = 1;
          params = {
            type: this.$route.query.status,
          };
        }
        this.activeClass = 4;
      } else if (this.$route.query.type != undefined) {
        params = {
          type: this.$route.query.type,
          begTime: this.$route.query.startTime,
          endTime: this.$route.query.endTime,
        };
        this.activeClass = 4;
      }
      // else{
      //   params = {
      //       status:this.$route.query.status,
      //       type:this.$route.query.type
      //   }
      // }

      if (this.activeClass == 0 && this.query.dateTime == null) {
        params = {
          status: this.activeClass,
        };
      }

      if (dateTime) {
        this.activeClass = 4;
        values = {
          ...params,
          begTime: dateTime[0],
          endTime: dateTime[1],
          ...this.query,
        };
        values.dateTime = null;
      } else {
        values = {
          ...params,
          ...this.query,
        };
      }

      if (this.$route.query.timeDesc) {
        values = {
          ...params,
          timeDesc: this.$route.query.timeDesc,
          ...this.query,
        };
      }

      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>
<style scoped>
  .el-button.btn-color {
    color: rgb(255, 255, 255);
    background-color: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
  }
.el-button.btn-color {
  color: rgb(255, 255, 255);
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}
</style>

 src/views/parcel/parcel.vue

@@ -1,27 +1,28 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               :row-style="rowStyle"
               :search.sync="search"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @row-click="rowClick"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">

    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      :row-style="rowStyle"
      :search.sync="search"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @row-click="rowClick"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <!-- <template slot-scope="{ type, size, row }" slot="menu">

        <el-button
@@ -35,490 +36,561 @@
      </template> -->

      <template slot="menuLeft">
          <el-button
            v-bind:class="activeClass == 0 ? 'btn-color' : ''"
            size="small "
            @click="getParcelData(0)"
            >本日
          </el-button>
          <el-button
            v-bind:class="activeClass == 1 ? 'btn-color' : ''"
            size="small "
            @click="getParcelData(1)"
            >本周
          </el-button>
          <el-button
            v-bind:class="activeClass == 2 ? 'btn-color' : ''"
            size="small "
            @click="getParcelData(2)"
            >本月
          </el-button>
        </template>
        <el-button
          v-bind:class="activeClass == 0 ? 'btn-color' : ''"
          size="small "
          @click="getParcelData(0)"
          >本日
        </el-button>
        <el-button
          v-bind:class="activeClass == 1 ? 'btn-color' : ''"
          size="small "
          @click="getParcelData(1)"
          >本周
        </el-button>
        <el-button
          v-bind:class="activeClass == 2 ? 'btn-color' : ''"
          size="small "
          @click="getParcelData(2)"
          >本月
        </el-button>
      </template>

      <template slot="menuLeft">
          <el-button type="warning"
                      size="small"
                      plain
                      icon="el-icon-download"
                      @click="handleExport">导出
          </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
          >导出
        </el-button>

          <el-button type="warning"
                      size="small"
                      plain
                      icon="el-icon-pie-chart"
                      @click="handleExportStatis">导出报表
          </el-button>
        </template>

        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-pie-chart"
          @click="handleExportStatis"
          >导出报表
        </el-button>
      </template>
    </avue-crud>
    <template>
      <div>
          <el-image-viewer
              class="img"
              v-if="showViewer"
              :on-close="closeViewer"
              :url-list="['data:image/png;base64,'+imgUrl]" />
        <el-image-viewer
          class="img"
          v-if="showViewer"
          :on-close="closeViewer"
          :url-list="['data:image/png;base64,' + imgUrl]"
        />
      </div>
    </template>

  </basic-container>
</template>

<script>
  import {getList,exportParcelStatis, getParcelPic} from "@/api/parcel/parcel";
  import {mapGetters} from "vuex";
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { getList, exportParcelStatis, getParcelPic } from "@/api/parcel/parcel";
import { mapGetters } from "vuex";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

  export default {
    name:'index',
    components: { ElImageViewer },
    data() {
      return {
        form: {},
        query: {},
        search:{},
        showViewer: false, // 显示查看器
        activeClass: 0,
        imgUrl:'',
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          menu:false,
          height:'auto',
          calcHeight: 54,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: false,
          stripe:true,
          index: true,
          viewBtn: true,
          selection: true,
          labelWidth:120,
          menuWidth:220,
          dialogClickModal: false,
          headerAlign: 'center',
          align: 'center',
          tree:true,
          column: [
            {
              label: '坐标',
              prop: 'test',
              hide: true,
              span: 50,
              component: "avueMap",
              clickChild: (obj) => {
                this.form.jd = obj.latitude
                this.form.wd = obj.longitude
export default {
  name: "index",
  components: { ElImageViewer },
  data() {
    return {
      form: {},
      query: {},
      search: {},
      showViewer: false, // 显示查看器
      activeClass: 0,
      imgUrl: "",
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        menu: false,
        height: "auto",
        calcHeight: 54,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        //stripe:true,
        index: true,
        viewBtn: true,
        selection: true,
        labelWidth: 120,
        menuWidth: 220,
        dialogClickModal: false,
        headerAlign: "center",
        align: "center",
        tree: true,
        column: [
          {
            label: "坐标",
            prop: "test",
            hide: true,
            span: 50,
            component: "avueMap",
            clickChild: (obj) => {
              this.form.jd = obj.latitude;
              this.form.wd = obj.longitude;
            },
          },
          {
            label: "安检机名称",
            prop: "checkMachineName",
          },
          {
            label: "包裹ID",
            prop: "packageId",
          },
          {
            label: "包裹图片KEY",
            prop: "imgUrl",
            hide: true,
          },
          // {
          //   label: '包裹图片',
          //   prop: 'imgUrl',
          //   type: 'upload',
          //   width: 300,
          //   listType: 'data:image/png;base64',
          //   span: 24,
          //   propsHttp: {
          //     res: 'data'
          //   },
          //   canvasOption: {
          //     text: 'avue',
          //     ratio: 0.1
          //   }
          // },
          {
            label: "安检时间",
            prop: "samplingTime",
          },
          {
            label: "安检时间",
            prop: "dateTime",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            searchRange: true,
            searchSpan: 8,
            searchValue: [this.getStartTime(), this.getEndTime()],
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入时间",
                trigger: "blur",
              },
            },
            {
              label: "安检机名称",
              prop: "checkMachineName",
            },
            {
              label: "包裹ID",
              prop: "packageId",
            },
            {
              label: "包裹图片KEY",
              prop: "imgUrl",
              hide:true
            },
            // {
            //   label: '包裹图片',
            //   prop: 'imgUrl',
            //   type: 'upload',
            //   width: 300,
            //   listType: 'data:image/png;base64',
            //   span: 24,
            //   propsHttp: {
            //     res: 'data'
            //   },
            //   canvasOption: {
            //     text: 'avue',
            //     ratio: 0.1
            //   }
            // },
            {
              label: "安检时间",
              prop: "samplingTime",
            },
            {
              label: "安检时间",
              prop: "dateTime",
              type: "datetime",
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              searchRange: true,
              searchSpan: 8,
              searchValue:[this.getStartTime(),this.getEndTime()],
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入时间",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "是否违禁",
              prop: "mechineMark",
              dicData: [
                {
                  label: "是",
                  value: 1
                },
                {
                  label: "否",
                  value: 0
                },
              ]
            },
            {
              label: "是否违禁",
              search: true,
              searchValue: this.getIsKindParams(),
              searchLabelWidth: 120,
              searchSpan: 4,
              hide: true,
              prop: "decisioDiagramResult",
              type: "select",
              dicData: [
                {
                  label: "是",
                  value: "contraband"
                },
                {
                  label: "否",
                  value: "normal"
                },
              ]
            },
            {
              label: "违禁包裹物品",
              prop: "decisioDiagramResultDetails",
            }
          ]
        },
        data: []
            ],
          },
          {
            label: "是否违禁",
            prop: "mechineMark",
            dicData: [
              {
                label: "是",
                value: 1,
              },
              {
                label: "否",
                value: 0,
              },
            ],
          },
          {
            label: "是否违禁",
            search: true,
            searchValue: this.getIsKindParams(),
            searchLabelWidth: 120,
            searchSpan: 4,
            hide: true,
            prop: "decisioDiagramResult",
            type: "select",
            dicData: [
              {
                label: "是",
                value: "contraband",
              },
              {
                label: "否",
                value: "normal",
              },
            ],
          },
          {
            label: "违禁包裹物品",
            prop: "decisioDiagramResultDetails",
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(null, false),
        viewBtn: this.vaildData(null, false),
        delBtn: this.vaildData(null, false),
        editBtn: this.vaildData(null, false),
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(null, false),
          viewBtn: this.vaildData(null, false),
          delBtn: this.vaildData(null, false),
          editBtn: this.vaildData(null, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    beforeOpen(done, type) {
      done();
    },
    searchReset() {
      //清空搜索框中的内容
      this.query = {};
      //清空this.$route.query
      this.$router.push({ query: {} });
      this.activeClass = 0;
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      //清空this.$route.query
      this.$router.push({ query: {} });
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    rowClick(row) {
      var that = this;
      getParcelPic(row.imgUrl).then((res) => {
        that.imgUrl = res.data.data.imgBase64;
        this.showViewer = true;
      });
    },
    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);
    },
    getStartTime() {
      if (
        this.$route.query.startTime != undefined &&
        this.$route.query.startTime != null &&
        this.$route.query.startTime != ""
      ) {
        return this.$route.query.startTime;
      }
      // 当前时间
      var date = new Date();
      //年
      var Y = date.getFullYear();
      //月
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "-" + M + "-" + D + " 00:00:00";
    },
    getEndTime() {
      if (
        this.$route.query.endTime != undefined &&
        this.$route.query.endTime != null &&
        this.$route.query.endTime != ""
      ) {
        return this.$route.query.endTime;
      }
      // 当前时间
      var date = new Date();
      //年
      var Y = date.getFullYear();
      //月
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "-" + M + "-" + D + " 23:59:59";
    },
    getIsKindParams() {
      if (
        this.$route.query.decisioDiagramResult &&
        this.$route.query != "" &&
        this.$route.query != null &&
        this.$route.query != undefined
      ) {
        //回显
        return this.$route.query.decisioDiagramResult;
      }
    },
    methods: {
      beforeOpen(done, type) {
        done();
      },
      searchReset() {
        //清空搜索框中的内容
        this.query = {};
        //清空this.$route.query
        this.$router.push({ query: {} });
        this.activeClass=0;
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        //清空this.$route.query
        this.$router.push({ query: {} });
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      rowClick(row){
        var that=this;
        getParcelPic(row.imgUrl).then(res => {
            that.imgUrl = res.data.data.imgBase64;
            this.showViewer = true
          });
      },
      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);
      },
      getStartTime(){
           if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
             return this.$route.query.startTime
           }
           // 当前时间
    //给行加颜色
    rowStyle({ row, column, rowIndex }) {
      if (row.mechineMark == 1) {
        return {
          color: "#fe1515",
        };
      }
    },
    getParcelData(e) {
      var that = this;
      this.query = {};
      //清空this.$route.query
      this.$router.push({ query: {} });
      that.activeClass = e;
      var today = new Date();
      var params = {};
      if (e == 0) {
        params = {
          startTime: this.showToDay(today) + " 00:00:00",
          endTime: this.showToDay(today) + " 23:59:59",
        };
        //修改搜索框中的值
        this.search.dateTime = [
          this.showToDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      if (e == 1) {
        params = {
          startTime: this.showWeekFirstDay(today) + " 00:00:00",
          endTime: this.showToDay(today) + " 23:59:59",
        };
        //修改搜索框中的值
        this.search.dateTime = [
          this.showWeekFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      if (e == 2) {
        params = {
          startTime: this.showMonthFirstDay(today) + " 00:00:00",
          endTime: this.showToDay(today) + " 23:59:59",
        };
        //修改搜索框中的值
        this.search.dateTime = [
          this.showMonthFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }

      if (this.search.decisioDiagramResult) {
        params = {
          ...params,
          decisioDiagramResult: this.search.decisioDiagramResult,
        };
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    //本日
    showToDay(Nowdate) {
      var M = Number(Nowdate.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = Nowdate.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return Nowdate.getFullYear() + "-" + M + "-" + day;
    },

    //本周第一天
    showWeekFirstDay(Nowdate) {
      var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);
      var M = Number(WeekFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = WeekFirstDay.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return WeekFirstDay.getFullYear() + "-" + M + "-" + day;
    },

    //本月第一天
    showMonthFirstDay(Nowdate) {
      var MonthFirstDay = new Date(
        Nowdate.getFullYear(),
        Nowdate.getMonth(),
        1
      );
      var M = Number(MonthFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      return (
        MonthFirstDay.getFullYear() +
        "-" +
        M +
        "-" +
        "0" +
        MonthFirstDay.getDate()
      );
    },
    //数据导出
    handleExport() {
      this.$confirm("是否导出包裹数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(
          `/api/parcel/parcel/export-parcel?startTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&decisioDiagramResult=${this.$route.query.decisioDiagramResult}`
        );
      });
    },
    //数据报表导出
    handleExportStatis() {
      let startTime =
        this.$route.query.startTime == undefined
          ? ""
          : this.$route.query.startTime;
      let endTime =
        this.$route.query.endTime == undefined ? "" : this.$route.query.endTime;
      let decisioDiagramResult =
        this.$route.query.decisioDiagramResult == undefined
          ? ""
          : this.$route.query.decisioDiagramResult;
      let timeDesc =
        this.$route.query.timeDesc == undefined
          ? ""
          : this.$route.query.timeDesc;
      //window.open(`http://localhost:8108/ureport/excel?_u=blade-parcel.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`);
      window.open(
        `https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-parcel.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`
      );
    },
    onLoad(page, params = {}) {
      const { dateTime } = this.query;
      let values = {
        ...params,
      };

      if (
        this.$route.query.decisioDiagramResult &&
        this.$route.query != "" &&
        this.$route.query != null &&
        this.$route.query != undefined
      ) {
        if (
          this.$route.query.startTime != undefined &&
          this.$route.query.startTime != null &&
          this.$route.query.startTime != ""
        ) {
          this.page.currentPage = 1;
          params = {
            startTime: this.$route.query.startTime,
            endTime: this.$route.query.endTime,
            decisioDiagramResult: this.$route.query.decisioDiagramResult,
          };
        } else {
          this.page.currentPage = 1;
          params = {
            decisioDiagramResult: this.$route.query.decisioDiagramResult,
          };
        }
        this.activeClass = 4;
      } else {
        if (
          this.$route.query.startTime != undefined &&
          this.$route.query.startTime != null &&
          this.$route.query.startTime != ""
        ) {
          this.page.currentPage = 1;
          params = {
            startTime: this.$route.query.startTime,
            endTime: this.$route.query.endTime,
          };
          this.activeClass = 4;
        }

        if (this.activeClass == 0) {
          this.page.currentPage = 1;
          // 当前时间
          var date = new Date();
          //年
          var Y = date.getFullYear();
          //月
          var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
          var M =
            date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1;
          //日
          var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
           return Y + "-" + M + "-" + D+ " 00:00:00";
      },
      getEndTime(){
           if (this.$route.query.endTime != undefined && this.$route.query.endTime != null && this.$route.query.endTime != "" ) {
             return this.$route.query.endTime
           }
            // 当前时间
            var date = new Date();
            //年
            var Y = date.getFullYear();
            //月
            var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            //日
            var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return Y + "-" + M + "-" + D+ " 23:59:59";
      },
      getIsKindParams(){
        if(this.$route.query.decisioDiagramResult && this.$route.query!='' && this.$route.query!=null && this.$route.query!=undefined){
          //回显
          return this.$route.query.decisioDiagramResult
        }
      },
      //给行加颜色
      rowStyle({row, column, rowIndex}){
         if(row.mechineMark==1){
           return {
             color:"#fe1515"
           }
         }
      },
      getParcelData(e) {
        var that = this;
        this.query={};
        //清空this.$route.query
        this.$router.push({ query: {} });
        that.activeClass = e;
        var today = new Date();
        var params ={};
        if(e==0){
          params = {
            startTime:this.showToDay(today)+ " 00:00:00",
            endTime:this.showToDay(today)+ " 23:59:59"
            startTime: Y + "-" + M + "-" + D + " 00:00:00",
            endTime: Y + "-" + M + "-" + D + " 23:59:59",
          };
          //修改搜索框中的值
          this.search.dateTime=[this.showToDay(today)+ " 00:00:00",this.showToDay(today)+ " 23:59:59"]
        }
        if(e==1){
          params = {
            startTime:this.showWeekFirstDay(today)+ " 00:00:00",
            endTime:this.showToDay(today)+ " 23:59:59"
          };
          //修改搜索框中的值
          this.search.dateTime=[this.showWeekFirstDay(today)+ " 00:00:00",this.showToDay(today)+ " 23:59:59"]
        }
        if(e==2){
          params = {
            startTime:this.showMonthFirstDay(today)+ " 00:00:00",
            endTime:this.showToDay(today)+ " 23:59:59"
          };
          //修改搜索框中的值
          this.search.dateTime=[this.showMonthFirstDay(today)+ " 00:00:00",this.showToDay(today)+ " 23:59:59"]
        }

        if(this.search.decisioDiagramResult){
          params= {
            ... params,
            decisioDiagramResult:this.search.decisioDiagramResult
          }
        }
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      },
      //本日
      showToDay(Nowdate){
        var M=Number(Nowdate.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        var day = Nowdate.getDate();
        if(day<10){
          day = "0"+day;
        }
        return Nowdate.getFullYear()+"-"+M+"-"+day;
      },

      //本周第一天
      showWeekFirstDay(Nowdate){
        var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
        var M=Number(WeekFirstDay.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        var day = WeekFirstDay.getDate();
        if(day<10){
          day = "0"+day;
        }
        return WeekFirstDay.getFullYear()+"-"+M+"-"+day;
      },

      //本月第一天
      showMonthFirstDay(Nowdate){
        var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
        var M=Number(MonthFirstDay.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+MonthFirstDay.getDate();
      },
      //数据导出
      handleExport() {
        this.$confirm("是否导出包裹数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          window.open(`/api/parcel/parcel/export-parcel?startTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&decisioDiagramResult=${this.$route.query.decisioDiagramResult}`);
        });
      },
      //数据报表导出
      handleExportStatis() {
          let startTime = this.$route.query.startTime==undefined? '':this.$route.query.startTime;
          let endTime = this.$route.query.endTime==undefined? '':this.$route.query.endTime;
          let decisioDiagramResult = this.$route.query.decisioDiagramResult==undefined? '':this.$route.query.decisioDiagramResult;
          let timeDesc = this.$route.query.timeDesc==undefined? '':this.$route.query.timeDesc;
          //window.open(`http://localhost:8108/ureport/excel?_u=blade-parcel.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`);
          window.open(`https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-parcel.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`);
      },
      onLoad(page, params={}) {
        const { dateTime } = this.query;
        let values = {
          ...params,
        };

        if (this.$route.query.decisioDiagramResult && this.$route.query!='' && this.$route.query!=null && this.$route.query!=undefined ) {
            if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
              this.page.currentPage = 1;
              params = {
                startTime:this.$route.query.startTime,
                endTime:this.$route.query.endTime,
                decisioDiagramResult:this.$route.query.decisioDiagramResult
              }
            } else {
              this.page.currentPage = 1;
              params = {
                decisioDiagramResult:this.$route.query.decisioDiagramResult
              };
            }
            this.activeClass=4;
        }else{
            if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
              this.page.currentPage = 1;
              params = {
                startTime:this.$route.query.startTime,
                endTime:this.$route.query.endTime
              }
              this.activeClass=4;
            }

            if(this.activeClass==0){
              this.page.currentPage = 1;
              // 当前时间
              var date = new Date();
              //年
              var Y = date.getFullYear();
              //月
              var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
              //日
              var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
              params = {
                startTime:Y + "-" + M + "-" + D + " 00:00:00",
                endTime:Y +"-" +M +"-" + D +  " 23:59:59"
              }
            }
        }

        if (dateTime) {
          values = {
            ...params,
            startTime: dateTime[0],
            endTime: dateTime[1],
            ...this.query,
          };
          values.dateTime = null;
        } else {
          values = {
            ...params,
            ...this.query,
          };

        }
        this.loading = true;
        getList(page.currentPage, page.pageSize,values).then(res => {
          const data = res.data.data;
          this.page.total = data.totalSize;
          this.data = data.data;
          this.loading = false;
          this.selectionClear();
        });
      },
      // 关闭查看器
      closeViewer() {
        this.showViewer = false
      }
    }
  };

      if (dateTime) {
        values = {
          ...params,
          startTime: dateTime[0],
          endTime: dateTime[1],
          ...this.query,
        };
        values.dateTime = null;
      } else {
        values = {
          ...params,
          ...this.query,
        };
      }
      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
        this.page.total = data.totalSize;
        this.data = data.data;
        this.loading = false;
        this.selectionClear();
      });
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false;
    },
  },
};
</script>
<style lang="scss">
    .img {
      .el-icon-circle-close {
        color: white;
      }
    }
.img {
  .el-icon-circle-close {
    color: white;
  }
}
</style>

 src/views/parcel/parcelKind.vue

@@ -1,26 +1,28 @@
<template>
    <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               :row-style="rowStyle"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @row-click="rowClick"
               :search.sync="search"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      :row-style="rowStyle"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @row-click="rowClick"
      :search.sync="search"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <!-- <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          v-if="row.imgUrl != null || row.imgUrl != ''"
@@ -31,462 +33,521 @@
          >查看包裹图片
        </el-button>
      </template> -->
       <template slot="menuLeft">
          <el-button
            v-bind:class="activeClass == 0 ? 'btn-color' : ''"
            size="small "
            @click="getParcelKindData(0)"
            >本日
          </el-button>
          <el-button
            v-bind:class="activeClass == 1 ? 'btn-color' : ''"
            size="small "
            @click="getParcelKindData(1)"
            >本周
          </el-button>
          <el-button
            v-bind:class="activeClass == 2 ? 'btn-color' : ''"
            size="small "
            @click="getParcelKindData(2)"
            >本月
          </el-button>
        </template>
      <template slot="menuLeft">
        <el-button
          v-bind:class="activeClass == 0 ? 'btn-color' : ''"
          size="small "
          @click="getParcelKindData(0)"
          >本日
        </el-button>
        <el-button
          v-bind:class="activeClass == 1 ? 'btn-color' : ''"
          size="small "
          @click="getParcelKindData(1)"
          >本周
        </el-button>
        <el-button
          v-bind:class="activeClass == 2 ? 'btn-color' : ''"
          size="small "
          @click="getParcelKindData(2)"
          >本月
        </el-button>
      </template>

       <template slot="menuLeft">
          <el-button type="warning"
                      size="small"
                      plain
                      icon="el-icon-download"
                      @click="handleExport">导出
          </el-button>
          <el-button type="warning"
                      size="small"
                      plain
                      icon="el-icon-pie-chart"
                      @click="handleExportStatis">导出报表
          </el-button>
        </template>
      <template slot="menuLeft">
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
          >导出
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-pie-chart"
          @click="handleExportStatis"
          >导出报表
        </el-button>
      </template>
    </avue-crud>
    <template>
      <div>
        <el-image-viewer
                     class="img"
                     v-if="showViewer"
                     :on-close="closeViewer"
                     :url-list="['data:image/png;base64,'+imgUrl]" />
          class="img"
          v-if="showViewer"
          :on-close="closeViewer"
          :url-list="['data:image/png;base64,' + imgUrl]"
        />
      </div>
    </template>
    </basic-container>

  </basic-container>
</template>


<script>
  import {getKindList, getParcelPic} from "@/api/parcel/parcel";
  import {mapGetters} from "vuex";
  import Vue from 'vue';
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  Vue.use(ElementUI)
import { getKindList, getParcelPic } from "@/api/parcel/parcel";
import { mapGetters } from "vuex";
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
Vue.use(ElementUI);


  export default {
    name:'index',
    components: { ElImageViewer },
    data() {
      return {
        form: {},
        query: {},
        search:{},
        showViewer: false, // 显示查看器
        activeClass:0,
        imgUrl:'',
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          menu:false,
          height:'auto',
          calcHeight: 54,
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
          menuWidth:150,
          border: false,
          stripe:true,
          index: true,
          viewBtn: true,
          selection: true,
          labelWidth:150,
          dialogClickModal: false,
          headerAlign: 'center',
          align: 'center',
          tree:true,
          column: [
            {
              label: '坐标',
              prop: 'test',
              hide: true,
              span: 100,
              component: "avueMap",
              clickChild: (obj) => {
                this.form.jd = obj.latitude
                this.form.wd = obj.longitude
export default {
  name: "index",
  components: { ElImageViewer },
  data() {
    return {
      form: {},
      query: {},
      search: {},
      showViewer: false, // 显示查看器
      activeClass: 0,
      imgUrl: "",
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        menu: false,
        height: "auto",
        calcHeight: 54,
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        menuWidth: 150,
        border: false,
        //stripe:true,
        index: true,
        viewBtn: true,
        selection: true,
        labelWidth: 150,
        dialogClickModal: false,
        headerAlign: "center",
        align: "center",
        tree: true,
        column: [
          {
            label: "坐标",
            prop: "test",
            hide: true,
            span: 100,
            component: "avueMap",
            clickChild: (obj) => {
              this.form.jd = obj.latitude;
              this.form.wd = obj.longitude;
            },
          },
          {
            label: "包裹ID",
            prop: "packageId",
          },
          {
            label: "包裹图片KEY",
            prop: "imgUrl",
            hide: true,
          },
          {
            label: "安检时间",
            prop: "createTime",
          },
          {
            label: "安检时间",
            prop: "dateTime",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            searchRange: true,
            searchValue: [this.getStartTime(), this.getEndTime()],
            searchSpan: 8,
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入时间",
                trigger: "blur",
              },
            },
            {
              label: "包裹ID",
              prop: "packageId",
            },
            {
              label: "包裹图片KEY",
              prop: "imgUrl",
              hide:true
            },
            {
              label: "安检时间",
              prop: "createTime",
            },
            {
              label: "安检时间",
              prop: "dateTime",
              type: "datetime",
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              searchRange: true,
              searchValue: [this.getStartTime(),this.getEndTime()],
              searchSpan: 8,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入时间",
                  trigger: "blur"
                }
              ]
            },
            // {
            //   label: "违禁类型",
            //   search: true,
            //   searchLabelWidth: 120,
            //   searchSpan: 4,
            //   hide: true,
            //   prop: "decisioDiagramResult",
            //   type: "select",
            //   dicData: [
            //     {
            //       label: "是",
            //       value: "contraband"
            //     },
            //     {
            //       label: "否",
            //       value: "normal"
            //     },
            //   ]
            // },
            {
              label: '违禁品名称',
              prop: 'objName'
            },
            {
              label: '违禁品编号',
              prop: 'objCode'
            },
            {
              label: '等级',
              prop: 'levName',
              span:120
            },
            {
              label: '坐标',
              prop: 'coords',
              span:500
            }
          ]
        },
        data: [],
        flag: false
            ],
          },
          // {
          //   label: "违禁类型",
          //   search: true,
          //   searchLabelWidth: 120,
          //   searchSpan: 4,
          //   hide: true,
          //   prop: "decisioDiagramResult",
          //   type: "select",
          //   dicData: [
          //     {
          //       label: "是",
          //       value: "contraband"
          //     },
          //     {
          //       label: "否",
          //       value: "normal"
          //     },
          //   ]
          // },
          {
            label: "违禁品名称",
            prop: "objName",
          },
          {
            label: "违禁品编号",
            prop: "objCode",
          },
          {
            label: "等级",
            prop: "levName",
            span: 120,
          },
          {
            label: "坐标",
            prop: "coords",
            span: 500,
          },
        ],
      },
      data: [],
      flag: false,
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(null, false),
        viewBtn: this.vaildData(null, false),
        delBtn: this.vaildData(null, false),
        editBtn: this.vaildData(null, false),
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(null, false),
          viewBtn: this.vaildData(null, false),
          delBtn: this.vaildData(null, false),
          editBtn: this.vaildData(null, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    methods: {
      beforeOpen(done, type) {

        done();
      },
      searchReset() {
        //清空搜索框中的内容
        this.query = {};
        //清空this.$route.query
        this.$router.push({ query: {} });
        this.activeClass=0;
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        //清空this.$route.query
        this.$router.push({ query: {} });
        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();
      },
      rowClick(row){
        var that=this;
        getParcelPic(row.imgUrl).then(res => {
            that.imgUrl = res.data.data.imgBase64;
            this.showViewer = true
          });
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      getStartTime(){
           if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
             return this.$route.query.startTime
           }
           // 当前时间
          var date = new Date();
          //年
          var Y = date.getFullYear();
          //月
          var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
          //日
          var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
           return Y + "-" + M + "-" + D+ " 00:00:00";
      },
      getEndTime(){
           if (this.$route.query.endTime != undefined && this.$route.query.endTime != null && this.$route.query.endTime != "" ) {
             return this.$route.query.endTime
           }
            // 当前时间
            var date = new Date();
            //年
            var Y = date.getFullYear();
            //月
            var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            //日
            var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return Y + "-" + M + "-" + D+ " 23:59:59";
      },
      getParcelKindData(e) {
        var that = this;
        this.query={};
        //清空this.$route.query
        this.$router.push({ query: {} });
        that.activeClass = e;
        var today = new Date();
        var params ={};
        if(e==0){
          params = {
            startTime:this.showToDay(today)+ " 00:00:00",
            endTime:this.showToDay(today)+ " 23:59:59"
          };
          //修改搜索框中的值
          this.search.dateTime=[this.showToDay(today)+ " 00:00:00",this.showToDay(today)+ " 23:59:59"]
        }
        if(e==1){
          params = {
            startTime:this.showWeekFirstDay(today)+ " 00:00:00",
            endTime:this.showToDay(today)+ " 23:59:59"
          };
          //修改搜索框中的值
          this.search.dateTime=[this.showWeekFirstDay(today)+ " 00:00:00",this.showToDay(today)+ " 23:59:59"]
        }
        if(e==2){
          params = {
            startTime:this.showMonthFirstDay(today)+ " 00:00:00",
            endTime:this.showToDay(today)+ " 23:59:59"
          };
          //修改搜索框中的值
          this.search.dateTime=[this.showMonthFirstDay(today)+ " 00:00:00",this.showToDay(today)+ " 23:59:59"]
        }
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      },
      //本日
      showToDay(Nowdate){
        var M=Number(Nowdate.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        var day = Nowdate.getDate();
        if(day<10){
          day = "0"+day;
        }
        return Nowdate.getFullYear()+"-"+M+"-"+day;
      },

      //本周第一天
      showWeekFirstDay(Nowdate){
        var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
        var M=Number(WeekFirstDay.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        var day = WeekFirstDay.getDate();
        if(day<10){
          day = "0"+day;
        }
        return WeekFirstDay.getFullYear()+"-"+M+"-"+day;
      },

      //本月第一天
      showMonthFirstDay(Nowdate){
        var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
        var M=Number(MonthFirstDay.getMonth())+1;
        if(M<10){
          M="0"+M;
        }
        return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+MonthFirstDay.getDate();
      },
      //给行加颜色
      rowStyle({row, column, rowIndex}){
        return {
          color:"#fe1515"
        }
      },
      //数据导出
      handleExport() {
        this.$confirm("是否导出违禁品数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          window.open(`/api/parcel/parcel/export-parcelKind?startTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&decisioDiagramResult=${this.$route.query.decisioDiagramResult}&timeDesc=${this.$route.query.timeDesc}`);
        });
      },
      //数据报表导出
      handleExportStatis() {
          let startTime = this.$route.query.startTime==undefined? '':this.$route.query.startTime;
          let endTime = this.$route.query.endTime==undefined? '':this.$route.query.endTime;
          let decisioDiagramResult = this.$route.query.decisioDiagramResult==undefined? '':this.$route.query.decisioDiagramResult;
          let timeDesc = this.$route.query.timeDesc;
          //window.open(`http://localhost:8108/ureport/excel?_u=blade-parcelKind.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`);
          //window.open(`http://localhost:8108/ureport/preview?_u=blade-parcelKind.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`);
          window.open(`https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-parcelKind.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`);
      },
      onLoad(page, params={}) {
        const { dateTime } = this.query;
        let values = {
          ...params,
        };

        if (this.$route.query.decisioDiagramResult && this.$route.query != undefined && this.$route.query != null && this.$route.query != "" ) {
            if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
              this.page.currentPage = 1;
              params = {
                startTime:this.$route.query.startTime,
                endTime:this.$route.query.endTime,
                decisioDiagramResult:this.$route.query.decisioDiagramResult
              }
            } else {
              this.page.currentPage = 1;
              params = {
                decisioDiagramResult:this.$route.query.decisioDiagramResult
              };
            }
            this.activeClass=4;
        }

        if(this.activeClass==0){
          this.page.currentPage = 1;
          // 当前时间
          var date = new Date();
          //年
          var Y = date.getFullYear();
          //月
          var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
          //日
          var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
          params = {
            startTime:Y + "-" + M + "-" + D + " 00:00:00",
            endTime:Y +"-" +M +"-" + D +  " 23:59:59"
          }
        }

        if (dateTime) {
          values = {
            ...params,
            startTime: dateTime[0],
            endTime: dateTime[1],
            ...this.query,
          };
          values.dateTime = null;
        } else {
          values = {
            ...params,
            ...this.query,
          };
        }

        if (this.$route.query.timeDesc) {
          values = {
            ...params,
            timeDesc: this.$route.query.timeDesc,
            ...this.query,
          };
        }

        this.loading = true;
        getKindList(page.currentPage, page.pageSize,values).then(res => {
          const data = res.data.data;
          this.page.total = data.totalSize;
          this.data = data.data;
          this.loading = false;
          this.selectionClear();
        });
      },
      // 关闭查看器
      closeViewer() {
        this.showViewer = false
  },
  methods: {
    beforeOpen(done, type) {
      done();
    },
    searchReset() {
      //清空搜索框中的内容
      this.query = {};
      //清空this.$route.query
      this.$router.push({ query: {} });
      this.activeClass = 0;
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      //清空this.$route.query
      this.$router.push({ query: {} });
      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();
    },
    rowClick(row) {
      var that = this;
      getParcelPic(row.imgUrl).then((res) => {
        that.imgUrl = res.data.data.imgBase64;
        this.showViewer = true;
      });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    getStartTime() {
      if (
        this.$route.query.startTime != undefined &&
        this.$route.query.startTime != null &&
        this.$route.query.startTime != ""
      ) {
        return this.$route.query.startTime;
      }
    }
  };
      // 当前时间
      var date = new Date();
      //年
      var Y = date.getFullYear();
      //月
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "-" + M + "-" + D + " 00:00:00";
    },
    getEndTime() {
      if (
        this.$route.query.endTime != undefined &&
        this.$route.query.endTime != null &&
        this.$route.query.endTime != ""
      ) {
        return this.$route.query.endTime;
      }
      // 当前时间
      var date = new Date();
      //年
      var Y = date.getFullYear();
      //月
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "-" + M + "-" + D + " 23:59:59";
    },
    getParcelKindData(e) {
      var that = this;
      this.query = {};
      //清空this.$route.query
      this.$router.push({ query: {} });
      that.activeClass = e;
      var today = new Date();
      var params = {};
      if (e == 0) {
        params = {
          startTime: this.showToDay(today) + " 00:00:00",
          endTime: this.showToDay(today) + " 23:59:59",
        };
        //修改搜索框中的值
        this.search.dateTime = [
          this.showToDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      if (e == 1) {
        params = {
          startTime: this.showWeekFirstDay(today) + " 00:00:00",
          endTime: this.showToDay(today) + " 23:59:59",
        };
        //修改搜索框中的值
        this.search.dateTime = [
          this.showWeekFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      if (e == 2) {
        params = {
          startTime: this.showMonthFirstDay(today) + " 00:00:00",
          endTime: this.showToDay(today) + " 23:59:59",
        };
        //修改搜索框中的值
        this.search.dateTime = [
          this.showMonthFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    //本日
    showToDay(Nowdate) {
      var M = Number(Nowdate.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = Nowdate.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return Nowdate.getFullYear() + "-" + M + "-" + day;
    },

    //本周第一天
    showWeekFirstDay(Nowdate) {
      var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);
      var M = Number(WeekFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = WeekFirstDay.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return WeekFirstDay.getFullYear() + "-" + M + "-" + day;
    },

    //本月第一天
    showMonthFirstDay(Nowdate) {
      var MonthFirstDay = new Date(
        Nowdate.getFullYear(),
        Nowdate.getMonth(),
        1
      );
      var M = Number(MonthFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      return (
        MonthFirstDay.getFullYear() +
        "-" +
        M +
        "-" +
        "0" +
        MonthFirstDay.getDate()
      );
    },
    //给行加颜色
    rowStyle({ row, column, rowIndex }) {
      return {
        color: "#fe1515",
      };
    },
    //数据导出
    handleExport() {
      this.$confirm("是否导出违禁品数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(
          `/api/parcel/parcel/export-parcelKind?startTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&decisioDiagramResult=${this.$route.query.decisioDiagramResult}&timeDesc=${this.$route.query.timeDesc}`
        );
      });
    },
    //数据报表导出
    handleExportStatis() {
      let startTime =
        this.$route.query.startTime == undefined
          ? ""
          : this.$route.query.startTime;
      let endTime =
        this.$route.query.endTime == undefined ? "" : this.$route.query.endTime;
      let decisioDiagramResult =
        this.$route.query.decisioDiagramResult == undefined
          ? ""
          : this.$route.query.decisioDiagramResult;
      let timeDesc = this.$route.query.timeDesc;
      //window.open(`http://localhost:8108/ureport/excel?_u=blade-parcelKind.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`);
      //window.open(`http://localhost:8108/ureport/preview?_u=blade-parcelKind.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`);
      window.open(
        `https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-parcelKind.statis.ureport.xml&startTime=${startTime}&endTime=${endTime}&decisioDiagramResult=${decisioDiagramResult}&timeDesc=${timeDesc}`
      );
    },
    onLoad(page, params = {}) {
      const { dateTime } = this.query;
      let values = {
        ...params,
      };

      if (
        this.$route.query.decisioDiagramResult &&
        this.$route.query != undefined &&
        this.$route.query != null &&
        this.$route.query != ""
      ) {
        if (
          this.$route.query.startTime != undefined &&
          this.$route.query.startTime != null &&
          this.$route.query.startTime != ""
        ) {
          this.page.currentPage = 1;
          params = {
            startTime: this.$route.query.startTime,
            endTime: this.$route.query.endTime,
            decisioDiagramResult: this.$route.query.decisioDiagramResult,
          };
        } else {
          this.page.currentPage = 1;
          params = {
            decisioDiagramResult: this.$route.query.decisioDiagramResult,
          };
        }
        this.activeClass = 4;
      }

      if (this.activeClass == 0) {
        this.page.currentPage = 1;
        // 当前时间
        var date = new Date();
        //年
        var Y = date.getFullYear();
        //月
        var M =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        //日
        var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        params = {
          startTime: Y + "-" + M + "-" + D + " 00:00:00",
          endTime: Y + "-" + M + "-" + D + " 23:59:59",
        };
      }

      if (dateTime) {
        values = {
          ...params,
          startTime: dateTime[0],
          endTime: dateTime[1],
          ...this.query,
        };
        values.dateTime = null;
      } else {
        values = {
          ...params,
          ...this.query,
        };
      }

      if (this.$route.query.timeDesc) {
        values = {
          ...params,
          timeDesc: this.$route.query.timeDesc,
          ...this.query,
        };
      }

      this.loading = true;
      getKindList(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
        this.page.total = data.totalSize;
        this.data = data.data;
        this.loading = false;
        this.selectionClear();
      });
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false;
    },
  },
};
</script>
<style lang="scss">
    .img {
      .el-icon-circle-close {
        color: white;
      }
    }
.img {
  .el-icon-circle-close {
    color: white;
  }
}
</style>

 src/views/realTimePolice/real.vue

@@ -22,8 +22,8 @@
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @row-click="rowClick">

      @row-click="rowClick"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
@@ -33,7 +33,7 @@
          plain
          v-if="permission.real_delete"
          @click="handleDelete"
        >删 除
          >删 除
        </el-button>
      </template>

@@ -42,25 +42,25 @@
          v-bind:class="activeClass == 0 ? 'btn-color' : ''"
          size="mini"
          @click="getBRdata(0)"
        >本日
          >本日
        </el-button>
        <el-button
          v-bind:class="activeClass == 1 ? 'btn-color' : ''"
          size="mini"
          @click="getBRdata(1)"
        >本周
          >本周
        </el-button>
        <el-button
          v-bind:class="activeClass == 2 ? 'btn-color' : ''"
          size="mini"
          @click="getBRdata(2)"
        >本月
          >本月
        </el-button>
        <el-button
          v-bind:class="activeClass == 3 ? 'btn-color' : ''"
          size="mini"
          @click="getQBdata(3)"
        >全部
          >全部
        </el-button>
      </template>

@@ -71,7 +71,7 @@
          plain
          icon="el-icon-download"
          @click="handleExport"
        >导出
          >导出
        </el-button>
        <el-button
          type="warning"
@@ -79,23 +79,29 @@
          plain
          icon="el-icon-pie-chart"
          @click="handleExportStatis"
        >导出报表
          >导出报表
        </el-button>
      </template>

      <template slot-scope="{ row }" slot="jtype">
        <el-tag
        >{{
          row.jtype == "0" || row.jtype == "" ? "未派发" : row.jtype == "1" && (row.securityId == null || row.securityId
          == "")
          ? "未接收" : row.jtype == "1" && (row.securityId != null || row.securityId != "") ? "已接收" : "已处置"
          >{{
            row.jtype == "0" || row.jtype == ""
              ? "未派发"
              : row.jtype == "1" &&
                (row.securityId == null || row.securityId == "")
              ? "未接收"
              : row.jtype == "1" &&
                (row.securityId != null || row.securityId != "")
              ? "已接收"
              : "已处置"
          }}
        </el-tag>
      </template>
      <template slot-scope="{ row }" slot="cid">
        <el-tag
        >{{
          row.cid == "1" ? "事件发生" : row.cid == "3" ? "是" : "事件恢复"
          >{{
            row.cid == "1" ? "事件发生" : row.cid == "3" ? "是" : "事件恢复"
          }}
        </el-tag>
      </template>
@@ -107,7 +113,7 @@
          :size="size"
          :type="type"
          @click.stop="PoliceTracking(row)"
        >派发
          >派发
        </el-button>
      </template>
    </avue-crud>
@@ -126,725 +132,696 @@
</template>

<script>
  import {getList, remove, update, add, getclient} from "@/api/real/real";
  import {mapGetters} from "vuex";
  import AvueMap from "avue-plugin-map";
import { getList, remove, update, add, getclient } from "@/api/real/real";
import { mapGetters } from "vuex";
import AvueMap from "avue-plugin-map";

  export default {
    data() {
      return {
        showMap: false,
        hls: "",
        videoSource: "",
        activeClass: 3,
        form: {},
        query: {},
        search: {},
        dateTime: [],
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        selectionList: [],
        option: {
          height: "auto",
          indexLabel: "序号",
          calcHeight: 54,
          labelWidth: "100",
          size: "mini",
          border: false,
          stripe: true,
          menuWidth: 240,
          dialogWidth: 950,
          tip: false,
          searchShow: true,
          searchMenuSpan: 3,
          align: "center",
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
            {
              label: "任务类型",
              prop: "alarmType",
              search: false,
              searchSpan: 3,
              width: 85,
              className: "waringTypeClass",
              searchPlaceholder: "请选择",
              type: "select",
              props: {
                label: "dictValue",
                value: "dictValue",
              },
              //cascaderItem: ["city", "district"],
              dicUrl:
                "/api/blade-system/dict-biz/child-list?parentId=1356523651644043266",
              control:(val,form)=>{
                if (val){
                  debugger
                }
                return {
                  text2:{
                    display:true
                  },
                  text3:{
                    label:'内容3'
                  }
                }
              },
export default {
  data() {
    return {
      showMap: false,
      hls: "",
      videoSource: "",
      activeClass: 3,
      form: {},
      query: {},
      search: {},
      dateTime: [],
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "auto",
        indexLabel: "序号",
        calcHeight: 54,
        labelWidth: "100",
        size: "mini",
        border: false,
        //stripe:true,
        menuWidth: 240,
        dialogWidth: 950,
        tip: false,
        searchShow: true,
        searchMenuSpan: 3,
        align: "center",
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "任务类型",
            prop: "alarmType",
            search: false,
            searchSpan: 3,
            width: 85,
            className: "waringTypeClass",
            searchPlaceholder: "请选择",
            type: "select",
            props: {
              label: "dictValue",
              value: "dictValue",
            },
            {
              label: "下发时间",
              type: "datetime",
              width: 160,
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              prop: "alarmTime",
              rules: [{
            //cascaderItem: ["city", "district"],
            dicUrl:
              "/api/blade-system/dict-biz/child-list?parentId=1356523651644043266",
            control: (val, form) => {
              if (val) {
                debugger;
              }
              return {
                text2: {
                  display: true,
                },
                text3: {
                  label: "内容3",
                },
              };
            },
          },
          {
            label: "下发时间",
            type: "datetime",
            width: 160,
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            prop: "alarmTime",
            rules: [
              {
                required: true,
                message: "请选择报警时间",
                trigger: "blur"
              }],
            },
            {
              label: "报警时间",
              prop: "releaseTimeRange",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              searchValue: [this.getStartTime(), this.getEndTime()],
              searchRange: true,
              searchSpan: 5,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入时间",
                  trigger: "blur",
                },
              ],
            }, {
              label: "备注",
              prop: "bz",
              span: 24,
            },
            {
              label: "地址",
              prop: "place",
              span: 10,
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "报警时间",
            prop: "releaseTimeRange",
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            searchValue: [this.getStartTime(), this.getEndTime()],
            searchRange: true,
            searchSpan: 5,
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "备注",
            prop: "bz",
            span: 24,
          },
          {
            label: "地址",
            prop: "place",
            span: 10,
            rules: [
              {
                required: true,
                message: "请选择地址",
                trigger: "blur"
              }],
            },
            {
              label: null,
              prop: "map",
              labelWidth: "0",
              searchSpan: 0,
              maxlength: 0,
              hide: true,
              span: 2,
              // display:false,
              component: "AvueMap",
            },
            {
              label: "经度",
              hide: true,
              prop: "jd",
              searchSpan: 2,
              width: "100",
              labelWidth: "120",
              formatter: (row, value, label, column) => {
                return value = value.substring(0, 11);
                trigger: "blur",
              },
              span: 7,
            ],
          },
          {
            label: null,
            prop: "map",
            labelWidth: "0",
            searchSpan: 0,
            maxlength: 0,
            hide: true,
            span: 2,
            // display:false,
            component: "AvueMap",
          },
          {
            label: "经度",
            hide: true,
            prop: "jd",
            searchSpan: 2,
            width: "100",
            labelWidth: "120",
            formatter: (row, value, label, column) => {
              return (value = value.substring(0, 11));
            },
            {
              label: "纬度",
              labelWidth: "45",
              hide: true,
              prop: "wd",
              formatter: (row, value, label, column) => {
                return value = value.substring(0, 10);
            span: 7,
          },
          {
            label: "纬度",
            labelWidth: "45",
            hide: true,
            prop: "wd",
            formatter: (row, value, label, column) => {
              return (value = value.substring(0, 10));
            },
            span: 5,
          },
          {
            label: "省份",
            prop: "province",
            search: true,
            searchSpan: 2,
            searchLabelWidth: 45,
            placeholder: "省份",
            type: "select",
            props: {
              label: "name",
              value: "code",
            },
            cascaderItem: ["city", "district"],
            dicUrl: "/api/blade-system/region/select",
            span: 6,
            className: "cityreal1",
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            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: "cityreal2",
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            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: "cityreal3",
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "状态",
            searchSpan: 3,
            width: 96,
            search: true,
            slot: true,
            addDisplay: false,
            searchPlaceholder: "请选择",
            prop: "jtype",
            type: "select",
            dicData: [
              {
                label: "未派发",
                value: "0",
              },
              span: 5,
            },
            {
              label: "省份",
              prop: "province",
              search: true,
              searchSpan: 2,
              searchLabelWidth: 45,
              placeholder: "省份",
              type: "select",
              props: {
                label: "name",
                value: "code",
              {
                label: "处理中",
                value: "1",
              },
              cascaderItem: ["city", "district"],
              dicUrl: "/api/blade-system/region/select",
              span: 6,
              className: "cityreal1",
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "地市",
              prop: "city",
              type: "select",
              searchPlaceholder: "地市",
              placeholder: "地市",
              searchLabelWidth: 1,
              searchSpan: 2,
              search: true,
              props: {
                label: "name",
                value: "code",
              {
                label: "已处置",
                value: "2",
              },
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityreal2",
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            ],
          },
          // {
          //   label: "派发人",
          //   prop: "alarmPeople",
          //   width: 90,
          //   addDisplay: false,
          //   editDisplay: false,
          // },
          {
            label: "处警员",
            prop: "securityArr",
            type: "tree",
            multiple: true,
            dicUrl: "/api/catalogs/catalogs/getBigTree",
            props: {
              label: "title",
            },
            {
              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: "cityreal3",
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            width: 72,
            hide: true,
            leafOnly: "",
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "巡逻路线",
            prop: "xllx",
            hide: true,
            display: true,
            type: "tree",
            filter: false,
            dicUrl: "/api/routeIn/routein/tree",
            props: {
              label: "title",
            },
            {
              label: "状态",
              searchSpan: 3,
              width: 96,
              search: true,
              slot: true,
              addDisplay: false,
              searchPlaceholder: "请选择",
              prop: "jtype",
              type: "select",
              dicData: [
                {
                  label: "未派发",
                  value: "0",
                },
                {
                  label: "处理中",
                  value: "1",
                },
                {
                  label: "已处置",
                  value: "2",
                },
              ],
            },
            // {
            //   label: "派发人",
            //   prop: "alarmPeople",
            //   width: 90,
            //   addDisplay: false,
            //   editDisplay: false,
            // },
            {
              label: "处警员",
              prop: "securityArr",
              type: "tree",
              multiple: true,
              dicUrl: "/api/catalogs/catalogs/getBigTree",
              props: {
                label: "title"
              },
              width: 72,
              hide: true,
              leafOnly: "",
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "巡逻路线",
              prop: "xllx",
              hide: true,
              display:true,
              type: "tree",
              filter:false,
              dicUrl: "/api/routeIn/routein/tree",
              props: {
                label: "title"
              },
            }
          ],
        },
        data: [],
        recorder: null,
        peopleList: [],
      };
    },
    watch: {
      "form.map": {
        // form是表单或者表格绑定的数据集，v-model='form'
        handler(val) {
          var that = this;
          if (val) {
            //重新加载一次页面详情数据，解决新的省市区无法写入问题
            //判断是新增还是修改
            if (that.isEdit) {
              getclient(this.form.id).then(res => {
                // that.province = res.data.data.province;
                // that.city = res.data.data.city;
                // that.district = res.data.data.district;
              });
            }

            //地址截取，从县/区开始截取,并且取从县区第一个出现的位置开始
            if (val.formattedAddress == "") {
              return;
            }

            //经纬度替换
            this.form.wd = val.latitude;
            this.form.jd = val.longitude;

            var address = val.formattedAddress.toString();
            if (address.search("县") != -1) {
              this.form.place = address.substring(address.indexOf("县") + 1, address.length);
            }
            if (address.search("区") != -1) {
              this.form.place = 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;
          } else {
            that.form.map = {
              formattedAddress: "",
              latitude: 28.68235075592195,
              longitude: 115.9021417169273,
            };
          }
        },
        immediate: true,
          },
        ],
      },
      'form.alarmType':{
        handler(val){
          var xllx =this.findObject(this.option.column,'xllx')
          if(val==="巡逻任务"){
            xllx.display=true
            xllx.rules=[{
      data: [],
      recorder: null,
      peopleList: [],
    };
  },
  watch: {
    "form.map": {
      // form是表单或者表格绑定的数据集，v-model='form'
      handler(val) {
        var that = this;
        if (val) {
          //重新加载一次页面详情数据，解决新的省市区无法写入问题
          //判断是新增还是修改
          if (that.isEdit) {
            getclient(this.form.id).then((res) => {
              // that.province = res.data.data.province;
              // that.city = res.data.data.city;
              // that.district = res.data.data.district;
            });
          }

          //地址截取，从县/区开始截取,并且取从县区第一个出现的位置开始
          if (val.formattedAddress == "") {
            return;
          }

          //经纬度替换
          this.form.wd = val.latitude;
          this.form.jd = val.longitude;

          var address = val.formattedAddress.toString();
          if (address.search("县") != -1) {
            this.form.place = address.substring(
              address.indexOf("县") + 1,
              address.length
            );
          }
          if (address.search("区") != -1) {
            this.form.place = 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;
        } else {
          that.form.map = {
            formattedAddress: "",
            latitude: 28.68235075592195,
            longitude: 115.9021417169273,
          };
        }
      },
      immediate: true,
    },
    "form.alarmType": {
      handler(val) {
        var xllx = this.findObject(this.option.column, "xllx");
        if (val === "巡逻任务") {
          xllx.display = true;
          xllx.rules = [
            {
              required: true,
              message: "请选择巡逻路线",
              trigger: "blur"
            }]
          }else{
            xllx.display=false
            xllx.rules=[]
          }
        },
        immediate: true
              trigger: "blur",
            },
          ];
        } else {
          xllx.display = false;
          xllx.rules = [];
        }
      },
      immediate: true,
    },
    computed: {
      ...mapGetters(["permission", "flowRoutes"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.real_add, false),
          viewBtn: this.vaildData(null, false),
          delBtn: this.vaildData(this.permission.real_delete, false),
          editBtn: this.vaildData(this.permission.real_edit, false),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
          ids.push(ele.id);
  },
  computed: {
    ...mapGetters(["permission", "flowRoutes"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.real_add, false),
        viewBtn: this.vaildData(null, false),
        delBtn: this.vaildData(this.permission.real_delete, false),
        editBtn: this.vaildData(this.permission.real_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  created() {
    this.dateTime = this.getDate();
  },
  methods: {
    rowSave(row, done, loading) {
      if (typeof row.securityArr != "string") {
        var security = "";
        row.securityArr.forEach((item) => {
          security = security + item + ",";
        });
        return ids.join(",");
      },
        row.securityArr = security.substring(0, security.length - 1);
      }
      var userId = JSON.parse(
        window.localStorage.getItem("群防群控后台管理系统-userInfo")
      ).content.real_name;

      if (row.securityArr == "" || row.securityArr == null) {
        row.jtype = "0";
        row.alarmPeople = "";
      } else {
        row.jtype = "1";
        //已派发保安
        row.alarmPeople = userId;
      }

      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
        }
      );
    },
    created() {
      this.dateTime = this.getDate();
    rowUpdate(row, index, done, loading) {
      var userId = JSON.parse(
        window.localStorage.getItem("群防群控后台管理系统-userInfo")
      ).content.real_name;

      if (typeof row.securityArr != "string") {
        var security = "";
        row.securityArr.forEach((item) => {
          security = security + item + ",";
        });
        row.securityArr = security.substring(0, security.length - 1);
      }

      if (row.securityArr == "" || row.securityArr == null) {
        row.jtype = "0";
        row.alarmPeople = "";
      } else {
        row.jtype = "1";
        //已派发保安
        row.alarmPeople = userId;
      }

      row.coordinate = "";
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
        }
      );
    },
    methods: {
      rowSave(row, done, loading) {

        if (typeof row.securityArr != "string") {
          var security = "";
          row.securityArr.forEach((item) => {
            security = security + item + ",";
          });
          row.securityArr = security.substring(0, security.length - 1);
        }
        var userId = JSON.parse(
          window.localStorage.getItem("群防群控后台管理系统-userInfo")
        ).content.real_name;

        if (row.securityArr == "" || row.securityArr == null) {
          row.jtype = "0";
          row.alarmPeople = "";
        } else {
          row.jtype = "1";
          //已派发保安
          row.alarmPeople = userId;
        }

        add(row).then(
          () => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            done();
          },
          (error) => {
            loading();
          }
        );
      },
      rowUpdate(row, index, done, loading) {

        var userId = JSON.parse(
          window.localStorage.getItem("群防群控后台管理系统-userInfo")
        ).content.real_name;

        if (typeof row.securityArr != "string") {
          var security = "";
          row.securityArr.forEach((item) => {
            security = security + item + ",";
          });
          row.securityArr = security.substring(0, security.length - 1);
        }

        if (row.securityArr == "" || row.securityArr == null) {
          row.jtype = "0";
          row.alarmPeople = "";
        } else {
          row.jtype = "1";
          //已派发保安
          row.alarmPeople = userId;
        }

        row.coordinate = "";
        update(row).then(
          () => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            done();
          },
          (error) => {
            loading();
          }
        );
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
      },
      searchReset() {
        this.activeClass = 3;
        //清空搜索框中的内容
        this.query = {};
        //清空this.$route.query
        this.$router.push({query: {}});
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        //清空this.$route.query
        this.$router.push({query: {}});
        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();
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
    },
    searchReset() {
      this.activeClass = 3;
      //清空搜索框中的内容
      this.query = {};
      //清空this.$route.query
      this.$router.push({ query: {} });
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      //清空this.$route.query
      this.$router.push({ query: {} });
      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();
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$refs.crud.toggleSelection();
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getclient(this.form.id).then((res) => {
            this.form = res.data.data;
          });
        }
        done();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        const {releaseTimeRange} = this.query;
        let values = {
          ...params,
        };
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getclient(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      const { releaseTimeRange } = this.query;
      let values = {
        ...params,
      };

      if (
        this.$route.query.waringType &&
        this.$route.query != undefined &&
        this.$route.query != null &&
        this.$route.query != ""
      ) {
        if (
          this.$route.query.waringType &&
          this.$route.query != undefined &&
          this.$route.query != null &&
          this.$route.query != ""
          this.$route.query.status != undefined &&
          this.$route.query.status != null &&
          this.$route.query.status == ""
        ) {
          if (
            this.$route.query.status != undefined &&
            this.$route.query.status != null &&
            this.$route.query.status == ""
          ) {
            this.activeClass = this.$route.query.status;
            this.page.currentPage = 1;
            if (this.$route.query.status == 0) {
              params = {
                waringType: this.$route.query.waringType,
                beginTime: this.dateTime.day.beginTime,
                endTime: this.dateTime.day.endTime,
              };
            } else if (this.$route.query.status == 1) {
              params = {
                waringType: this.$route.query.waringType,
                beginTime: this.dateTime.week.beginTime,
                endTime: this.dateTime.week.endTime,
              };
            } else if (this.$route.query.status == 2) {
              params = {
                waringType: this.$route.query.waringType,
                beginTime: this.dateTime.month.beginTime,
                endTime: this.dateTime.month.endTime,
              };
            }
          } else {
            this.activeClass = 0;
            this.page.currentPage = 1;
          this.activeClass = this.$route.query.status;
          this.page.currentPage = 1;
          if (this.$route.query.status == 0) {
            params = {
              waringType: this.$route.query.waringType,
              beginTime: this.dateTime.day.beginTime,
              endTime: this.dateTime.day.endTime,
            };
          }

          if (
            this.$route.query.startTime != undefined &&
            this.$route.query.startTime != null &&
            this.$route.query.startTime != ""
          ) {
          } else if (this.$route.query.status == 1) {
            params = {
              waringType: this.$route.query.waringType,
              beginTime: this.$route.query.startTime,
              endTime: this.$route.query.endTime,
              beginTime: this.dateTime.week.beginTime,
              endTime: this.dateTime.week.endTime,
            };
          } else if (this.$route.query.status == 2) {
            params = {
              waringType: this.$route.query.waringType,
              beginTime: this.dateTime.month.beginTime,
              endTime: this.dateTime.month.endTime,
            };
          }
        }

        if (releaseTimeRange) {
          values = {
            ...params,
            beginTime: releaseTimeRange[0],
            endTime: releaseTimeRange[1],
            ...this.query,
          };
          values.releaseTimeRange = null;
        } else {
          values = {
            ...params,
            ...this.query,
          this.activeClass = 0;
          this.page.currentPage = 1;
          params = {
            waringType: this.$route.query.waringType,
            beginTime: this.dateTime.day.beginTime,
            endTime: this.dateTime.day.endTime,
          };
        }

        if (this.$route.query.timeDesc) {
          values = {
            ...params,
            timeDesc: this.$route.query.timeDesc,
            ...this.query,
        if (
          this.$route.query.startTime != undefined &&
          this.$route.query.startTime != null &&
          this.$route.query.startTime != ""
        ) {
          params = {
            waringType: this.$route.query.waringType,
            beginTime: this.$route.query.startTime,
            endTime: this.$route.query.endTime,
          };
        }
      }

        this.loading = true;
        getList(page.currentPage, page.pageSize, values).then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
      if (releaseTimeRange) {
        values = {
          ...params,
          beginTime: releaseTimeRange[0],
          endTime: releaseTimeRange[1],
          ...this.query,
        };
        values.releaseTimeRange = null;
      } else {
        values = {
          ...params,
          ...this.query,
        };
      }

          data.records.sort((a, b) => {
            return a.jtype - b.jtype;
          });
      if (this.$route.query.timeDesc) {
        values = {
          ...params,
          timeDesc: this.$route.query.timeDesc,
          ...this.query,
        };
      }

          this.data = data.records;
      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;

          this.loading = false;
          this.selectionClear();
        data.records.sort((a, b) => {
          return a.jtype - b.jtype;
        });
      },
      getDate() {
        // 当前时间
        var timestamp = Date.parse(new Date());
        var serverDate = new Date(timestamp);

        // 本周周一的时间
        var mondayTime =
          timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;
        var mondayData = new Date(mondayTime);
        //年
        var mondayY = mondayData.getFullYear();
        //月
        var mondayM =
          mondayData.getMonth() + 1 < 10
            ? "0" + (mondayData.getMonth() + 1)
            : mondayData.getMonth() + 1;
        //日
        var mondayD =
          mondayData.getDate() < 10
            ? "0" + mondayData.getDate()
            : mondayData.getDate();
        // 当前时间
        var currentData = new Date(timestamp);
        //年
        var currentY = currentData.getFullYear();
        //月
        var currentM =
          currentData.getMonth() + 1 < 10
            ? "0" + (currentData.getMonth() + 1)
            : currentData.getMonth() + 1;
        //日
        var currentD =
          currentData.getDate() < 10
            ? "0" + currentData.getDate()
            : currentData.getDate();
        //时
        var currenH =
          currentData.getHours() < 10
            ? "0" + currentData.getHours()
            : currentData.getHours();
        //分
        var currenM =
          currentData.getMinutes() < 10
            ? "0" + currentData.getMinutes()
            : currentData.getMinutes();
        //秒
        var currenS =
          currentData.getSeconds() < 10
            ? "0" + currentData.getSeconds()
            : currentData.getSeconds();
        this.data = data.records;

        return {
          day: {
            beginTime: currentY + "-" + currentM + "-" + currentD + " 00:00:00",
            endTime:
              currentY +
              "-" +
              currentM +
              "-" +
              currentD +
              " " +
              currenH +
              ":" +
              currenM +
              ":00",
          },
          week: {
            beginTime: mondayY + "-" + mondayM + "-" + mondayD + " 00:00:00",
            endTime:
              currentY +
              "-" +
              currentM +
              "-" +
              currentD +
              " " +
              currenH +
              ":" +
              currenM +
              ":00",
          },
          month: {
            beginTime: mondayY + "-" + mondayM + "-01 00:00:00",
            endTime:
              currentY +
              "-" +
              currentM +
              "-" +
              currentD +
              " " +
              currenH +
              ":" +
              currenM +
              ":00",
          },
          current:
        this.loading = false;
        this.selectionClear();
      });
    },
    getDate() {
      // 当前时间
      var timestamp = Date.parse(new Date());
      var serverDate = new Date(timestamp);

      // 本周周一的时间
      var mondayTime =
        timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;
      var mondayData = new Date(mondayTime);
      //年
      var mondayY = mondayData.getFullYear();
      //月
      var mondayM =
        mondayData.getMonth() + 1 < 10
          ? "0" + (mondayData.getMonth() + 1)
          : mondayData.getMonth() + 1;
      //日
      var mondayD =
        mondayData.getDate() < 10
          ? "0" + mondayData.getDate()
          : mondayData.getDate();
      // 当前时间
      var currentData = new Date(timestamp);
      //年
      var currentY = currentData.getFullYear();
      //月
      var currentM =
        currentData.getMonth() + 1 < 10
          ? "0" + (currentData.getMonth() + 1)
          : currentData.getMonth() + 1;
      //日
      var currentD =
        currentData.getDate() < 10
          ? "0" + currentData.getDate()
          : currentData.getDate();
      //时
      var currenH =
        currentData.getHours() < 10
          ? "0" + currentData.getHours()
          : currentData.getHours();
      //分
      var currenM =
        currentData.getMinutes() < 10
          ? "0" + currentData.getMinutes()
          : currentData.getMinutes();
      //秒
      var currenS =
        currentData.getSeconds() < 10
          ? "0" + currentData.getSeconds()
          : currentData.getSeconds();

      return {
        day: {
          beginTime: currentY + "-" + currentM + "-" + currentD + " 00:00:00",
          endTime:
            currentY +
            "-" +
            currentM +
@@ -854,398 +831,463 @@
            currenH +
            ":" +
            currenM +
            ":00",
        },
        week: {
          beginTime: mondayY + "-" + mondayM + "-" + mondayD + " 00:00:00",
          endTime:
            currentY +
            "-" +
            currentM +
            "-" +
            currentD +
            " " +
            currenH +
            ":" +
            currenS,
            currenM +
            ":00",
        },
        month: {
          beginTime: mondayY + "-" + mondayM + "-01 00:00:00",
          endTime:
            currentY +
            "-" +
            currentM +
            "-" +
            currentD +
            " " +
            currenH +
            ":" +
            currenM +
            ":00",
        },
        current:
          currentY +
          "-" +
          currentM +
          "-" +
          currentD +
          " " +
          currenH +
          ":" +
          currenM +
          ":" +
          currenS,
      };
    },
    getBRdata(e) {
      this.activeClass = e;
      this.query = {};
      this.$router.push({ query: {} });
      var today = new Date();
      var params = {};

      if (e == 0) {
        params = {
          beginTime: this.showToDay(today) + " 00:00:00",
          endTime: this.showToDay(today) + " 23:59:59",
        };
      },
      getBRdata(e) {
        this.activeClass = e;
        this.query = {};
        this.$router.push({query: {}});
        var today = new Date();
        var params = {};

        if (e == 0) {
          params = {
            beginTime: this.showToDay(today) + " 00:00:00",
            endTime: this.showToDay(today) + " 23:59:59",
          };
          //修改搜索框中的值
          this.search.releaseTimeRange = [this.showToDay(today) + " 00:00:00", this.showToDay(today) + " 23:59:59"]
        }
        if (e == 1) {
          params = {
            beginTime: this.showWeekFirstDay(today) + " 00:00:00",
            endTime: this.showToDay(today) + " 23:59:59",
          };
          //修改搜索框中的值
          this.search.releaseTimeRange = [this.showWeekFirstDay(today) + " 00:00:00", this.showToDay(today) + " 23:59:59"]
        }
        if (e == 2) {
          params = {
            beginTime: this.showMonthFirstDay(today) + " 00:00:00",
            endTime: this.showToDay(today) + " 23:59:59",
          };
          //修改搜索框中的值
          this.search.releaseTimeRange = [this.showMonthFirstDay(today) + " 00:00:00", this.showToDay(today) + " 23:59:59"]
        }
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      },
      //本日
      showToDay(Nowdate) {
        var M = Number(Nowdate.getMonth()) + 1;
        if (M < 10) {
          M = "0" + M;
        }
        var day = Nowdate.getDate();
        if (day < 10) {
          day = "0" + day;
        }
        return Nowdate.getFullYear() + "-" + M + "-" + day;
      },

      //本周第一天
      showWeekFirstDay(Nowdate) {
        var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);
        var M = Number(WeekFirstDay.getMonth()) + 1;
        if (M < 10) {
          M = "0" + M;
        }
        var day = WeekFirstDay.getDate();
        if (day < 10) {
          day = "0" + day;
        }
        return WeekFirstDay.getFullYear() + "-" + M + "-" + day;
      },

      //本月第一天
      showMonthFirstDay(Nowdate) {
        var MonthFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth(), 1);
        var M = Number(MonthFirstDay.getMonth()) + 1;
        if (M < 10) {
          M = "0" + M;
        }
        return MonthFirstDay.getFullYear() + "-" + M + "-" + "0" + MonthFirstDay.getDate();
      },
      getBZdata(e) {
        this.activeClass = e;
        var params = {
          beginTime: this.dateTime.week.beginTime,
          endTime: this.dateTime.week.endTime,
        //修改搜索框中的值
        this.search.releaseTimeRange = [
          this.showToDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      if (e == 1) {
        params = {
          beginTime: this.showWeekFirstDay(today) + " 00:00:00",
          endTime: this.showToDay(today) + " 23:59:59",
        };
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      },
      getBYdata(e) {
        this.activeClass = e;
        var params = {
          beginTime: this.dateTime.month.beginTime,
          endTime: this.dateTime.month.endTime,
        //修改搜索框中的值
        this.search.releaseTimeRange = [
          this.showWeekFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      if (e == 2) {
        params = {
          beginTime: this.showMonthFirstDay(today) + " 00:00:00",
          endTime: this.showToDay(today) + " 23:59:59",
        };
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      },
      getQBdata(e) {
        this.search.releaseTimeRange = ["", ""];
        this.activeClass = e;
        var params = {};
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
      },
      rowStyle({row, column, rowIndex}) {
        if (row.jtype == "0") {
          return {
            color: "#ff2727",
          };
        } else if (row.jtype == "1") {
          return {
            color: "#15a2fe",
          };
        } else {
          return {
            color: "#000000",
          };
        }
      },
      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,
        });
      },
      handleHistory(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/history/${row.deviceNumber}`});
      },
      handleMap(row) {
        this.showMap = true;
        this.$nextTick(() => {
          this.$refs.mapDiv.onload = () => {
            window.frames[1].init("ClientManagement", {x: row.jd, y: row.wd, clientID: row.deviceNumber});
          };
        });
      },
      getStartTime() {
        if (
          this.$route.query.startTime != undefined &&
          this.$route.query.startTime != null &&
          this.$route.query.startTime != ""
        ) {
          return this.$route.query.startTime;
        }
        return "";
      },
      getEndTime() {
        if (
          this.$route.query.endTime != undefined &&
          this.$route.query.endTime != null &&
          this.$route.query.endTime != ""
        ) {
          return this.$route.query.endTime;
        }
        return "";
      },
      handleManage(row) {
        this.$refs.realPopupView.onItemGetParentData(row);
      },
        //修改搜索框中的值
        this.search.releaseTimeRange = [
          this.showMonthFirstDay(today) + " 00:00:00",
          this.showToDay(today) + " 23:59:59",
        ];
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    //本日
    showToDay(Nowdate) {
      var M = Number(Nowdate.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = Nowdate.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return Nowdate.getFullYear() + "-" + M + "-" + day;
    },

      beginTimeOrEndTime(time) {
        var beginTime = new Date(time);
    //本周第一天
    showWeekFirstDay(Nowdate) {
      var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);
      var M = Number(WeekFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = WeekFirstDay.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return WeekFirstDay.getFullYear() + "-" + M + "-" + day;
    },

        var endTime = new Date(new Date(time).valueOf() - 1000 * 60 * 60 * 3);

        var beginY = beginTime.getFullYear();

        var beginM =
          beginTime.getMonth() + 1 < 10
            ? "0" + (beginTime.getMonth() + 1)
            : beginTime.getMonth() + 1;

        var beginD =
          beginTime.getDate() < 10
            ? "0" + beginTime.getDate()
            : beginTime.getDate();

        var beginH =
          beginTime.getHours() < 10
            ? "0" + beginTime.getHours()
            : beginTime.getHours();

        var beginm =
          beginTime.getMinutes() < 10
            ? "0" + beginTime.getMinutes()
            : beginTime.getMinutes();

        var begins =
          beginTime.getSeconds() < 10
            ? "0" + beginTime.getSeconds()
            : beginTime.getSeconds();

        var endY = endTime.getFullYear();

        var endM =
          endTime.getMonth() + 1 < 10
            ? "0" + (endTime.getMonth() + 1)
            : endTime.getMonth() + 1;

        var endD =
          endTime.getDate() < 10 ? "0" + endTime.getDate() : endTime.getDate();

        var endH =
          endTime.getHours() < 10 ? "0" + endTime.getHours() : endTime.getHours();

        var endm =
          endTime.getMinutes() < 10
            ? "0" + endTime.getMinutes()
            : endTime.getMinutes();

        var ends =
          endTime.getSeconds() < 10
            ? "0" + endTime.getSeconds()
            : endTime.getSeconds();
    //本月第一天
    showMonthFirstDay(Nowdate) {
      var MonthFirstDay = new Date(
        Nowdate.getFullYear(),
        Nowdate.getMonth(),
        1
      );
      var M = Number(MonthFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      return (
        MonthFirstDay.getFullYear() +
        "-" +
        M +
        "-" +
        "0" +
        MonthFirstDay.getDate()
      );
    },
    getBZdata(e) {
      this.activeClass = e;
      var params = {
        beginTime: this.dateTime.week.beginTime,
        endTime: this.dateTime.week.endTime,
      };
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    getBYdata(e) {
      this.activeClass = e;
      var params = {
        beginTime: this.dateTime.month.beginTime,
        endTime: this.dateTime.month.endTime,
      };
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    getQBdata(e) {
      this.search.releaseTimeRange = ["", ""];
      this.activeClass = e;
      var params = {};
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    rowStyle({ row, column, rowIndex }) {
      if (row.jtype == "0") {
        return {
          begin: beginY + beginM + beginD + beginH + beginm + begins,
          end: endY + endM + endD + endH + endm + ends,
          color: "#ff2727",
        };
      },

      PoliceTracking(row) {
        //警情追踪
        this.$router.push({path: "/policeTracking/track", query: row});
      },

      //数据导出
      handleExport() {
        this.$confirm("是否导出实时警情数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          window.open(
            `/api/alarm/alarm/export-alarm?beginTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&waringType=${this.$route.query.waringType}&timeDesc=${this.$route.query.timeDesc}`
          );
        });
      },
      //数据报表导出
      handleExportStatis() {
        let beginTime =
          this.$route.query.startTime == undefined
            ? ""
            : this.$route.query.startTime;
        let endTime =
          this.$route.query.endTime == undefined ? "" : this.$route.query.endTime;
        let waringType =
          this.$route.query.waringType == undefined
            ? ""
            : this.$route.query.waringType;
        let timeDesc =
          this.$route.query.timeDesc == undefined
            ? ""
            : this.$route.query.timeDesc;
        window.open(
          `https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`
        );
        //window.open(`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
      },
      rowClick(val) {//行点击事件
        //警情追踪
        this.$router.push({path: "/policeTracking/track", query: val});
      } else if (row.jtype == "1") {
        return {
          color: "#15a2fe",
        };
      } else {
        return {
          color: "#000000",
        };
      }
    },
  };
    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,
      });
    },
    handleHistory(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/history/${row.deviceNumber}` });
    },
    handleMap(row) {
      this.showMap = true;
      this.$nextTick(() => {
        this.$refs.mapDiv.onload = () => {
          window.frames[1].init("ClientManagement", {
            x: row.jd,
            y: row.wd,
            clientID: row.deviceNumber,
          });
        };
      });
    },
    getStartTime() {
      if (
        this.$route.query.startTime != undefined &&
        this.$route.query.startTime != null &&
        this.$route.query.startTime != ""
      ) {
        return this.$route.query.startTime;
      }
      return "";
    },
    getEndTime() {
      if (
        this.$route.query.endTime != undefined &&
        this.$route.query.endTime != null &&
        this.$route.query.endTime != ""
      ) {
        return this.$route.query.endTime;
      }
      return "";
    },
    handleManage(row) {
      this.$refs.realPopupView.onItemGetParentData(row);
    },

    beginTimeOrEndTime(time) {
      var beginTime = new Date(time);

      var endTime = new Date(new Date(time).valueOf() - 1000 * 60 * 60 * 3);

      var beginY = beginTime.getFullYear();

      var beginM =
        beginTime.getMonth() + 1 < 10
          ? "0" + (beginTime.getMonth() + 1)
          : beginTime.getMonth() + 1;

      var beginD =
        beginTime.getDate() < 10
          ? "0" + beginTime.getDate()
          : beginTime.getDate();

      var beginH =
        beginTime.getHours() < 10
          ? "0" + beginTime.getHours()
          : beginTime.getHours();

      var beginm =
        beginTime.getMinutes() < 10
          ? "0" + beginTime.getMinutes()
          : beginTime.getMinutes();

      var begins =
        beginTime.getSeconds() < 10
          ? "0" + beginTime.getSeconds()
          : beginTime.getSeconds();

      var endY = endTime.getFullYear();

      var endM =
        endTime.getMonth() + 1 < 10
          ? "0" + (endTime.getMonth() + 1)
          : endTime.getMonth() + 1;

      var endD =
        endTime.getDate() < 10 ? "0" + endTime.getDate() : endTime.getDate();

      var endH =
        endTime.getHours() < 10 ? "0" + endTime.getHours() : endTime.getHours();

      var endm =
        endTime.getMinutes() < 10
          ? "0" + endTime.getMinutes()
          : endTime.getMinutes();

      var ends =
        endTime.getSeconds() < 10
          ? "0" + endTime.getSeconds()
          : endTime.getSeconds();
      return {
        begin: beginY + beginM + beginD + beginH + beginm + begins,
        end: endY + endM + endD + endH + endm + ends,
      };
    },

    PoliceTracking(row) {
      //警情追踪
      this.$router.push({ path: "/policeTracking/track", query: row });
    },

    //数据导出
    handleExport() {
      this.$confirm("是否导出实时警情数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(
          `/api/alarm/alarm/export-alarm?beginTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&waringType=${this.$route.query.waringType}&timeDesc=${this.$route.query.timeDesc}`
        );
      });
    },
    //数据报表导出
    handleExportStatis() {
      let beginTime =
        this.$route.query.startTime == undefined
          ? ""
          : this.$route.query.startTime;
      let endTime =
        this.$route.query.endTime == undefined ? "" : this.$route.query.endTime;
      let waringType =
        this.$route.query.waringType == undefined
          ? ""
          : this.$route.query.waringType;
      let timeDesc =
        this.$route.query.timeDesc == undefined
          ? ""
          : this.$route.query.timeDesc;
      window.open(
        `https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`
      );
      //window.open(`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
    },
    rowClick(val) {
      //行点击事件
      //警情追踪
      this.$router.push({ path: "/policeTracking/track", query: val });
    },
  },
};
</script>

<style>
  .el-card__body .waringTypeClass {
    width: 12%;
  }
.el-card__body .waringTypeClass {
  width: 12%;
}

  .cityreal2 div label,
  .cityreal3 div label {
    display: none;
  }
.cityreal2 div label,
.cityreal3 div label {
  display: none;
}

  /*页面样式*/
  .el-card__body .cityreal1 {
    width: 150px;
    padding-right: 0px !important;
  }
/*页面样式*/
.el-card__body .cityreal1 {
  width: 150px;
  padding-right: 0px !important;
}

  .el-card__body .cityreal2 {
    width: 100px;
    padding-left: 10px !important;
    padding-right: 0px !important;
  }
.el-card__body .cityreal2 {
  width: 100px;
  padding-left: 10px !important;
  padding-right: 0px !important;
}

  .el-card__body .cityreal3 {
    width: 100px;
    padding-left: 10px !important;
    padding-right: 0px !important;
  }
.el-card__body .cityreal3 {
  width: 100px;
  padding-left: 10px !important;
  padding-right: 0px !important;
}

  /*新增窗体样式*/
  .el-dialog .cityreal1 {
    width: 216px;
    padding-right: 0px !important;
  }
/*新增窗体样式*/
.el-dialog .cityreal1 {
  width: 216px;
  padding-right: 0px !important;
}

  .el-dialog .cityreal2 {
    width: 130px;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
.el-dialog .cityreal2 {
  width: 130px;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

  .el-dialog .cityreal3 {
    width: 105px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
.el-dialog .cityreal3 {
  width: 105px;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

  .cityClassParams .avue-form__group.avue-form__group--flex {
    display: flex;
    justify-content: space-between;
  }
.cityClassParams .avue-form__group.avue-form__group--flex {
  display: flex;
  justify-content: space-between;
}

  .cityClassParams .cityClassSelect {
    flex: 1;
    margin: 0 !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
.cityClassParams .cityClassSelect {
  flex: 1;
  margin: 0 !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

  .cityClassParams .cityClassSelect:nth-child(2) {
    margin: 0 10px !important;
  }
.cityClassParams .cityClassSelect:nth-child(2) {
  margin: 0 10px !important;
}

  .cityClassParams .cityClassSelect .el-form-item {
    margin-bottom: 0px !important;
  }
.cityClassParams .cityClassSelect .el-form-item {
  margin-bottom: 0px !important;
}

  .cityClassParams .cityClassSelect .el-form-item .el-input__inner {
    height: 28px !important;
    line-height: 28px !important;
  }
.cityClassParams .cityClassSelect .el-form-item .el-input__inner {
  height: 28px !important;
  line-height: 28px !important;
}

  .cityClass2 div label {
    display: none;
  }
.cityClass2 div label {
  display: none;
}

  .cityClass3 div label {
    display: none;
  }
.cityClass3 div label {
  display: none;
}

  .old-video-dialog {
    position: absolute !important;
    top: 0 !important;
    left: auto !important;
    right: 0px !important;
    bottom: 0 !important;
    margin: auto !important;
    height: 100% !important;
    width: 476px !important;
  }
.old-video-dialog {
  position: absolute !important;
  top: 0 !important;
  left: auto !important;
  right: 0px !important;
  bottom: 0 !important;
  margin: auto !important;
  height: 100% !important;
  width: 476px !important;
}

  .old-video-dialog .el-dialog {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    margin-top: 15vh !important;
    height: 538px;
  }
.old-video-dialog .el-dialog {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  margin-top: 15vh !important;
  height: 538px;
}

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

  .el-button.btn-color {
    color: rgb(255, 255, 255);
    background-color: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
  }
.el-button.btn-color {
  color: rgb(255, 255, 255);
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}

  .tabFontSize {
    font-size: 15px;
  }
.tabFontSize {
  font-size: 15px;
}
</style>

 src/views/realTimePolice/realHistory.vue

@@ -117,7 +117,7 @@
        menuWidth: 240,
        size: "mini",
        border: false,
        stripe:true,
        //stripe:true,
        labelWidth: "100",
        dialogWidth: 950,
        tip: false,
@@ -614,7 +614,6 @@
</script>

<style>

.old-video-dialog-box {
  position: absolute !important;
  top: 0px !important;
@@ -647,7 +646,7 @@
  box-sizing: border-box;
}

.tabFontSize{
.tabFontSize {
  font-size: 15px;
}
</style>

 src/views/security/security copy.vue

@@ -1,24 +1,50 @@
<template>
  <basic-container>
    <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
      :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"
    >
      <template slot="menuLeft">
        <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.security_delete" @click="handleDelete">删
          除
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.security_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>

      <template slot-scope="{ row }" slot="jtype">
        <el-tag>{{
          row.jtype == "0" ? "否" : row.jtype == "1" ? "是" : "无"
          }}
        <el-tag
          >{{ row.jtype == "0" ? "否" : row.jtype == "1" ? "是" : "无" }}
        </el-tag>
      </template>

      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button icon="el-icon-location-outline" :size="size" :type="type" @click.stop="handleMap(row)">编辑电子围栏
        <el-button
          icon="el-icon-location-outline"
          :size="size"
          :type="type"
          @click.stop="handleMap(row)"
          >编辑电子围栏
        </el-button>
      </template>
    </avue-crud>
@@ -29,293 +55,316 @@
    </el-drawer> -->
    <el-drawer title="电子地图" append-to-body="true" :visible.sync="showMap">
      <iframe
                id="securityMap"
                ref="securityMap"
                :src="baseUrl"
                frameborder="0"
                width="100%"
                height="100%"
                name="securityMap"
              ></iframe>
        id="securityMap"
        ref="securityMap"
        :src="baseUrl"
        frameborder="0"
        width="100%"
        height="100%"
        name="securityMap"
      ></iframe>
    </el-drawer>
  </basic-container>
</template>

<script>
  import {getList} from "@/api/security/security";
  import {getDetail,add,update,remove} from "@/api/system/user";
  import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        baseUrl:"/map/index.html?ISinit=1",
        form: {},
        query: {},
        loading: true,
        showMap: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        dialogVisible: false,
        selectionList: [],
        option: {
          height: 'auto',
          calcHeight: 54,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          menuWidth:300,
          border: false,
          stripe: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [{
import { getList } from "@/api/security/security";
import { getDetail, add, update, remove } from "@/api/system/user";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      baseUrl: "/map/index.html?ISinit=1",
      form: {},
      query: {},
      loading: true,
      showMap: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      dialogVisible: false,
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 54,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        menuWidth: 300,
        border: false,
        //stripe:true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "账号",
            prop: "account",
            rules: [{
              required: true,
              message: "请输入账号",
              trigger: "blur"
            }]
            rules: [
              {
                required: true,
                message: "请输入账号",
                trigger: "blur",
              },
            ],
          },
            {
              label: "人员编号",
              prop: "code",
              search: true,
              rules: [{
          {
            label: "人员编号",
            prop: "code",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入人员编号",
                trigger: "blur"
              }]
            },
            {
              label: "人员姓名",
              prop: "realName",
              search: true,
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "人员姓名",
            prop: "realName",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur"
              }]
            },
            {
              label: "所属部门",
              prop: "deptName"
            },
            {
              label: "性别",
              prop: "sex",
              type: "select",
              dicData: [{
                label: "男",
                value: 1
                trigger: "blur",
              },
                {
                  label: "女",
                  value: 2
                },
              ],
            },
            {
              label: "联系电话",
              prop: "phone",
              rules: [{
            ],
          },
          {
            label: "所属部门",
            prop: "deptName",
          },
          {
            label: "性别",
            prop: "sex",
            type: "select",
            dicData: [
              {
                label: "男",
                value: 1,
              },
              {
                label: "女",
                value: 2,
              },
            ],
          },
          {
            label: "联系电话",
            prop: "phone",
            rules: [
              {
                required: true,
                message: "请输入联系电话",
                trigger: "blur"
              }]
            },
            {
              label: "邮箱",
              prop: "email",
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "邮箱",
            prop: "email",
            rules: [
              {
                required: false,
                message: "请输入邮箱",
                trigger: "blur"
              }]
            },
            {
              label: "生日",
              prop: "birthday",
              rules: [{
                trigger: "blur",
              },
            ],
          },
          {
            label: "生日",
            prop: "birthday",
            rules: [
              {
                required: false,
                message: "请选择",
                trigger: "blur"
              }]
            }
          ]
        },
        data: []
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.security_add, true),
        viewBtn: this.vaildData(this.permission.security_view, false),
        delBtn: this.vaildData(this.permission.security_delete, true),
        editBtn: this.vaildData(this.permission.security_edit, true),
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.security_add, true),
          viewBtn: this.vaildData(this.permission.security_view, false),
          delBtn: this.vaildData(this.permission.security_delete, true),
          editBtn: this.vaildData(this.permission.security_edit, true)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    methods: {
      rowSave(row, done, loading) {
        add(row).then(() => {
  },
  methods: {
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (error) => {
          loading();
          window.console.log(error);
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (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: "操作成功!"
            });
          });
      },
      //打开地图
      handleMap(row) {
        var that =this;
        this.showMap=true;
        if(row.jd=="" || row.jd=="0.0"){
          var rwjd = "115.862321";
          var rwwd = "28.591108";
          that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${rwjd}&wd=${rwwd}&code=${row.code}&name=${row.realName}`;
        }else{
          that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}&code=${row.code}&name=${row.realName}`;
        }
        
        this.$nextTick(() => {
          this.$refs.securityMap.onload = () => {
            if (window.frames[1].init) {
              if(row.jd=="" || row.jd=="0.0"){
                //如果处警员无位置信息，则赋值一个默认数据，否则地图无法加载
                window.frames[1].init("SecurityMap", {
                                x: rwjd,
                                y: rwwd,
                                code:row.code
                            });
              }else{
                window.frames[1].init("SecurityMap", {
                                x: row.jd,
                                y: row.wd,
                                code:row.code
                            });
              }
              
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    //打开地图
    handleMap(row) {
      var that = this;
      this.showMap = true;
      if (row.jd == "" || row.jd == "0.0") {
        var rwjd = "115.862321";
        var rwwd = "28.591108";
        that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${rwjd}&wd=${rwwd}&code=${row.code}&name=${row.realName}`;
      } else {
        that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}&code=${row.code}&name=${row.realName}`;
      }

      this.$nextTick(() => {
        this.$refs.securityMap.onload = () => {
          if (window.frames[1].init) {
            if (row.jd == "" || row.jd == "0.0") {
              //如果处警员无位置信息，则赋值一个默认数据，否则地图无法加载
              window.frames[1].init("SecurityMap", {
                x: rwjd,
                y: rwwd,
                code: row.code,
              });
            } else {
              console.log(`没有找到到window.frames[1].init`)
              window.frames[1].init("SecurityMap", {
                x: row.jd,
                y: row.wd,
                code: row.code,
              });
            }
          } else {
            console.log(`没有找到到window.frames[1].init`);
          }
        });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        };
      });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
      },
      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;
        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();
          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;
      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>

 src/views/security/security.vue

@@ -11,103 +11,118 @@
    </el-col> -->
    <el-col>
      <basic-container>
        <avue-crud :option="option"
                   :search.sync="search"
                   :table-loading="loading"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :permission="permissionList"
                   @row-del="rowDel"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   :before-open="beforeOpen"
                   :page.sync="page"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
        <avue-crud
          :option="option"
          :search.sync="search"
          :table-loading="loading"
          :data="data"
          ref="crud"
          v-model="form"
          :permission="permissionList"
          @row-del="rowDel"
          @row-update="rowUpdate"
          @row-save="rowSave"
          :before-open="beforeOpen"
          :page.sync="page"
          @search-change="searchChange"
          @search-reset="searchReset"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          @on-load="onLoad"
        >
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       plain
                       icon="el-icon-delete"
                       v-if="permission.user_delete"
                       @click="handleDelete">删 除
            <el-button
              type="danger"
              size="small"
              plain
              icon="el-icon-delete"
              v-if="permission.user_delete"
              @click="handleDelete"
              >删 除
            </el-button>
            <el-button type="info"
                       size="small"
                       plain
                       v-if="permission.user_reset"
                       icon="el-icon-refresh"
                       @click="handleReset">密码重置
            <el-button
              type="info"
              size="small"
              plain
              v-if="permission.user_reset"
              icon="el-icon-refresh"
              @click="handleReset"
              >密码重置
            </el-button>
          </template>
          <template slot-scope="{row}"
                    slot="tenantName">
            <el-tag>{{row.tenantName}}</el-tag>
          <template slot-scope="{ row }" slot="tenantName">
            <el-tag>{{ row.tenantName }}</el-tag>
          </template>
          <template slot-scope="{row}"
                    slot="roleName">
            <el-tag>{{row.roleName}}</el-tag>
          <template slot-scope="{ row }" slot="roleName">
            <el-tag>{{ row.roleName }}</el-tag>
          </template>
          <template slot-scope="{row}"
                    slot="deptName">
            <el-tag>{{row.deptName}}</el-tag>
          <template slot-scope="{ row }" slot="deptName">
            <el-tag>{{ row.deptName }}</el-tag>
          </template>
          <template slot-scope="{row}"
                    slot="userTypeName">
            <el-tag>{{row.userTypeName}}</el-tag>
          <template slot-scope="{ row }" slot="userTypeName">
            <el-tag>{{ row.userTypeName }}</el-tag>
          </template>
          <template slot-scope="{ row }" slot="online_status">
            <el-tag
            >{{
              row.online_status == "0" ? "离线" : row.online_status == "1" ? "在线" : "离线"
              >{{
                row.online_status == "0"
                  ? "离线"
                  : row.online_status == "1"
                  ? "在线"
                  : "离线"
              }}
            </el-tag>
          </template>
          <template slot-scope="{ row }" slot="sex">
            <el-tag
            >{{
              row.sex == 1 ? "男" : "女"
              }}
            </el-tag>
            <el-tag>{{ row.sex == 1 ? "男" : "女" }} </el-tag>
          </template>

          <template slot-scope="{ type, size, row }" slot="menu">
            <el-button icon="el-icon-location-outline" :size="size" :type="type" @click.stop="handleMap(row)">编辑电子围栏
          </el-button>
      </template>
            <el-button
              icon="el-icon-location-outline"
              :size="size"
              :type="type"
              @click.stop="handleMap(row)"
              >编辑电子围栏
            </el-button>
          </template>
        </avue-crud>
        <el-dialog title="用户角色配置"
                   append-to-body
                   :visible.sync="roleBox"
                   width="345px">

          <el-tree :data="roleGrantList"
                   show-checkbox
                   check-strictly
                   default-expand-all
                   node-key="id"
                   ref="treeRole"
                   :default-checked-keys="roleTreeObj"
                   :props="props">
        <el-dialog
          title="用户角色配置"
          append-to-body
          :visible.sync="roleBox"
          width="345px"
        >
          <el-tree
            :data="roleGrantList"
            show-checkbox
            check-strictly
            default-expand-all
            node-key="id"
            ref="treeRole"
            :default-checked-keys="roleTreeObj"
            :props="props"
          >
          </el-tree>

          <span slot="footer" class="dialog-footer">
            <el-button @click="roleBox = false">取 消</el-button>
            <el-button type="primary"
                       @click="submitRole">确 定</el-button>
            <el-button type="primary" @click="submitRole">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="用户数据导入"
                   append-to-body
                   :visible.sync="excelBox"
                   width="555px">
          <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
        <el-dialog
          title="用户数据导入"
          append-to-body
          :visible.sync="excelBox"
          width="555px"
        >
          <avue-form
            :option="excelOption"
            v-model="excelForm"
            :upload-after="uploadAfter"
          >
            <template slot="excelTemplate">
              <el-button type="primary" @click="handleTemplate">
                点击下载<i class="el-icon-download el-icon--right"></i>
@@ -115,46 +130,52 @@
            </template>
          </avue-form>
        </el-dialog>
        <el-dialog title="用户平台配置"
                   append-to-body
                   :visible.sync="platformBox">
          <avue-crud :option="platformOption"
                     :table-loading="platformLoading"
                     :data="platformData"
                     ref="platformCrud"
                     v-model="platformForm"
                     :before-open="platformBeforeOpen"
                     :page.sync="platformPage"
                     :permission="platformPermissionList"
                     @row-update="platformRowUpdate"
                     @search-change="platformSearchChange"
                     @search-reset="platformSearchReset"
                     @selection-change="platformSelectionChange"
                     @current-change="platformCurrentChange"
                     @size-change="platformSizeChange"
                     @refresh-change="platformRefreshChange"
                     @on-load="platformOnLoad">
            <template slot-scope="{row}"
                      slot="tenantName">
              <el-tag>{{row.tenantName}}</el-tag>
        <el-dialog
          title="用户平台配置"
          append-to-body
          :visible.sync="platformBox"
        >
          <avue-crud
            :option="platformOption"
            :table-loading="platformLoading"
            :data="platformData"
            ref="platformCrud"
            v-model="platformForm"
            :before-open="platformBeforeOpen"
            :page.sync="platformPage"
            :permission="platformPermissionList"
            @row-update="platformRowUpdate"
            @search-change="platformSearchChange"
            @search-reset="platformSearchReset"
            @selection-change="platformSelectionChange"
            @current-change="platformCurrentChange"
            @size-change="platformSizeChange"
            @refresh-change="platformRefreshChange"
            @on-load="platformOnLoad"
          >
            <template slot-scope="{ row }" slot="tenantName">
              <el-tag>{{ row.tenantName }}</el-tag>
            </template>
            <template slot-scope="{row}"
                      slot="userTypeName">
              <el-tag>{{row.userTypeName}}</el-tag>
            <template slot-scope="{ row }" slot="userTypeName">
              <el-tag>{{ row.userTypeName }}</el-tag>
            </template>
          </avue-crud>
        </el-dialog>

        <el-drawer title="电子地图" append-to-body="true" :visible.sync="showMap">
        <el-drawer
          title="电子地图"
          append-to-body="true"
          :visible.sync="showMap"
        >
          <iframe
                    id="securityMap"
                    ref="securityMap"
                    :src="baseUrl"
                    frameborder="0"
                    width="100%"
                    height="100%"
                    name="securityMap"
                  ></iframe>
            id="securityMap"
            ref="securityMap"
            :src="baseUrl"
            frameborder="0"
            width="100%"
            height="100%"
            name="securityMap"
          ></iframe>
        </el-drawer>
      </basic-container>
    </el-col>
@@ -162,896 +183,944 @@
</template>

<script>
  import {
    getUser,
    getUserPlatform,
    remove,
    update,
    updatePlatform,
    add,
    grant,
    resetPassword
  } from "@/api/system/user";
    import {getList} from "@/api/security/security";
  import {getDeptTree, getDeptLazyTree} from "@/api/system/dept";
  import {getRoleTree} from "@/api/system/role";
  import {getPostList} from "@/api/system/post";
  import {mapGetters} from "vuex";
  import website from '@/config/website';
  import {getToken} from '@/util/auth';
import {
  getUser,
  getUserPlatform,
  remove,
  update,
  updatePlatform,
  add,
  grant,
  resetPassword,
} from "@/api/system/user";
import { getList } from "@/api/security/security";
import { getDeptTree, getDeptLazyTree } from "@/api/system/dept";
import { getRoleTree } from "@/api/system/role";
import { getPostList } from "@/api/system/post";
import { mapGetters } from "vuex";
import website from "@/config/website";
import { getToken } from "@/util/auth";

  export default {
    data() {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        baseUrl:"/map/index.html?ISinit=1",
        form: {},
        search: {},
        roleBox: false,
        excelBox: false,
        platformBox: false,
        showMap: false,
        initFlag: true,
        selectionList: [],
        query: {},
        loading: true,
        roleId:"",
        platformLoading: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        platformPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        init: {
          roleTree: [],
          deptTree: [],
        },
        props: {
          label: "title",
          value: "key"
        },
        roleGrantList: [],
        roleTreeObj: [],
        treeDeptId: '',
        treeData: [],
        treeOption: {
          nodeKey: 'id',
          lazy: true,
          treeLoad: function (node, resolve) {
            const parentId = (node.level === 0) ? 0 : node.data.id;
            getDeptLazyTree(parentId).then(res => {
              resolve(res.data.data.map(item => {
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      baseUrl: "/map/index.html?ISinit=1",
      form: {},
      search: {},
      roleBox: false,
      excelBox: false,
      platformBox: false,
      showMap: false,
      initFlag: true,
      selectionList: [],
      query: {},
      loading: true,
      roleId: "",
      platformLoading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      platformPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      init: {
        roleTree: [],
        deptTree: [],
      },
      props: {
        label: "title",
        value: "key",
      },
      roleGrantList: [],
      roleTreeObj: [],
      treeDeptId: "",
      treeData: [],
      treeOption: {
        nodeKey: "id",
        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getDeptLazyTree(parentId).then((res) => {
            resolve(
              res.data.data.map((item) => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                }
              }))
            });
          },
          addBtn: false,
          menu: false,
          size: 'small',
          props: {
            labelText: '标题',
            label: 'title',
            value: 'value',
            children: 'children'
          }
                  leaf: !item.hasChildren,
                };
              })
            );
          });
        },
        option: {
          height: 'auto',
          calcHeight: 54,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: false,
          stripe: true,
          index: true,
          selection: true,
          viewBtn: true,
          menuWidth:350,
          //dialogType: 'drawer',
          dialogClickModal: false,
          column: [
            {
              label: "登录账号",
              prop: "account",
              searchSpan:4,
              search: true,
              display: false
            },
            {
              label: "人员编号",
              prop: "code",
              search: true,
              searchSpan:4,
              display: false
            },
            {
              label: "用户姓名",
              prop: "realName",
              search: true,
              searchSpan:4,
              display: false
            },
            {
              label: "所属部门",
              prop: "deptName",
              slot: true,
              display: false,
              width:260
            },
             {
              label: "在线状态",
              prop: "online_status",
              slot: true,
              display: false
            },
            {
              label: "性别",
              prop: "sex",
              type: "select",
              slot:true,
              display: false
            },
            {
              label: "联系电话",
              prop: "phone",
              display: false
            },
            {
              label: "邮箱",
              prop: "email",
              display: false
            },
            {
              label: "生日",
              prop: "birthday",
              display: false
            },
            {
              label: "创建时间",
              prop: "createTime",
              display: false
            }
          ],
          group: [
            {
              label: '基础信息',
              prop: 'baseInfo',
              icon: 'el-icon-user-solid',
              column: [
                {
                  label: "所属客户",
                  prop: "tenantId",
                  type: "tree",
                  dicUrl: "/api/blade-system/tenant/select",
                  props: {
                    label: "tenantName",
                    value: "tenantId"
                  },
                  hide: !website.tenantMode,
                  addDisplay: website.tenantMode,
                  editDisplay: website.tenantMode,
                  viewDisplay: website.tenantMode,
                  rules: [{
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children",
        },
      },
      option: {
        height: "auto",
        calcHeight: 54,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        //stripe:true,
        index: true,
        selection: true,
        viewBtn: true,
        menuWidth: 350,
        //dialogType: 'drawer',
        dialogClickModal: false,
        column: [
          {
            label: "登录账号",
            prop: "account",
            searchSpan: 4,
            search: true,
            display: false,
          },
          {
            label: "人员编号",
            prop: "code",
            search: true,
            searchSpan: 4,
            display: false,
          },
          {
            label: "用户姓名",
            prop: "realName",
            search: true,
            searchSpan: 4,
            display: false,
          },
          {
            label: "所属部门",
            prop: "deptName",
            slot: true,
            display: false,
            width: 260,
          },
          {
            label: "在线状态",
            prop: "online_status",
            slot: true,
            display: false,
          },
          {
            label: "性别",
            prop: "sex",
            type: "select",
            slot: true,
            display: false,
          },
          {
            label: "联系电话",
            prop: "phone",
            display: false,
          },
          {
            label: "邮箱",
            prop: "email",
            display: false,
          },
          {
            label: "生日",
            prop: "birthday",
            display: false,
          },
          {
            label: "创建时间",
            prop: "createTime",
            display: false,
          },
        ],
        group: [
          {
            label: "基础信息",
            prop: "baseInfo",
            icon: "el-icon-user-solid",
            column: [
              {
                label: "所属客户",
                prop: "tenantId",
                type: "tree",
                dicUrl: "/api/blade-system/tenant/select",
                props: {
                  label: "tenantName",
                  value: "tenantId",
                },
                hide: !website.tenantMode,
                addDisplay: website.tenantMode,
                editDisplay: website.tenantMode,
                viewDisplay: website.tenantMode,
                rules: [
                  {
                    required: true,
                    message: "请输入所属租户",
                    trigger: "click"
                  }],
                  span: 24,
                },
                {
                  label: "登录账号",
                  prop: "account",
                  rules: [{
                    trigger: "click",
                  },
                ],
                span: 24,
              },
              {
                label: "登录账号",
                prop: "account",
                rules: [
                  {
                    required: true,
                    message: "请输入登录账号",
                    trigger: "blur"
                  }],
                },
                {
                  label: "用户平台",
                  type: "select",
                  dicUrl: "/api/blade-system/dict/dictionary?code=user_type",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                    trigger: "blur",
                  },
                  dataType: "number",
                  slot: true,
                  prop: "userType",
                  rules: [{
                ],
              },
              {
                label: "用户平台",
                type: "select",
                dicUrl: "/api/blade-system/dict/dictionary?code=user_type",
                props: {
                  label: "dictValue",
                  value: "dictKey",
                },
                dataType: "number",
                slot: true,
                prop: "userType",
                rules: [
                  {
                    required: true,
                    message: "请选择用户平台",
                    trigger: "blur"
                  }]
                },
                {
                  label: '密码',
                  prop: 'password',
                  hide: true,
                  editDisplay: false,
                  viewDisplay: false,
                  rules: [{required: true, validator: validatePass, trigger: 'blur'}]
                },
                {
                  label: '确认密码',
                  prop: 'password2',
                  hide: true,
                  editDisplay: false,
                  viewDisplay: false,
                  rules: [{required: true, validator: validatePass2, trigger: 'blur'}]
                },
              ]
            },
            {
              label: '详细信息',
              prop: 'detailInfo',
              icon: 'el-icon-s-order',
              column: [
                {
                  label: "用户昵称",
                  prop: "name",
                  hide: true,
                  rules: [{
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "密码",
                prop: "password",
                hide: true,
                editDisplay: false,
                viewDisplay: false,
                rules: [
                  { required: true, validator: validatePass, trigger: "blur" },
                ],
              },
              {
                label: "确认密码",
                prop: "password2",
                hide: true,
                editDisplay: false,
                viewDisplay: false,
                rules: [
                  { required: true, validator: validatePass2, trigger: "blur" },
                ],
              },
            ],
          },
          {
            label: "详细信息",
            prop: "detailInfo",
            icon: "el-icon-s-order",
            column: [
              {
                label: "用户昵称",
                prop: "name",
                hide: true,
                rules: [
                  {
                    required: true,
                    message: "请输入用户昵称",
                    trigger: "blur"
                  }]
                },
                {
                  label: "用户姓名",
                  prop: "realName",
                  rules: [{
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "用户姓名",
                prop: "realName",
                rules: [
                  {
                    required: true,
                    message: "请输入用户姓名",
                    trigger: "blur"
                  }, {
                    trigger: "blur",
                  },
                  {
                    min: 2,
                    max: 5,
                    message: '姓名长度在2到5个字符'
                  }]
                },
                {
                  label: "手机号码",
                  prop: "phone",
                  overHidden: true
                },
                {
                  label: "电子邮箱",
                  prop: "email",
                  hide: true,
                  overHidden: true
                },
                {
                  label: "用户性别",
                  prop: "sex",
                  type: "select",
                  dicData: [
                    {
                      label: "男",
                      value: 1
                    },
                    {
                      label: "女",
                      value: 2
                    },
                    {
                      label: "未知",
                      value: 3
                    }
                  ],
                  hide: true
                },
                {
                  label: "用户生日",
                  type: "date",
                  prop: "birthday",
                  format: "yyyy-MM-dd hh:mm:ss",
                  valueFormat: "yyyy-MM-dd hh:mm:ss",
                  hide: true
                },
                {
                  label: "账号状态",
                  prop: "statusName",
                  hide: true,
                  display: false
                }
              ]
            },
            {
              label: '职责信息',
              prop: 'dutyInfo',
              icon: 'el-icon-s-custom',
              column: [
                {
                  label: "用户编号",
                  prop: "code",
                },
                {
                  label: "所属角色",
                  prop: "roleId",
                  multiple: true,
                  type: "tree",
                  dicData: [],
                  props: {
                    label: "title"
                    message: "姓名长度在2到5个字符",
                  },
                  checkStrictly: true,
                  slot: true,
                  addDisplay:false,
                  editDisplay:false,
                  viewDisplay:true,
                  // rules: [{
                  //   required: true,
                  //   message: "请选择所属角色",
                  //   trigger: "click"
                  // }]
                },
                {
                  label: "所属部门",
                  prop: "deptId",
                  type: "cascader",
                  //multiple: true,
                  dicData: [],
                  props: {
                    label: "title"
                ],
              },
              {
                label: "手机号码",
                prop: "phone",
                overHidden: true,
              },
              {
                label: "电子邮箱",
                prop: "email",
                hide: true,
                overHidden: true,
              },
              {
                label: "用户性别",
                prop: "sex",
                type: "select",
                dicData: [
                  {
                    label: "男",
                    value: 1,
                  },
                  checkStrictly: true,
                  slot: true,
                  rules: [{
                  {
                    label: "女",
                    value: 2,
                  },
                  {
                    label: "未知",
                    value: 3,
                  },
                ],
                hide: true,
              },
              {
                label: "用户生日",
                type: "date",
                prop: "birthday",
                format: "yyyy-MM-dd hh:mm:ss",
                valueFormat: "yyyy-MM-dd hh:mm:ss",
                hide: true,
              },
              {
                label: "账号状态",
                prop: "statusName",
                hide: true,
                display: false,
              },
            ],
          },
          {
            label: "职责信息",
            prop: "dutyInfo",
            icon: "el-icon-s-custom",
            column: [
              {
                label: "用户编号",
                prop: "code",
              },
              {
                label: "所属角色",
                prop: "roleId",
                multiple: true,
                type: "tree",
                dicData: [],
                props: {
                  label: "title",
                },
                checkStrictly: true,
                slot: true,
                addDisplay: false,
                editDisplay: false,
                viewDisplay: true,
                // rules: [{
                //   required: true,
                //   message: "请选择所属角色",
                //   trigger: "click"
                // }]
              },
              {
                label: "所属部门",
                prop: "deptId",
                type: "cascader",
                //multiple: true,
                dicData: [],
                props: {
                  label: "title",
                },
                checkStrictly: true,
                slot: true,
                rules: [
                  {
                    required: true,
                    message: "请选择所属部门",
                    trigger: "click"
                  }]
                },
                {
                  label: "所属岗位",
                  prop: "postId",
                  type: "tree",
                  multiple: true,
                  dicData: [],
                  props: {
                    label: "postName",
                    value: "id"
                    trigger: "click",
                  },

                },
              ]
            },
          ]
        },
        data: [],
        platformQuery: {},
        platformSelectionList: [],
        platformData: [],
        platformForm: {},
        platformOption: {
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          selection: true,
          viewBtn: true,
          dialogClickModal: false,
          menuWidth: 120,
          editBtnText: '配置',
          column: [
            {
              label: "登录账号",
              prop: "account",
              search: true,
              display: false
            },
            {
              label: "所属租户",
              prop: "tenantName",
              slot: true,
              display: false
            },
            {
              label: "用户姓名",
              prop: "realName",
              search: true,
              display: false
            },
            {
              label: "用户平台",
              prop: "userTypeName",
              slot: true,
              display: false
            },
            {
              label: "用户平台",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=user_type",
              props: {
                label: "dictValue",
                value: "dictKey"
                ],
              },
              dataType: "number",
              search: true,
              hide: true,
              display: false,
              prop: "userType",
              rules: [{
              {
                label: "所属岗位",
                prop: "postId",
                type: "tree",
                multiple: true,
                dicData: [],
                props: {
                  label: "postName",
                  value: "id",
                },
              },
            ],
          },
        ],
      },
      data: [],
      platformQuery: {},
      platformSelectionList: [],
      platformData: [],
      platformForm: {},
      platformOption: {
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: true,
        viewBtn: true,
        dialogClickModal: false,
        menuWidth: 120,
        editBtnText: "配置",
        column: [
          {
            label: "登录账号",
            prop: "account",
            search: true,
            display: false,
          },
          {
            label: "所属租户",
            prop: "tenantName",
            slot: true,
            display: false,
          },
          {
            label: "用户姓名",
            prop: "realName",
            search: true,
            display: false,
          },
          {
            label: "用户平台",
            prop: "userTypeName",
            slot: true,
            display: false,
          },
          {
            label: "用户平台",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=user_type",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "number",
            search: true,
            hide: true,
            display: false,
            prop: "userType",
            rules: [
              {
                required: true,
                message: "请选择用户平台",
                trigger: "blur"
              }]
            },
            {
              label: "用户拓展",
              prop: "userExt",
              type: "textarea",
              minRows: 8,
              span: 24,
              overHidden: true,
              row: true,
              hide: true,
            },
          ],
        },
        excelForm: {},
        excelOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '模板上传',
              prop: 'excelFile',
              type: 'upload',
              drag: true,
              loadText: '模板上传中，请稍等',
              span: 24,
              propsHttp: {
                res: 'data'
                trigger: "blur",
              },
              tip: '请上传 .xls,.xlsx 标准格式文件',
              action: "/api/blade-user/import-user"
            ],
          },
          {
            label: "用户拓展",
            prop: "userExt",
            type: "textarea",
            minRows: 8,
            span: 24,
            overHidden: true,
            row: true,
            hide: true,
          },
        ],
      },
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "模板上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "模板上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            {
              label: "数据覆盖",
              prop: "isCovered",
              type: "switch",
              align: "center",
              width: 80,
              dicData: [
                {
                  label: "否",
                  value: 0
                },
                {
                  label: "是",
                  value: 1
                }
              ],
              value: 0,
              slot: true,
              rules: [
                {
                  required: true,
                  message: "请选择是否覆盖",
                  trigger: "blur"
                }
              ]
            },
            {
              label: '模板下载',
              prop: 'excelTemplate',
              formslot: true,
              span: 24,
            }
          ]
        }
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/blade-user/import-user",
          },
          {
            label: "数据覆盖",
            prop: "isCovered",
            type: "switch",
            align: "center",
            width: 80,
            dicData: [
              {
                label: "否",
                value: 0,
              },
              {
                label: "是",
                value: 1,
              },
            ],
            value: 0,
            slot: true,
            rules: [
              {
                required: true,
                message: "请选择是否覆盖",
                trigger: "blur",
              },
            ],
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
      },
    };
  },
  watch: {
    "form.tenantId"() {
      if (this.form.tenantId !== "" && this.initFlag) {
        this.initData(this.form.tenantId);
      }
    },
    "excelForm.isCovered"() {
      if (this.excelForm.isCovered !== "") {
        const column = this.findObject(this.excelOption.column, "excelFile");
        column.action = `/api/blade-user/import-user?isCovered=${this.excelForm.isCovered}`;
      }
    },
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.user_add, false),
        viewBtn: this.vaildData(this.permission.user_view, false),
        delBtn: this.vaildData(this.permission.user_delete, false),
        editBtn: this.vaildData(this.permission.user_edit, false),
      };
    },
    watch: {
      'form.tenantId'() {
        if (this.form.tenantId !== '' && this.initFlag) {
          this.initData(this.form.tenantId);
        }
      },
      'excelForm.isCovered'() {
        if (this.excelForm.isCovered !== '') {
          const column = this.findObject(this.excelOption.column, "excelFile");
          column.action = `/api/blade-user/import-user?isCovered=${this.excelForm.isCovered}`;
        }
      }
    platformPermissionList() {
      return {
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: this.vaildData(this.permission.user_edit, false),
      };
    },
    computed: {
      ...mapGetters(["userInfo", "permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.user_add, false),
          viewBtn: this.vaildData(this.permission.user_view, false),
          delBtn: this.vaildData(this.permission.user_delete, false),
          editBtn: this.vaildData(this.permission.user_edit, false)
        };
      },
      platformPermissionList() {
        return {
          addBtn: false,
          viewBtn: false,
          delBtn: false,
          editBtn: this.vaildData(this.permission.user_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    mounted() {
      // 非租户模式默认加载管理组数据
      if (!website.tenantMode) {
        this.initData(website.tenantId);
      }
  },
  mounted() {
    // 非租户模式默认加载管理组数据
    if (!website.tenantMode) {
      this.initData(website.tenantId);
    }
  },
  methods: {
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    methods: {
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      initData(tenantId) {
        getRoleTree(tenantId).then(res => {
          var that = this;
          const column = this.findObject(this.option.group, "roleId");
          column.dicData = res.data.data;
          //数组
          var roleData = res.data.data;
          //遍历
          roleData.forEach((item)=>{
            if(item.title=="处警员"){
                that.roleId = item.id;
            }
            if(item.hasChildren){
              //取出title对比
              if(item.title=="处警员"){
                that.roleId = item.id;
              }
            }
          })
        });
        getDeptTree(tenantId).then(res => {
          const column = this.findObject(this.option.group, "deptId");
          column.dicData = res.data.data;
        });
        getPostList(tenantId).then(res => {
          const column = this.findObject(this.option.group, "postId");
          column.dicData = res.data.data;
        });
      },
      submitRole() {
        const roleList = this.$refs.treeRole.getCheckedKeys().join(",");
        grant(this.ids, roleList).then(() => {
          this.roleBox = false;
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.onLoad(this.page);
        });
      },
      rowSave(row, done, loading) {
        row.deptId = row.deptId.join(",");
        row.roleId = this.roleId;
        row.postId = row.postId.join(",");
        add(row).then(() => {
          this.initFlag = false;
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      //打开地图
      handleMap(row) {
        var that =this;
        this.showMap=true;
        if(row.jd=="" || row.jd=="0.0"){
          var rwjd = "115.862321";
          var rwwd = "28.591108";
          that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${rwjd}&wd=${rwwd}&code=${row.code}&name=${row.realName}`;
        }else{
          that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}&code=${row.code}&name=${row.realName}`;
        }
        
        this.$nextTick(() => {
          this.$refs.securityMap.onload = () => {
            if (window.frames[1].init) {
              if(row.jd=="" || row.jd=="0.0"){
                //如果处警员无位置信息，则赋值一个默认数据，否则地图无法加载
                window.frames[1].init("SecurityMap", {
                                x: rwjd,
                                y: rwwd,
                                code:row.code
                            });
              }else{
                window.frames[1].init("SecurityMap", {
                                x: row.jd,
                                y: row.wd,
                                code:row.code
                            });
              }
              
            } else {
              console.log(`没有找到到window.frames[1].init`)
    initData(tenantId) {
      getRoleTree(tenantId).then((res) => {
        var that = this;
        const column = this.findObject(this.option.group, "roleId");
        column.dicData = res.data.data;
        //数组
        var roleData = res.data.data;
        //遍历
        roleData.forEach((item) => {
          if (item.title == "处警员") {
            that.roleId = item.id;
          }
          if (item.hasChildren) {
            //取出title对比
            if (item.title == "处警员") {
              that.roleId = item.id;
            }
          }
        });
      },
      rowUpdate(row, index, done, loading) {
        row.deptId = row.deptId.join(",");
        row.roleId = row.roleId.join(",");
        row.postId = row.postId.join(",");
        update(row).then(() => {
      });
      getDeptTree(tenantId).then((res) => {
        const column = this.findObject(this.option.group, "deptId");
        column.dicData = res.data.data;
      });
      getPostList(tenantId).then((res) => {
        const column = this.findObject(this.option.group, "postId");
        column.dicData = res.data.data;
      });
    },
    submitRole() {
      const roleList = this.$refs.treeRole.getCheckedKeys().join(",");
      grant(this.ids, roleList).then(() => {
        this.roleBox = false;
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.onLoad(this.page);
      });
    },
    rowSave(row, done, loading) {
      row.deptId = row.deptId.join(",");
      row.roleId = this.roleId;
      row.postId = row.postId.join(",");
      add(row).then(
        () => {
          this.initFlag = false;
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (error) => {
          window.console.log(error);
          loading();
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      searchReset() {
        this.query = {};
        this.treeDeptId = '';
        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();
      },
      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();
          });
      },
      handleReset() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择账号密码重置为123456?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return resetPassword(this.ids);
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      handleGrant() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.roleTreeObj = [];
        if (this.selectionList.length === 1) {
          this.roleTreeObj = this.selectionList[0].roleId.split(",");
        }
        getRoleTree().then(res => {
          this.roleGrantList = res.data.data;
          this.roleBox = true;
        });
      },
      handlePlatform() {
        this.platformBox = true;
      },
      handleImport() {
        this.excelBox = true;
      },
      uploadAfter(res, done, loading, column) {
        this.excelBox = false;
        this.refreshChange();
        done();
      },
      handleExport() {
        this.$confirm("是否导出用户数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          window.open(`/api/blade-user/export-user?${this.website.tokenHeader}=${getToken()}&account=${this.search.account}&realName=${this.search.realName}`);
        });
      },
      handleTemplate() {
        window.open(`/api/blade-user/export-template?${this.website.tokenHeader}=${getToken()}`);
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getUser(this.form.id).then(res => {
            this.form = res.data.data;
            if (this.form.hasOwnProperty("deptId")) {
              this.form.deptId = this.form.deptId.split(",");
      );
    },
    //打开地图
    handleMap(row) {
      var that = this;
      this.showMap = true;
      if (row.jd == "" || row.jd == "0.0") {
        var rwjd = "115.862321";
        var rwwd = "28.591108";
        that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${rwjd}&wd=${rwwd}&code=${row.code}&name=${row.realName}`;
      } else {
        that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}&code=${row.code}&name=${row.realName}`;
      }

      this.$nextTick(() => {
        this.$refs.securityMap.onload = () => {
          if (window.frames[1].init) {
            if (row.jd == "" || row.jd == "0.0") {
              //如果处警员无位置信息，则赋值一个默认数据，否则地图无法加载
              window.frames[1].init("SecurityMap", {
                x: rwjd,
                y: rwwd,
                code: row.code,
              });
            } else {
              window.frames[1].init("SecurityMap", {
                x: row.jd,
                y: row.wd,
                code: row.code,
              });
            }
            if (this.form.hasOwnProperty("roleId")) {
              this.form.roleId = this.form.roleId.split(",");
            }
            if (this.form.hasOwnProperty("postId")) {
              this.form.postId = this.form.postId.split(",");
            }
          } else {
            console.log(`没有找到到window.frames[1].init`);
          }
        };
      });
    },
    rowUpdate(row, index, done, loading) {
      row.deptId = row.deptId.join(",");
      row.roleId = row.roleId.join(",");
      row.postId = row.postId.join(",");
      update(row).then(
        () => {
          this.initFlag = false;
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
        this.initFlag = true;
        done();
      },
      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;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.treeDeptId).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
      },
      platformRowUpdate(row, index, done, loading) {
        updatePlatform(row.id, row.userType, row.userExt).then(() => {
    },
    searchReset() {
      this.query = {};
      this.treeDeptId = "";
      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();
    },
    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();
        });
    },
    handleReset() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择账号密码重置为123456?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return resetPassword(this.ids);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    handleGrant() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.roleTreeObj = [];
      if (this.selectionList.length === 1) {
        this.roleTreeObj = this.selectionList[0].roleId.split(",");
      }
      getRoleTree().then((res) => {
        this.roleGrantList = res.data.data;
        this.roleBox = true;
      });
    },
    handlePlatform() {
      this.platformBox = true;
    },
    handleImport() {
      this.excelBox = true;
    },
    uploadAfter(res, done, loading, column) {
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    handleExport() {
      this.$confirm("是否导出用户数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(
          `/api/blade-user/export-user?${
            this.website.tokenHeader
          }=${getToken()}&account=${this.search.account}&realName=${
            this.search.realName
          }`
        );
      });
    },
    handleTemplate() {
      window.open(
        `/api/blade-user/export-template?${
          this.website.tokenHeader
        }=${getToken()}`
      );
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getUser(this.form.id).then((res) => {
          this.form = res.data.data;
          if (this.form.hasOwnProperty("deptId")) {
            this.form.deptId = this.form.deptId.split(",");
          }
          if (this.form.hasOwnProperty("roleId")) {
            this.form.roleId = this.form.roleId.split(",");
          }
          if (this.form.hasOwnProperty("postId")) {
            this.form.postId = this.form.postId.split(",");
          }
        });
      }
      this.initFlag = true;
      done();
    },
    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;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query),
        this.treeDeptId
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    platformRowUpdate(row, index, done, loading) {
      updatePlatform(row.id, row.userType, row.userExt).then(
        () => {
          this.platformOnLoad(this.platformPage);
          this.$message({
            type: "success",
            message: "操作成功!"
            message: "操作成功!",
          });
          done();
        }, error => {
        },
        (error) => {
          window.console.log(error);
          loading();
        });
      },
      platformBeforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getUserPlatform(this.platformForm.id).then(res => {
            this.platformForm = res.data.data;
          });
        }
        done();
      },
      platformSearchReset() {
        this.platformQuery = {};
        this.platformOnLoad(this.platformPage);
      },
      platformSearchChange(params, done) {
        this.platformQuery = params;
        this.platformPage.currentPage = 1;
        this.platformOnLoad(this.platformPage, params);
        done();
      },
      platformSelectionChange(list) {
        this.platformSelectionList = list;
      },
      platformSelectionClear() {
        this.platformSelectionList = [];
        this.$refs.platformCrud.toggleSelection();
      },
      platformCurrentChange(currentPage) {
        this.platformPage.currentPage = currentPage;
      },
      platformSizeChange(pageSize) {
        this.platformPage.pageSize = pageSize;
      },
      platformRefreshChange() {
        this.platformOnLoad(this.platformPage, this.platformQuery);
      },
      platformOnLoad(page, params = {}) {
        this.platformLoading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.treeDeptId).then(res => {
          const data = res.data.data;
          this.platformPage.total = data.total;
          this.platformData = data.records;
          this.platformLoading = false;
          this.selectionClear();
      );
    },
    platformBeforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getUserPlatform(this.platformForm.id).then((res) => {
          this.platformForm = res.data.data;
        });
      }
    }
  };
      done();
    },
    platformSearchReset() {
      this.platformQuery = {};
      this.platformOnLoad(this.platformPage);
    },
    platformSearchChange(params, done) {
      this.platformQuery = params;
      this.platformPage.currentPage = 1;
      this.platformOnLoad(this.platformPage, params);
      done();
    },
    platformSelectionChange(list) {
      this.platformSelectionList = list;
    },
    platformSelectionClear() {
      this.platformSelectionList = [];
      this.$refs.platformCrud.toggleSelection();
    },
    platformCurrentChange(currentPage) {
      this.platformPage.currentPage = currentPage;
    },
    platformSizeChange(pageSize) {
      this.platformPage.pageSize = pageSize;
    },
    platformRefreshChange() {
      this.platformOnLoad(this.platformPage, this.platformQuery);
    },
    platformOnLoad(page, params = {}) {
      this.platformLoading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query),
        this.treeDeptId
      ).then((res) => {
        const data = res.data.data;
        this.platformPage.total = data.total;
        this.platformData = data.records;
        this.platformLoading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style>
  .box {
    height: 800px;
  }
.box {
  height: 800px;
}

  .el-scrollbar {
    height: 100%;
  }
.el-scrollbar {
  height: 100%;
}

  .box .el-scrollbar__wrap {
    overflow: scroll;
  }
.box .el-scrollbar__wrap {
  overflow: scroll;
}
</style>

 src/views/system/cs.vue

@@ -30,7 +30,7 @@
          v-if="permission.tenant_delete"
          plain
          @click="handleDelete"
        >删 除
          >删 除
        </el-button>
        <!--        <el-button size="small"-->
        <!--                   plain-->
@@ -48,7 +48,7 @@
      <template slot-scope="{ row }" slot="accountNumber">
        <el-tag>{{
          row.accountNumber > 0 ? row.accountNumber : "不限制"
          }}</el-tag>
        }}</el-tag>
      </template>
      <template slot-scope="{ row }" slot="expireTime">
        <el-tag>{{ row.expireTime ? row.expireTime : "不限制" }}</el-tag>
@@ -56,13 +56,13 @@
      <template slot-scope="{ row }" slot="type">
        <el-tag>{{
          row.type === "0"
          ? "医院"
          : row.type === "1"
          ? "学校"
          : row.type === "2"
          ? "小区"
          : "未知"
          }}</el-tag>
            ? "医院"
            : row.type === "1"
            ? "学校"
            : row.type === "2"
            ? "小区"
            : "未知"
        }}</el-tag>
      </template>
    </avue-crud>
    <el-dialog
@@ -125,7 +125,7 @@
                  ? 'baojinl'
                  : '',
              ]"
            >{{ scope.row.states }}</el-tag
              >{{ scope.row.states }}</el-tag
            >
          </template>
        </avue-crud>
@@ -135,1331 +135,1330 @@
</template>

<script>
  import { getListliu, getListliuc } from "@/api/client/client";
  import {
    getList,
    getDetail,
    remove,
    update,
    add,
    setting,
    datasource,
    instery,
    updateInfoy,
    selectTy,
    insertss,
    updateInfos,
    selectTs,
    insertsr,
    updateInfor,
    selectTr,
    deletey,
    deletes,
    deleter,
  } from "@/api/system/tenant";
  import { mapGetters } from "vuex";
  import website from "@/config/website";
  import { getRoleTree } from "@/api/system/role";
  import AvueMap from "avue-plugin-map";
  var that;
  export default {
    data() {
      that = this;
      return {
        form: {},
        selectionList: [],
        query: {},
        loading: true,
        box: false,
        datasourceBox: false,
        dialogVisible: false, //右侧弹窗
        onceData: {}, //数据
        datas: [], //cc
        loadings: true, //等待
        querys: {}, //搜索
        isEdit: false,
        pages: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
import { getListliu, getListliuc } from "@/api/client/client";
import {
  getList,
  getDetail,
  remove,
  update,
  add,
  setting,
  datasource,
  instery,
  updateInfoy,
  selectTy,
  insertss,
  updateInfos,
  selectTs,
  insertsr,
  updateInfor,
  selectTr,
  deletey,
  deletes,
  deleter,
} from "@/api/system/tenant";
import { mapGetters } from "vuex";
import website from "@/config/website";
import { getRoleTree } from "@/api/system/role";
import AvueMap from "avue-plugin-map";
var that;
export default {
  data() {
    that = this;
    return {
      form: {},
      selectionList: [],
      query: {},
      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",
        },
        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",
              },
            ],
          },
          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,
          total: 0,
        },
        option: {
          height: "auto",
          calcHeight: 54,
          size: "mini",
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: false,
          stripe: true,
          index: true,
          selection: true,
          viewBtn: true,
          //dialogType: 'drawer',
          dialogClickModal: false,
          //  searchSize: 'mini',
          column: [
            {
              label: "业主ID",
              prop: "tenantId",
              width: 100,
              addDisplay: false,
              editDisplay: false,
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入租户ID",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "业主名称",
              prop: "tenantName",
              search: true,
              width: 190,
              span: 12,
              searchSpan: 3,
              rules: [
                {
                  required: true,
                  message: "请输入参数名称",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "联系人",
              prop: "linkman",
              width: 100,
              search: true,
              searchSpan: 3,
              rules: [
                {
                  required: true,
                  message: "请输入联系人",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "联系电话",
              prop: "contactNumber",
              width: 150,
            },
            {
              label: "省份",
              prop: "province",
              search: true,
              searchSpan: 3,
              searchLabelWidth: 45,
              placeholder: "省份",
              type: "select",
              props: {
                label: "name",
                value: "code",
          {
            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,
        total: 0,
      },
      option: {
        height: "auto",
        calcHeight: 54,
        size: "mini",
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        //stripe:true,
        index: true,
        selection: true,
        viewBtn: true,
        //dialogType: 'drawer',
        dialogClickModal: false,
        //  searchSize: 'mini',
        column: [
          {
            label: "业主ID",
            prop: "tenantId",
            width: 100,
            addDisplay: false,
            editDisplay: false,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入租户ID",
                trigger: "blur",
              },
              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",
            ],
          },
          {
            label: "业主名称",
            prop: "tenantName",
            search: true,
            width: 190,
            span: 12,
            searchSpan: 3,
            rules: [
              {
                required: true,
                message: "请输入参数名称",
                trigger: "blur",
              },
              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",
            ],
          },
          {
            label: "联系人",
            prop: "linkman",
            width: 100,
            search: true,
            searchSpan: 3,
            rules: [
              {
                required: true,
                message: "请输入联系人",
                trigger: "blur",
              },
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass3",
            ],
          },
          {
            label: "联系电话",
            prop: "contactNumber",
            width: 150,
          },
          {
            label: "省份",
            prop: "province",
            search: true,
            searchSpan: 3,
            searchLabelWidth: 45,
            placeholder: "省份",
            type: "select",
            props: {
              label: "name",
              value: "code",
            },
            {
              label: "地址",
              prop: "address",
              span: 10,
              // labelWidth: '60',
              hide: true,
            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",
            },
            {
              label: null,
              prop: "map",
              labelWidth: "0",
              searchSpan: 0,
              maxlength: 0,
              hide: true,
              span: 2,
              // display:false,
              component: "AvueMap",
            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",
            },
            {
              label: "纬度",
              hide: true,
              addDisplay: false,
              prop: "wd",
              span: 6,
            },
            {
              label: "经度",
              labelWidth: "50",
              hide: true,
              addDisplay: false,
              prop: "jd",
              span: 5,
            },
            {
              label: "账号额度",
              prop: "accountNumber",
              width: 90,
              slot: true,
              hide: true,
              addDisplay: false,
              editDisplay: false,
            },
            {
              label: "过期时间",
              prop: "expireTime",
              width: 180,
              slot: true,
              hide: true,
              addDisplay: false,
              editDisplay: false,
            },
            {
              label: "类型",
              prop: "type",
              width: 80,
              type: "select",
              rules: [
                {
                  required: true,
                  message: "请选择类型",
                  trigger: "blur",
                },
              ],
              dicData: [
                {
                  label: "医院",
                  value: "0",
                },
                {
                  label: "学校",
                  value: "1",
                },
                {
                  label: "小区",
                  value: "2",
                },
              ],
              change: function (value, column) {
                if (value.value == "0") {
                  that.option.group = [
                    {
                      label: "详细信息",
                      prop: "detailInfo",
                      icon: "el-icon-s-order",
                      column: [
                        {
                          label: "医院等级",
                          prop: "dj",
                          hide: true,
                          dicData: [],
                          props: {
                            label: "title",
                            value: "",
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 3,
            labelWidth: "0",
            className: "cityClass3",
          },
          {
            label: "地址",
            prop: "address",
            span: 10,
            // labelWidth: '60',
            hide: true,
          },
          {
            label: null,
            prop: "map",
            labelWidth: "0",
            searchSpan: 0,
            maxlength: 0,
            hide: true,
            span: 2,
            // display:false,
            component: "AvueMap",
          },
          {
            label: "纬度",
            hide: true,
            addDisplay: false,
            prop: "wd",
            span: 6,
          },
          {
            label: "经度",
            labelWidth: "50",
            hide: true,
            addDisplay: false,
            prop: "jd",
            span: 5,
          },
          {
            label: "账号额度",
            prop: "accountNumber",
            width: 90,
            slot: true,
            hide: true,
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "过期时间",
            prop: "expireTime",
            width: 180,
            slot: true,
            hide: true,
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "类型",
            prop: "type",
            width: 80,
            type: "select",
            rules: [
              {
                required: true,
                message: "请选择类型",
                trigger: "blur",
              },
            ],
            dicData: [
              {
                label: "医院",
                value: "0",
              },
              {
                label: "学校",
                value: "1",
              },
              {
                label: "小区",
                value: "2",
              },
            ],
            change: function (value, column) {
              if (value.value == "0") {
                that.option.group = [
                  {
                    label: "详细信息",
                    prop: "detailInfo",
                    icon: "el-icon-s-order",
                    column: [
                      {
                        label: "医院等级",
                        prop: "dj",
                        hide: true,
                        dicData: [],
                        props: {
                          label: "title",
                          value: "",
                        },
                        checkStrictly: true,
                        rules: [
                          {
                            required: true,
                            message: "请输入医院等级",
                            trigger: "blur",
                          },
                          checkStrictly: true,
                          rules: [
                            {
                              required: true,
                              message: "请输入医院等级",
                              trigger: "blur",
                            },
                          ],
                        },
                        {
                          label: "医院类别",
                          prop: "ht",
                          rules: [
                            {
                              required: true,
                              message: "请输入医院类别",
                              trigger: "blur",
                            },
                          ],
                        },
                        {
                          label: "成立时间",
                          type: "datetime",
                          prop: "ctime",
                          format: "yyyy-MM-dd",
                          valueFormat: "yyyy-MM-dd",
                          rules: [
                            {
                              required: true,
                              message: "请输入成立时间",
                              trigger: "blur",
                            },
                          ],
                        },
                        {
                          label: "介绍",
                          prop: "content",
                          rules: [
                            {
                              required: true,
                              message: "请输入介绍",
                              trigger: "blur",
                            },
                          ],
                          span: 24,
                        },
                      ],
                    },
                  ];
                } else if (value.value == "1") {
                  that.option.group = [
                    {
                      label: "详细信息",
                      prop: "dutyInfo",
                      icon: "el-icon-s-custom",
                      column: [
                        {
                          label: "学校性质",
                          prop: "nature",
                          hide: true,
                          dicData: [],
                          props: {
                            label: "title",
                            value: "",
                        ],
                      },
                      {
                        label: "医院类别",
                        prop: "ht",
                        rules: [
                          {
                            required: true,
                            message: "请输入医院类别",
                            trigger: "blur",
                          },
                          rules: [
                            {
                              required: true,
                              message: "请输入学校性质",
                              trigger: "blur",
                            },
                          ],
                        },
                        {
                          label: "校训",
                          prop: "motto",
                          rules: [
                            {
                              required: true,
                              message: "请输入校训",
                              trigger: "blur",
                            },
                          ],
                        },
                        {
                          label: "创办时间",
                          type: "datetime",
                          prop: "ctime",
                          format: "yyyy-MM-dd",
                          valueFormat: "yyyy-MM-dd",
                          rules: [
                            {
                              required: true,
                              message: "请输入创办时间",
                            },
                          ],
                        },
                        {
                          label: "介绍",
                          prop: "content",
                          span: 24,
                          rules: [
                            {
                              required: true,
                              message: "请输入介绍",
                            },
                          ],
                        },
                      ],
                    },
                  ];
                } else if (value.value == "2") {
                  that.option.group = [
                    {
                      label: "详细信息",
                      prop: "baseInfo",
                      icon: "el-icon-s-solid",
                      column: [
                        {
                          label: "小区类别",
                          prop: "category",
                          hide: true,
                          dicData: [],
                          props: {
                            label: "title",
                            value: "",
                        ],
                      },
                      {
                        label: "成立时间",
                        type: "datetime",
                        prop: "ctime",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                          {
                            required: true,
                            message: "请输入成立时间",
                            trigger: "blur",
                          },
                          rules: [
                            {
                              required: true,
                              message: "请输入小区类别",
                            },
                          ],
                        ],
                      },
                      {
                        label: "介绍",
                        prop: "content",
                        rules: [
                          {
                            required: true,
                            message: "请输入介绍",
                            trigger: "blur",
                          },
                        ],
                        span: 24,
                      },
                    ],
                  },
                ];
              } else if (value.value == "1") {
                that.option.group = [
                  {
                    label: "详细信息",
                    prop: "dutyInfo",
                    icon: "el-icon-s-custom",
                    column: [
                      {
                        label: "学校性质",
                        prop: "nature",
                        hide: true,
                        dicData: [],
                        props: {
                          label: "title",
                          value: "",
                        },
                        {
                          label: "小区属性",
                          prop: "attributes",
                          rules: [
                            {
                              required: true,
                              message: "请输入小区属性",
                            },
                          ],
                        rules: [
                          {
                            required: true,
                            message: "请输入学校性质",
                            trigger: "blur",
                          },
                        ],
                      },
                      {
                        label: "校训",
                        prop: "motto",
                        rules: [
                          {
                            required: true,
                            message: "请输入校训",
                            trigger: "blur",
                          },
                        ],
                      },
                      {
                        label: "创办时间",
                        type: "datetime",
                        prop: "ctime",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                          {
                            required: true,
                            message: "请输入创办时间",
                          },
                        ],
                      },
                      {
                        label: "介绍",
                        prop: "content",
                        span: 24,
                        rules: [
                          {
                            required: true,
                            message: "请输入介绍",
                          },
                        ],
                      },
                    ],
                  },
                ];
              } else if (value.value == "2") {
                that.option.group = [
                  {
                    label: "详细信息",
                    prop: "baseInfo",
                    icon: "el-icon-s-solid",
                    column: [
                      {
                        label: "小区类别",
                        prop: "category",
                        hide: true,
                        dicData: [],
                        props: {
                          label: "title",
                          value: "",
                        },
                        {
                          label: "开发商",
                          prop: "developers",
                          rules: [
                            {
                              required: true,
                              message: "请输入开发商",
                            },
                          ],
                        },
                        {
                          label: "户型",
                          prop: "housetype",
                          rules: [
                            {
                              required: true,
                              message: "请输入户型",
                            },
                          ],
                        },
                        {
                          label: "介绍",
                          prop: "content",
                          rules: [
                            {
                              required: true,
                              message: "请输入介绍",
                            },
                          ],
                          span: 24,
                        },
                      ],
                    },
                  ];
                } else {
                  that.option.group = [];
                }
                        rules: [
                          {
                            required: true,
                            message: "请输入小区类别",
                          },
                        ],
                      },
                      {
                        label: "小区属性",
                        prop: "attributes",
                        rules: [
                          {
                            required: true,
                            message: "请输入小区属性",
                          },
                        ],
                      },
                      {
                        label: "开发商",
                        prop: "developers",
                        rules: [
                          {
                            required: true,
                            message: "请输入开发商",
                          },
                        ],
                      },
                      {
                        label: "户型",
                        prop: "housetype",
                        rules: [
                          {
                            required: true,
                            message: "请输入户型",
                          },
                        ],
                      },
                      {
                        label: "介绍",
                        prop: "content",
                        rules: [
                          {
                            required: true,
                            message: "请输入介绍",
                          },
                        ],
                        span: 24,
                      },
                    ],
                  },
                ];
              } else {
                that.option.group = [];
              }
            },
          },
          {
            label: "绑定域名",
            prop: "domain",
            hide: true,
          },
          {
            label: "系统背景",
            prop: "backgroundUrl",
            type: "upload",
            listType: "picture-img",
            action: "/api/blade-resource/oss/endpoint/put-file",
            propsHttp: {
              res: "data",
              url: "link",
            },
            hide: true,
            span: 24,
          },
        ],
        group: [],
      },
      data: [],
      settingForm: {},
      settingOption: {
        column: [
          {
            label: "账号额度",
            prop: "accountNumber",
            type: "number",
            span: 24,
          },
          {
            label: "过期时间",
            prop: "expireTime",
            type: "date",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            span: 24,
          },
        ],
      },
      datasourceForm: {},
      datasourceOption: {
        column: [
          {
            label: "数据源",
            prop: "datasourceId",
            search: true,
            span: 24,
            type: "select",
            dicUrl: "/api/blade-develop/datasource/select",
            props: {
              label: "name",
              value: "id",
            },
            rules: [
              {
                required: true,
                message: "请选择数据源",
                trigger: "blur",
              },
            },
            {
              label: "绑定域名",
              prop: "domain",
              hide: true,
            },
            {
              label: "系统背景",
              prop: "backgroundUrl",
              type: "upload",
              listType: "picture-img",
              action: "/api/blade-resource/oss/endpoint/put-file",
              propsHttp: {
                res: "data",
                url: "link",
              },
              hide: true,
              span: 24,
            },
          ],
          group: [],
        },
        data: [],
        settingForm: {},
        settingOption: {
          column: [
            {
              label: "账号额度",
              prop: "accountNumber",
              type: "number",
              span: 24,
            },
            {
              label: "过期时间",
              prop: "expireTime",
              type: "date",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              span: 24,
            },
          ],
        },
        datasourceForm: {},
        datasourceOption: {
          column: [
            {
              label: "数据源",
              prop: "datasourceId",
              search: true,
              span: 24,
              type: "select",
              dicUrl: "/api/blade-develop/datasource/select",
              props: {
                label: "name",
                value: "id",
              },
              rules: [
                {
                  required: true,
                  message: "请选择数据源",
                  trigger: "blur",
                },
              ],
            },
          ],
        },
            ],
          },
        ],
      },
    };
  },
  //报错: TypeError: val is undefined 处理时间2021.4.10，处理人  liuyg
  watch: {
    "form.map": {
      // form是表单或者表格绑定的数据集，v-model='form'
      handler(val) {
        if (val) {
          // 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,
    },
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.tenant_add, false),
        viewBtn: this.vaildData(this.permission.tenant_view, false),
        delBtn: this.vaildData(this.permission.tenant_delete, false),
        editBtn: this.vaildData(this.permission.tenant_edit, false),
      };
    },
    //报错: TypeError: val is undefined 处理时间2021.4.10，处理人  liuyg
    watch: {
      "form.map": {
        // form是表单或者表格绑定的数据集，v-model='form'
        handler(val) {
          if (val) {
            // 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;
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    tenantId() {
      return this.selectionList[0].tenantId;
    },
  },
  methods: {
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          debugger;
          if (row.type == "0") {
            console.log(123);
            instery(
              row.dj,
              // row.had,
              row.ht,
              row.ctime,
              row.content,
              row.tenantName
            );
          } else if (row.type == "1") {
            insertss(
              row.nature,
              row.had,
              // row.had,
              row.motto,
              row.ctime,
              row.content,
              row.tenantName
            );
          } else if (row.type == "2") {
            insertsr(
              row.category,
              row.attributes,
              row.developers,
              row.housetype,
              row.content,
              row.tenantName
            );
          }
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        immediate: true,
      },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    computed: {
      ...mapGetters(["userInfo", "permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.tenant_add, false),
          viewBtn: this.vaildData(this.permission.tenant_view, false),
          delBtn: this.vaildData(this.permission.tenant_delete, false),
          editBtn: this.vaildData(this.permission.tenant_edit, false),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
          ids.push(ele.id);
    rowUpdate(row, index, done, loading) {
      debugger;
      if (row.type == "0") {
        updateInfoy(
          row.dj,
          row.had,
          row.ht,
          row.ctime,
          row.content,
          row.tenantName
        );
      } else if (row.type == "1") {
        updateInfos(
          row.nature,
          row.had,
          row.motto,
          row.ctime,
          row.content,
          row.tenantName
        );
      } else if (row.type == "2") {
        updateInfor(
          row.category,
          row.attributes,
          row.developers,
          row.had,
          row.housetype,
          row.content,
          row.tenantName
        );
      }
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          debugger;
          if (row.type == "0") {
            deletey(row.tenantName);
          } else if (row.type == "1") {
            deletes(row.tenantName);
          } else if (row.type == "2") {
            deleter(row.tenantName);
          }
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
        return ids.join(",");
      },
      tenantId() {
        return this.selectionList[0].tenantId;
      },
    },
    methods: {
      rowSave(row, done, loading) {

        add(row).then(
          () => {
            debugger
            if (row.type == "0") {
              console.log(123);
              instery(
                row.dj,
                // row.had,
                row.ht,
                row.ctime,
                row.content,
                row.tenantName
              );
            } else if (row.type == "1") {
              insertss(
                row.nature,
                row.had,
                // row.had,
                row.motto,
                row.ctime,
                row.content,
                row.tenantName
              );
            } else if (row.type == "2") {
              insertsr(
                row.category,
                row.attributes,
                row.developers,
                row.housetype,
                row.content,
                row.tenantName
              );
            }
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            done();
          },
          (error) => {
            window.console.log(error);
            loading();
          }
        );
      },
      rowUpdate(row, index, done, loading) {
        debugger
        if (row.type == "0") {
          updateInfoy(
            row.dj,
            row.had,
            row.ht,
            row.ctime,
            row.content,
            row.tenantName
          );
        } else if (row.type == "1") {
          updateInfos(
            row.nature,
            row.had,
            row.motto,
            row.ctime,
            row.content,
            row.tenantName
          );
        } else if (row.type == "2") {
          updateInfor(
            row.category,
            row.attributes,
            row.developers,
            row.had,
            row.housetype,
            row.content,
            row.tenantName
          );
        }
        update(row).then(
          () => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            done();
          },
          (error) => {
            window.console.log(error);
            loading();
          }
        );
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            debugger
            if (row.type == "0") {
              deletey(row.tenantName);
            } else if (row.type == "1") {
              deletes(row.tenantName);
            } else if (row.type == "2") {
              deleter(row.tenantName);
            }
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          });
      },
      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.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;
                //.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.housetype = re.data.data[0].housetype;
                data.content = re.data.data[0].content;
                this.form = data;
              });
            }
          });
        } else if (["view"].includes(type)) {
          getDetail(this.form.id).then((res) => {
            if (this.form.type == "1") {
              selectTs(this.form.tenantName).then((re) => {
                const data = res.data.data;
                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.content = re.data.data[0].content;
                if (!(data.accountNumber > 0)) {
                  data.accountNumber = "不限制";
                }
                if (!data.expireTime) {
                  data.expireTime = "不限制";
                }
                this.form = data;
              });
            } else if (this.form.type == "0") {
              selectTy(this.form.tenantName).then((re) => {
                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;
                data.content = re.data.data[0].content;
                if (!(data.accountNumber > 0)) {
                  data.accountNumber = "不限制";
                }
                if (!data.expireTime) {
                  data.expireTime = "不限制";
                }
                this.form = data;
              });
            } else if (this.form.type == "2") {
              selectTr(this.form.tenantName).then((re) => {
                const data = res.data.data;
                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.housetype = re.data.data[0].housetype;
                data.content = re.data.data[0].content;
                if (!(data.accountNumber > 0)) {
                  data.accountNumber = "不限制";
                }
                if (!data.expireTime) {
                  data.expireTime = "不限制";
                }
                this.form = data;
              });
            }
          });
        }

        if (["edit"].includes(type)) {
          that.isEdit = false;
        }
        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();
      },
      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();
          });
      },
      handleSetting() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        if (this.selectionList.length === 1) {
          getDetail(this.selectionList[0].id).then((res) => {
    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;
            this.settingForm.accountNumber = data.accountNumber;
            this.settingForm.expireTime = data.expireTime;
            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.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;
              //.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.housetype = re.data.data[0].housetype;
              data.content = re.data.data[0].content;
              this.form = data;
            });
          }
        });
      } else if (["view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          if (this.form.type == "1") {
            selectTs(this.form.tenantName).then((re) => {
              const data = res.data.data;
              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.content = re.data.data[0].content;
              if (!(data.accountNumber > 0)) {
                data.accountNumber = "不限制";
              }
              if (!data.expireTime) {
                data.expireTime = "不限制";
              }
              this.form = data;
            });
          } else if (this.form.type == "0") {
            selectTy(this.form.tenantName).then((re) => {
              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;
              data.content = re.data.data[0].content;
              if (!(data.accountNumber > 0)) {
                data.accountNumber = "不限制";
              }
              if (!data.expireTime) {
                data.expireTime = "不限制";
              }
              this.form = data;
            });
          } else if (this.form.type == "2") {
            selectTr(this.form.tenantName).then((re) => {
              const data = res.data.data;
              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.housetype = re.data.data[0].housetype;
              data.content = re.data.data[0].content;
              if (!(data.accountNumber > 0)) {
                data.accountNumber = "不限制";
              }
              if (!data.expireTime) {
                data.expireTime = "不限制";
              }
              this.form = data;
            });
          }
        });
      }

      if (["edit"].includes(type)) {
        that.isEdit = false;
      }
      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();
    },
    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: "操作成功!",
          });
        } else {
          this.settingForm.accountNumber = -1;
          this.settingForm.expireTime = "";
        }
        this.box = true;
      },
      handleDatasource() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        if (this.selectionList.length !== 1) {
          this.$message.warning("只能选择一条数据");
          return;
        }
          this.$refs.crud.toggleSelection();
        });
    },
    handleSetting() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      if (this.selectionList.length === 1) {
        getDetail(this.selectionList[0].id).then((res) => {
          const data = res.data.data;
          this.datasourceForm.datasourceId = data.datasourceId;
          this.settingForm.accountNumber = data.accountNumber;
          this.settingForm.expireTime = data.expireTime;
        });
        this.datasourceBox = true;
      },
      handleSubmit(form, done, loading) {
        setting(this.ids, form).then(
          () => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "配置成功!",
            });
            done();
            this.box = false;
          },
          (error) => {
            window.console.log(error);
            loading();
          }
        );
      },
      handleDatasourceSubmit(form, done, loading) {
        datasource(this.tenantId, form.datasourceId).then(
          () => {
            this.$message({
              type: "success",
              message: "配置成功!",
            });
            done();
            this.datasourceBox = false;
          },
          (error) => {
            window.console.log(error);
            loading();
          }
        );
      },
      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;
        getList(
          page.currentPage,
          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;
          this.loading = false;
          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 = "预警";
            //   }
            // }
            states =
              dat[key].dtype == 0
                ? "掉线"
                : dat[key].dtype == 1
                ? "正常"
                : dat[key].dtype == 2
                  ? "预警"
                  : dat[key].dtype == 3
                    ? "故障"
                    : "";
            // 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;
          }
        );
      },
      } else {
        this.settingForm.accountNumber = -1;
        this.settingForm.expireTime = "";
      }
      this.box = true;
    },
    mounted() {},
  };
    handleDatasource() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      if (this.selectionList.length !== 1) {
        this.$message.warning("只能选择一条数据");
        return;
      }
      getDetail(this.selectionList[0].id).then((res) => {
        const data = res.data.data;
        this.datasourceForm.datasourceId = data.datasourceId;
      });
      this.datasourceBox = true;
    },
    handleSubmit(form, done, loading) {
      setting(this.ids, form).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "配置成功!",
          });
          done();
          this.box = false;
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    handleDatasourceSubmit(form, done, loading) {
      datasource(this.tenantId, form.datasourceId).then(
        () => {
          this.$message({
            type: "success",
            message: "配置成功!",
          });
          done();
          this.datasourceBox = false;
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    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;
      getList(
        page.currentPage,
        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;
        this.loading = false;
        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 = "预警";
          //   }
          // }
          states =
            dat[key].dtype == 0
              ? "掉线"
              : dat[key].dtype == 1
              ? "正常"
              : dat[key].dtype == 2
              ? "预警"
              : dat[key].dtype == 3
              ? "故障"
              : "";
          // 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>

<style lang="scss" >
  //scoped
  $city-m-l: 10px;
//scoped
$city-m-l: 10px;

  /*页面样式clientManagement.vue的样式   liuyg改*/
  .el-card__body .city1 {
    width: 155px;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }
/*页面样式clientManagement.vue的样式   liuyg改*/
.el-card__body .city1 {
  width: 155px;
  padding-right: 0px !important;
  margin-left: $city-m-l;
}

  .el-card__body .city2 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }
.el-card__body .city2 {
  width: 100px;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-left: $city-m-l;
}

  .el-card__body .city3 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }
.el-card__body .city3 {
  width: 100px;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-left: $city-m-l;
}

  /*新增窗体样式*/
  .el-dialog .city1 {
    width: 210px;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }
/*新增窗体样式*/
.el-dialog .city1 {
  width: 210px;
  padding-right: 0px !important;
  margin-left: $city-m-l;
}

  .el-dialog .city2 {
    width: 105px;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-left: $city-m-l;
  }
.el-dialog .city2 {
  width: 105px;
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-left: $city-m-l;
}

  .el-dialog .city3 {
    width: 105px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }
  .city2 div label {
    display: none;
  }
.el-dialog .city3 {
  width: 105px;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-left: $city-m-l;
}
.city2 div label {
  display: none;
}

  .city3 div label {
    display: none;
  }
.city3 div label {
  display: none;
}

  /*页面样式*/
  .el-card__body .cityClass1 {
    width: 155px;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }
/*页面样式*/
.el-card__body .cityClass1 {
  width: 155px;
  padding-right: 0px !important;
  margin-left: $city-m-l;
}

  .el-card__body .cityClass2 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }
.el-card__body .cityClass2 {
  width: 100px;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-left: $city-m-l;
}

  .el-card__body .cityClass3 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: $city-m-l;
  }
.el-card__body .cityClass3 {
  width: 100px;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-left: $city-m-l;
}

  /*新增窗体样式*/
  .el-dialog .cityClass1,
  .el-dialog .cityClass2,
  .el-dialog .cityClass3 {
    margin-left: $city-m-l;
    position: relative;
    left: -10px;
  }
  .el-dialog .cityClass1 {
    width: 220px;
    padding-right: 0px !important;
  }
/*新增窗体样式*/
.el-dialog .cityClass1,
.el-dialog .cityClass2,
.el-dialog .cityClass3 {
  margin-left: $city-m-l;
  position: relative;
  left: -10px;
}
.el-dialog .cityClass1 {
  width: 220px;
  padding-right: 0px !important;
}

  .el-dialog .cityClass2 {
    width: 130px;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
.el-dialog .cityClass2 {
  width: 130px;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

  .el-dialog .cityClass3 {
    width: 130px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
.el-dialog .cityClass3 {
  width: 130px;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

  .cityClass2 div label {
    display: none;
  }
.cityClass2 div label {
  display: none;
}

  .cityClass3 div label {
    display: none;
  }
.cityClass3 div label {
  display: none;
}

  .tabFontSize {
    font-size: 15px;
  }
.tabFontSize {
  font-size: 15px;
}

  .el-input__inner {
    width: aotu;
  }
  .right-open {
    //右侧弹窗样式
    display: flex;
    justify-content: center;
    align-items: Center;
.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;

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