real3d-portalsite/src/views/complianceAnalysis/components/lsjl.vue

<template>
  <div class="tpwjxm">
    <el-row>
      <el-col :span="13">
        <!-- datetimerange value-format="yyyy-MM-dd" :clearable="false"align="left" -->
        <el-date-picker
          v-model="pageObj.sj"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="datepicker"
          size="mini"
          @change="changedate"
        >
        </el-date-picker>
      </el-col>

      <el-col :span="1">
        <div class="max-width" style="height: 10px"></div>
      </el-col>
      <el-col :span="10">
        <el-input
          v-model="pageObj.xmmc"
          placeholder="请输入项目名称"
          class="input-style"
          size="mini"
          @input="changeForm"
        >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
          <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
        </el-input>
      </el-col>
    </el-row>
    <div
      class="listDiv"
      v-infinite-scroll="infiniteScroll"
      :infinite-scroll-disabled="listdisabled"
    >
      <div
        class="dataItem"
        v-for="(item, dindex) in datalist"
        :class="now == item.bsm ? 'dataItemHight' : ''"
        :key="item.bsm"
        @click="zoomItem(item)"
      >
        <!-- <div>{{ dindex + 1 }}. 项目名称：{{ item.xmmc }}</div> -->
        <div class="index">{{ dindex + 1 }}</div>
        <div class="nameTitle">{{ item.xmmc }}</div>
        <div>建设单位：{{ item.jsdw }}</div>
        <div class="item_bottom">
          <el-tag type="warning" v-if="item.rwzt == 0">创建</el-tag>
          <el-tag v-if="item.rwzt == 1">执行中</el-tag>
          <el-tag type="success" v-if="item.rwzt == 2">完成</el-tag>
          <el-tag type="danger" v-if="item.rwzt == 3">错误</el-tag>
          <div>
            <span class="button" @click.stop="checkRz(item)">日志</span>
            <span class="button" @click="checkDetails(item)">结果</span>
            <span class="button" v-if="item.fxbg" @click.stop="report(item)"
              >报告</span
            >
            <span
              class="button"
              @click.stop="del(item)"
              v-if="item.rwzt == 2 || item.rwzt == 3 || item.rwzt == 99"
              >删除</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import parse from "wellknown";
import { GetPage, Delect } from "@/api/ghss/hgxfx.js";
import { Message, MessageBox } from "element-ui";
import { rest } from "lodash";
import { GetXzResList, DelXzRes } from "../../../api/ghss/ghxz.js";
let dataSources;
export default {
  props: {
    historyList: {
      type: Array,
    },
    type: {
      type: String,
    },
    recordBsm: {
      type: String,
    },
  },
  data() {
    return {
      pageObj: {
        kssj: "",
        sj: [],
        jssj: "",
        xmmc: "",
        page: 1,
      },
      defaultTime1: [
        new Date(2023, 1, 1, 0, 0, 0),
        new Date(2023, 2, 1, 23, 59, 59),
      ], // '00:00:00', '23:59:59'
      datalist: [],
      listdisabled: false,
      now: "",
      // recordBsm: "", //辅助选址成功后的标识码
    };
  },
  mounted() {
    // this.getData();
    // this.bus.$on("recordBsm", (val) => {
    //   console.log(val, "recordBsm");
    //   this.recordBsm = val
    // });
  },
  methods: {
    report(item) {
      window.open(item.fxbg.replace(".docx", ".pdf"), "_blank");
    },
    del(item) {
      MessageBox.confirm(
        "该操作将会删除此数据且不可恢复，您确定要删除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          if (this.$props.type == "hgxfx") {
            Delect({ bsm: item.bsm }).then((res) => {
              if (res.success) {
                Message.success("删除成功！");
                this.changeForm();
              }
            });
          } else {
            DelXzRes({ bsm: item.bsm }).then((res) => {
              if (res.success) {
                Message.success("删除成功！");
                this.changeForm();
              }
            });
          }
        })
        .catch(() => {});
    },
    checkDetails(item) {
      this.$emit("updateParent", "nowObj", item);
      let next = this.$props.type == "hgxfx" ? "scjg" : "xzjg";
      this.$emit("updateParent", "activeTabs", next);
      if (this.$props.type != "hgxfx") {
        this.$emit("updateParent", "rwBsm", item.bsm);
      }
    },
    checkRz(item) {
      this.$emit("updateParent", "nowObj", item);
      this.$emit("updateParent", "rzBsm", item.bsm);
    },
    infiniteScroll() {
      this.pageObj.page += 1;
      this.listdisabled = true;
      this.$emit("updateParent", "loading", true);
      setTimeout(() => {
        this.getData();
      }, 500);
    },
    changeForm() {
      this.pageObj.page = 1;
      this.datalist = [];
      this.getData();
    },
    changedate(val) {
      if (val) {
        this.pageObj.kssj = this.pageObj.sj[0];
        this.pageObj.jssj = this.pageObj.sj[1];
      } else {
        this.pageObj.kssj = "";
        this.pageObj.jssj = "";
      }
      this.changeForm();
    },

    getData() {
      this.$emit("updateParent", "loading", true);
      if (this.$props.type == "hgxfx") {
        GetPage({ ...this.pageObj }).then((res) => {
          setTimeout(() => {
            this.$emit("updateParent", "loading", false);
          }, 100);
          this.listdisabled = res.data.length < 10;
          this.datalist = [...this.datalist, ...res.data];
        });
      } else {
        let tempObj = { ...this.pageObj };
        let obj = {
          startTime: tempObj.kssj,
          endTime: tempObj.jssj,
          name: tempObj.xmmc,
          pageNum: 1,
          pageSize: 10,
        };
        GetXzResList(obj).then((res) => {
          setTimeout(() => {
            this.$emit("updateParent", "loading", false);
          }, 100);
          this.listdisabled = res.data.items.length < 10;
          this.datalist = [...this.datalist, ...res.data.items];
        });
      }
    },
    zoomItem(item) {
      this.now = item.bsm;
      this.addPolygon(parse(item.geom));
    },
    // 加载GeoJSON数据
    addPolygon(geojson) {
      this.reset();
      let polygon = Cesium.GeoJsonDataSource.load(geojson, {
        clampToGround: true,
        stroke: Cesium.Color.RED,
        fill: Cesium.Color.WHITE.withAlpha(0.3),
        strokeWidth: 5,
      });
      polygon.then(function (dataSource) {
        dataSources = dataSource;
        viewer.dataSources.add(dataSource);
        viewer.zoomTo(dataSource);
      });
    },
    reset() {
      if (dataSources) viewer.dataSources.remove(dataSources);
      dataSources = undefined;
    },
  },
  watch: {},
  beforeDestroy() {
    this.pageObj = {
      kssj: "",
      sj: [],
      jssj: "",
      xmmc: "",
      page: 1,
    };
  },
};
</script>

