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

<template>
  <div class="tpwjxm">
    <el-row>
      <el-col :span="13">
        <!-- daterange value-format="yyyy-MM-dd" :clearable="false"align="left" -->
        <el-date-picker
          v-model="pageObj.sj"
          type="datetimerange"
          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">
      <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
             
              style="margin-left: 5px"
              @click.stop="del(item)"
              v-if="item.rwzt == 2 || item.rwzt == 3"
              >删除</span
            > -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetPage, GetFxjg, Delect } from "@/api/ghss/hgxfx.js";
import hgxfx from "../../../../static/data/ghss/data.js";
import { Message, MessageBox } from "element-ui";
import { rest } from "lodash";
let dataSources;
export default {
  props: {
    historyList: {
      type: Array,
    },
    type: {
      type: String,
    },
  },
  data() {
    return {
      pageObj: {
        kssj: "",
        sj: [],
        jssj: "",
        xmmc: "",
      },
      defaultTime1: [
        new Date(2023, 1, 1, 0, 0, 0),
        new Date(2023, 2, 1, 23, 59, 59),
      ], // '00:00:00', '23:59:59'
      datalist: [],
      now: "",
    };
  },
  mounted() {
    // this.getData();
    if (this.historyList) {
      this.datalist = this.historyList;
    } else {
      this.datalist = hgxfx.datalist;
    }
  },
  methods: {
    report(item) {
      window.open(item.fxbg.replace(".docx", ".pdf"), "_blank");
    },
    del(item) {
      MessageBox.confirm(
        "该操作将会删除此数据且不可恢复，您确定要删除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          Delect({ bsm: item.bsm }).then((res) => {
            if (res.success) {
              Message.success("删除成功！");
              this.changeForm();
            }
          });
        })
        .catch(() => {});
    },
    checkDetails(item) {
      // this.$emit("updateParent", "rwBsm", item.bsm);
      // GetFxjg({ bsm: item.bsm }).then((res) => {
      //   if (res.success) {
      // this.$emit("updateParent", "scjgObj=JSON.parse(JSON.stringify(res.data))
      // this.$emit("updateParent", "scjgObj=JSON.parse(JSON.stringify(res.data))
      this.$emit("updateParent", "nowObj", item);
      let next = this.$props.type == "hgxfx" ? "scjg" : "xzjg";
      this.$emit("updateParent", "activeTabs", next);
      //   }
      // });
    },
    checkRz(item) {
      this.$emit("updateParent", "nowObj", item);
      this.$emit("updateParent", "rzBsm", item.bsm);
    },

    changeForm() {
      this.pageObj.page = 1;
      this.getData();
    },
    changedate(val) {
      if (val) {
        this.pageObj.kssj = proxy.$comfun.setDate(val)[0];
        this.pageObj.jssj = proxy.$comfun.setDate(val)[1];
      } else {
        this.pageObj.kssj = "";
        this.pageObj.jssj = "";
      }
      this.getData();
    },

    getData() {
      // this.$emit("updateParent", "loading", true);
      // GetPage({ ...this.pageObj }).then((res) => {
      //   setTimeout(() => {
      //     this.$emit("updateParent", "loading", false);
      //   }, 100);
      //   this.pageObj.total = res.recordstotal;
      //   this.pageObj.page = res.page;
      //   this.pageObj.allpage = res.totalpages;
      //   this.datalist = res.data;
      // });
    },
    zoomItem(item) {
      this.now = item.bsm;
      this.addPolygon(item.geojson);
    },
    // 加载GeoJSON数据
    addPolygon(geojson) {
      viewer.dataSources.removeAll();
      let polygon = Cesium.GeoJsonDataSource.load(geojson, {
        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: {},
};
</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;
    }
  }
  .listDiv {
    width: 100%;
    height: calc(100% - 40px);
    padding-top: 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: 20px;
    }
    .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%
        );
      }
      .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 "../../cockpitNew1/datePicker.scss";
</style>