ISMS-Visualization-BJGD-TKT/src/views/components/dialog/PipeMileageDialog.vue

<template>
  <base-drag-bg-dialog
    :dialogConfig="baseDialogConfig"
    @handleClose="closeDialog"
    @onActivated="onActivated"
  >
    <!-- 弹窗内容 -->
    <div class="dialog_box">
      <!-- 内容 -->
      <div class="dialog_content_box">
        <div class="chart-box">
          <div class="dateTime-chart">
            <!-- <div class="chart-title">
              {{ baseDialogConfig.title }}
            </div> -->
            <el-row class="chart-row">
              <el-col>
                <date-time-bar
                  v-if="statisticData"
                  :data="statisticData"
                  :baseConfig="{ ids: 'stackBarChart', unit: '次' }"
                  @handleChartClick="handleChartClick"
                />
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </base-drag-bg-dialog>
</template>
<script>
import BaseDragBgDialog from "@/views/components/base/BaseDragBgDialog.vue";
import { getMileageList } from "@/API/report";
import { DateTimeBar } from "@/views/components/chart";
import { mapGetters } from "vuex";
export default {
  name: "PipeMileageDialog",
  components: { BaseDragBgDialog, DateTimeBar },
  watch: {
    "pipeMileageDialog.show": {
      handler(newVal) {
        this.baseDialogConfig.show = newVal;
        if (this.statisticData.date.length == 0) {
          this.getMileageList();
        }
        // if (newVal) {
        //   this.openFullScreen()
        // }
      },
      // deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      BASE_URL,
      baseDialogConfig: {
        dialogId: "pipeMileage",
        show: false,
        title: "陕京四线里程高程图",
        width: 1560,
        height: 460,
        center: true,
        zIndex: 10,
      },
      statisticData: {
        date: [],
        seriesData: [
          {
            data: [],
            name: "高程",
            code: "100006",
            markPointData: [],
          },
        ],
        chartType: "line",
        limitNumber: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["pipeMileageDialog"]),
  },
  created() {},
  mounted() {
    this.getMileageList();
  },
  methods: {
    closeDialog() {
      this.$store.dispatch("dialog/setPipeMileageDialog", {
        show: false,
        dialogMsg: {},
        type: "",
      });
    },
    async getMileageList() {
      try {
        const res = await getMileageList({
          pageSize: 10000000,
          pageIndex: 1,
          listOrder: ["field001,asc"],
          pageId: "822794755799785472",
        });
        if (res.code === 20000) {
          let mileage = [];
          let data = [];
          let points = [];
          res.data.content.forEach((item, index) => {
            mileage.push(item.field002);
            data.push(item.field003);
            if (item.field004) {
              points.push({
                yAxis: item.field003,
                xAxis: index,
                value: item.field004,
              });
            }
          });
          this.statisticData.date = mileage;
          this.statisticData.seriesData[0].data = data;
          this.statisticData.seriesData[0].markPointData = points;
        }
        console.log("图表信息：", this.statisticData);
        // 刷新报警列表页
      } catch (err) {
        console.log(err);
      }
    },
    onActivated() {
      // console.log("aaa");
      this.$nextTick(() => {
        this.$refs.dealContent.focus();
      });
    },
    // 图表的点击操作
    handleChartClick(params) {
      if (params.seriesType === "bar") {
        let selectTime = params.name.replace(
          /(\d{4}).(\d{1,2}).(\d{1,2}).+/gm,
          "$1-$2-$3"
        );
        this.query.tags.dateTag = params.name;
        this.queryTags.find((tag) => tag.type === "dateTag").name = params.name;
        this.getCacheData();
      }
    },
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
      }, 800);
    },
  },
};
</script>
<style lang="less" scoped>
.dialog_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 30px 10px 0;
  pointer-events: auto;
  .dialog_content_box {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    .search-box {
      width: 100%;
      display: flex;
      padding: 0.052083rem /* 10/192 */ 0;
      color: #fff;
      .search-item {
        display: flex;
        .search-label {
          display: inline-block;
          width: 0.28125rem /* 54/192 */;
          font-size: 0.072917rem /* 14/192 */;
          line-height: 0.145833rem /* 28/192 */;
          text-align: center;
        }
        .search-date.el-input__inner {
          width: 1.5625rem /* 300/192 */;
          height: 0.145833rem /* 28/192 */;
          border-radius: 0;
        }

        .el-select {
          margin-right: 0.052083rem /* 10/192 */;
          ::v-deep .el-input__inner {
            width: 0.520833rem /* 100/192 */;
            height: 0.145833rem /* 28/192 */;
            border-radius: 0;

            // padding-right: 0.182292rem /* 35/192 */;
          }

          ::v-deep .el-input__icon {
            line-height: 0.145833rem /* 28/192 */;
          }
        }
      }
      .search-btn {
        box-sizing: border-box;
        width: 0.145833rem /* 28/192 */;
        height: 0.145833rem /* 28/192 */;
        line-height: 0.145833rem /* 28/192 */;
        text-align: center;
        justify-content: right;
        color: #fff;
        font-size: 0.072917rem /* 14/192 */;
        cursor: pointer;
        border: 0.005208rem /* 1/192 */ solid #5bd6ff;
        border-radius: 0;
        &:hover {
          border-color: #ccc;
        }
        img {
          width: 0.083333rem /* 16/192 */;
          height: 0.083333rem /* 16/192 */;
        }
        &:last-child {
          margin-left: 10px;
        }
      }
    }
    .chart-box {
      .chart-title {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        .title-icon {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: url("~@/assets/imgs/dialog/img_block.png") center
            no-repeat;
          box-shadow: 0 0 6px 1px #ffe175;
          margin: 0 6px;
        }
        .title-count {
          color: #ffc800;
        }
        .el-tag {
          margin-right: 10px;
          // background-color: rgba(0, 0, 0, 0.1);
          // border-color: rgba(4, 42, 47, 0.4);
          // color: #fff;
        }
      }
      .chart-query {
        margin-left: 20px;
        .el-radio-group {
          ::v-deep .el-radio__label {
            font-size: 12px;
            padding-left: 5px;
          }
          ::v-deep .el-radio {
            color: #fff;
            margin-right: 16px;
          }
          ::v-deep .el-radio__input.is-checked + .el-radio__label {
            color: #fff;
          }
          ::v-deep .el-radio__inner {
            width: 12px;
            height: 12px;
            background-color: rgba(0, 0, 0, 0.1);
          }
          ::v-deep .el-radio__input.is-checked .el-radio__inner {
            background: rgba(4, 42, 47, 0.4);
            border-color: #76c1e1;
          }
        }
      }
      .dateTime-chart {
        .el-col {
          height: 330px;
        }
      }
      .split-line {
        width: 100%;
        height: 6px;
        background: url("~@/assets/imgs/dialog/split_line.png") center no-repeat;
        background-size: contain;
        margin: 20px auto 10px;
      }
      .rank-chart {
        .el-col {
          height: 300px;
        }
        .scatter-box {
          height: 310px;
        }
      }
    }
  }
}
</style>