<style lang="scss" scoped>
.tpwjxm {
  width: 100%;
  height: 100%;

  .el-form-item {
    margin-bottom: 5px;
  }

  .datepicker {
    width: 100% !important;
    span {
      display: flex;
      align-items: center;
    }
  }
  .el-icon-search {
    color: #20a0fc;
  }
  .listDiv {
    width: 100%;
    height: calc(100% - 40px);
    padding-top: 10px;
    padding-right: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #fff;

    .dataItem {
      height: 80px;
      border-bottom: 1px solid #667e8f;
      padding-left: 30px;
      position: relative;
      margin-bottom: 10px;
      color: #cddeeb;
      line-height: 20px;
    }
    .dataItem:hover,
    .dataItemHight {
      // border: 1px solid #02a7f0;
      background-color: rgba(64, 158, 255, 0.2);
    }
    .index {
      width: 30px;
      height: 100%;
      line-height: 70px;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      position: absolute;
      left: 0;
    }
    .nameTitle {
      color: #ffffff;
      font-size: 16px;
      line-height: 24px;
    }
    .item_bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      .el-tag {
        // margin-top: 14px;
        width: 48px;
        height: 18px;
        line-height: 18px;
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;

        border-radius: 0px 0px 2px 14px;
        border-color: transparent;
      }
      .el-tag--success {
        background: linear-gradient(
          170deg,
          rgba(0, 200, 128, 0.6) 0%,
          rgba(155, 255, 139, 0.7) 100%
        );
      }
      .el-tag--warning {
        background: linear-gradient(
          170deg,
          rgba(249, 180, 71, 0.6) 0%,
          rgba(249, 180, 71, 0.6) 100%
        );
      }
      .el-tag--light {
        background: linear-gradient(
          170deg,
          rgba(255, 126, 33, 0.6) 0%,
          rgba(255, 166, 33, 0.7) 100%
        );
      }

      .el-tag--danger {
        background: linear-gradient(
          170deg,
          rgba(200, 0, 0, 0.6) 0%,
          rgba(255, 105, 105, 0.6) 100%
        );
      }
      .button {
        width: 48px;
        height: 20px;
        font-size: 14px;
        line-height: 20px;
        color: #b6e0ff;
        text-align: center;
        display: inline-block;
        background-image: url("/static/images/ghzc/btnbg.png");
        background-size: 100% 100%;
        cursor: pointer;
        margin-right: 8px;
      }
    }
  }
}
</style>

<style lang="scss">
@import "../../cockpit/datePicker.scss";
</style>