添加报告功能

WX

2023-08-15 299011f4f2f151d0550065c1ee89420379a653c2

添加报告功能

 src/api/api.js

@@ -261,3 +261,29 @@
    params: params,
  });
}
//日，周，月报告
export function selectByPage(params) {
  //请求地址
  return request.get(`/xlsReport/selectByPage`, {
    params: params,
  });
}
//报告下载
export function downloadByld(params) {
  //请求地址
  return `/xlsReport/downloadById`;
}

//日，周，月报告
export function getdayTop(params) {
  //请求地址
  return request.get(`/warning/dayTop10`, {
    params: params,
  });
} //日，周，月报告
export function getweekTop(params) {
  //请求地址
  return request.get(`/warning/weekTop10`, {
    params: params,
  });
}

 src/assets/js/menuData.js

@@ -20,6 +20,24 @@
          isActive: true,
          name: "智能报告",
        },
        {
          id: "a4",
          num: 13,
          isActive: true,
          name: "日报",
        },
        {
          id: "a5",
          num: 14,
          isActive: true,
          name: "周报",
        },
        {
          id: "a6",
          num: 15,
          isActive: true,
          name: "月报",
        },
      ],
    },
    {
@@ -150,7 +168,13 @@
          id: "e3",
          num: 52,
          isActive: true,
          name: "系统说明",
          name: "操作视频",
        },
        {
          id: "e4",
          num: 53,
          isActive: true,
          name: "操作文档",
        },
      ],
    },

 src/assets/js/menuTool.js

@@ -328,6 +328,9 @@
      sgworld.Core.postMessage(
        `Type=shunxuwinds;Bool=true;Density=${FC.Density};Speed=${FC.Speed};StartLayer=${config.start};EndLayer=${config.end};Classify=${config.Classify};`
      );
      console.log(
        `Type=shunxuwinds;Bool=true;Density=${FC.Density};Speed=${FC.Speed};StartLayer=${config.start};EndLayer=${config.end};Classify=${config.Classify};`
      );
    } else if (type == "sj") {
      let arr = date.split(/\s+/);

@@ -338,9 +341,9 @@
      sgworld.Core.postMessage(
        `Type=customewinds;Bool=true;Year=${day[0]};Mouth=${day[1]};Day=${day[2]};Hour=${Hour};Density=${FC.Density};Speed=${FC.Speed};StartLayer=${config.start};EndLayer=${config.end};Classify=${config.Classify};`
      );
      // console.log(
      //   `Type=customewinds;Bool=true;Year=${day[0]};Mouth=${day[1]};Day=${day[2]};Hour=${Hour[0]};Density=${FC.Density};Speed=${FC.Speed};`
      // );
      console.log(
        `Type=customewinds;Bool=true;Year=${day[0]};Mouth=${day[1]};Day=${day[2]};Hour=${Hour};Density=${FC.Density};Speed=${FC.Speed};`
      );
    }
  },
  //风场删除

 src/components/BGDC.vue

@@ -21,14 +21,6 @@
          value-format="YYYY-MM-DD HH"
          format="YYYY-MM-DD HH"
        />
        <!-- <el-date-picker
          size="large"
          v-model="selectform.value1"
          type="date"
          @change="changeTime"
          value-format="YYYY-MM-DD"
        />
         -->
      </div>

      <div class="button_box">

 src/components/BJlist.vue

@@ -141,7 +141,7 @@
      // );

      const dt = await ysshSuYuanX00Controller(
        { name: POIobj.locationName, date: date },
        { name: POIobj.name, date: date },
        100
      );
      if (dt.result) {
@@ -176,7 +176,7 @@
        if (data.JLvalue == 200) {
          h = 500;
        }
        const dt1 = await getCoordByName(POIobj.locationName);
        const dt1 = await getCoordByName(POIobj.name);
        sgworld.Navigate.flyToPosition(dt1.result.lon, dt1.result.lat, h, {
          heading: 270,
          pitch: -89.5,

 src/components/YJlist.vue

@@ -141,9 +141,10 @@
      //   { name: store.state.POIname },
      //   data.JLvalue
      // );

      data.WGlist = [];
      const dt = await ysshSuYuanX00Controller(
        { name: POIobj.locationName, date: date },
        { name: POIobj.name, date: date },
        100
      );
      if (dt.result) {
@@ -178,7 +179,7 @@
        if (data.JLvalue == 200) {
          h = 500;
        }
        const dt1 = await getCoordByName(POIobj.locationName);
        const dt1 = await getCoordByName(POIobj.name);
        sgworld.Navigate.flyToPosition(dt1.result.lon, dt1.result.lat, h, {
          heading: 270,
          pitch: -89.5,

 src/components/reportList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,283 @@
<template>
  <div class="FX_box">
    <div class="FX_title">分析报告</div>
    <div class="form_box">
      <div class="time_box">
        <el-date-picker
          size="large"
          v-model="selectform.start"
          type="datetime"
          value-format="YYYY-MM-DD HH"
          format="YYYY-MM-DD HH"
        />
        <span>-</span>
        <el-date-picker
          size="large"
          v-model="selectform.end"
          type="datetime"
          value-format="YYYY-MM-DD HH"
          format="YYYY-MM-DD HH"
        />
      </div>
      <div class="button_box">
        <el-button @click="selectList" class="button">确认</el-button>
      </div>
    </div>
    <div class="list_box">
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column
          prop="createTime"
          label="时间"
          :formatter="dateFormatter"
          align="center "
        />
        <el-table-column label="操作" align="center ">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="download(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          layout="prev, pager, next"
          :page-count="data.total"
          :current-page="listData.pageIndex"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, watch, ref } from "vue";
import { useStore } from "vuex";
import { selectByPage, downloadByld } from "@/api/api.js";
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
import { exportMethod } from "@/utils/export";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["menusId"],
  setup(props, { emit }) {
    const store = useStore();
    let data = reactive({
      tableData: [],
      total: 0,
    });
    let selectform = reactive({
      start: "",
      end: "",
    });
    let listData = reactive({
      type: "",
      start: "",
      end: "",
      pageSize: 10,
      pageIndex: 1,
    });
    const selectList = async () => {
      switch (props.menusId) {
        case "a4":
          listData.type = "day";
          break;
        case "a5":
          listData.type = "week";
          break;
        case "a6":
          listData.type = "month";
          break;
      }

      listData.start =
        selectform.start == "" ? "" : `${selectform.start}:00:00`;
      listData.end = selectform.end == "" ? "" : `${selectform.end}:00:00`;
      const dt = await selectByPage(listData);
      data.total = Math.ceil(dt.count / listData.pageSize);
      data.tableData = dt.result;

      console.log(dt);
    };
    const download = async (res) => {
      let downloadObj = {
        url: downloadByld(),
        fileName: res.name,
        params: { id: res.id },
      };
      exportMethod(downloadObj);
    };
    const handleCurrentChange = (res) => {
      listData.pageIndex = res;
      selectList();
    };
    const dateFormatter = (row) => {
      const date = new Date(row.createTime);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();

      //   let formattedDatetime = `${year}-${month}-${day} ${hours}`;
      let formattedDatetime = `${year}-${month}-${day}`;
      if (props.menusId == "a6") {
        formattedDatetime = `${year}-${month}-${day}`;
      }
      return formattedDatetime;
    };
    watch(
      () => props.menusId,
      (nVal, oVal) => {
        selectList();
      },
      { deep: true }
    );
    onMounted(() => {
      selectList();
    });
    return {
      data,
      selectform,
      selectList,
      download,
      listData,
      handleCurrentChange,
      dateFormatter,
    };
  },
};
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.FX_box {
  width: 763px;

  background: url("../assets/img/xgzs/gjfx.png") no-repeat center;
  background-size: 100% 100%;
  padding: 40px;
  padding-bottom: 80px;
  box-sizing: border-box;
  .FX_title {
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    padding-bottom: 10px;
  }
  .form_box {
    display: flex;
    align-items: center;
    .time_box {
      display: flex;
      align-items: center;
      span {
        padding: 0 10px;
        color: #fff;
      }
      /deep/.el-date-editor.el-input {
        width: auto;
      }
      /deep/ .el-input__wrapper {
        background: rgba(0, 0, 0, 0.2);
        border: 2px solid #2e58cc;
        border-radius: 10px;
        color: #ffffff;
        padding: 0;
        padding-left: 3px;
      }
      /deep/ .el-input__inner,
      /deep/ .el-textarea__inner {
        //   background-color: rgba(134, 132, 132, 0.5);
        color: #ffffff;
        font-size: 24px;
      }
      /deep/.el-range-input {
        color: white;
      }
      /deep/ .el-range-separator {
        color: white;
      }
      .el-select {
        // width: 180px;
      }
      .el-select /deep/ .el-input__wrapper {
        background: rgba(0, 0, 0, 0.2);
        border: 2px solid #2e58cc;
        border-radius: 10px;
        color: #ffffff;
        padding: 0;
        padding-left: 6px;
      }
      .el-select /deep/ .el-input__inner {
        color: #ffffff;
        font-size: 24px;
      }
    }
  }
  .el-table {
    // height: 370px;
    width: 100%;
    overflow: auto;
    background-color: transparent;
  }
  .el-table::before {
    height: 0;
  }
  .el-table /deep/ .el-tooltip {
    padding: 0;
  }
  .el-table /deep/ th,
  .el-table /deep/ tr {
    background-color: transparent;
    color: white;
  }
  .el-table /deep/ tr:hover > td {
    background-color: rgba(0, 0, 0, 1) !important;
  }
  /deep/ .el-table__body {
    width: 100% !important;
  }

  /deep/ .el-table__header {
    width: 100% !important;
  }
  .page {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    .el-pagination {
      background: transparent !important;

      /deep/ .btn-prev,
      /deep/ .btn-next,
      /deep/ .number {
        background: transparent !important;
        color: #fff;
      }
      /deep/ .is-active {
        color: rgb(64 158 255);
      }
    }
  }
}
.button_box {
  padding-left: 20px;
}
.button {
  background: rgba(0, 0, 0, 0.2);
  border: 4px solid #2e58cc !important;
  border-radius: 20px !important;
  color: #ffffff;
  height: 64px !important;
  font-size: 28px !important;
  padding: 16px 30px !important;
}
</style>

 src/components/xgzs/dayzdmax.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,95 @@
<template>
  <div class="zdmax">
    <div class="title">当天监测站点最大值TOP10</div>
    <dv-scroll-board :config="config" />
  </div>
</template>

<script>
import dayjs from "dayjs";

import { getdayTop } from "@/api/api.js";
import { de } from "element-plus/es/locale";
export default {
  data() {
    return {
      config: {
        header: ["名称", "数值", "日期"],
        data: [],
        // index: true,
        columnWidth: [],
        align: ["center", "center", "center"],
        headerBGC: "transparent",
        oddRowBGC: "transparent",
        evenRowBGC: "transparent",
        rowNum: 10,
      },
    };
  },
  mounted() {
    // this.getList();
    this.getWaringList();
  },
  methods: {
    sequence(a, b) {
      // console.log(a, b);
      return b[1] - a[1];
    },
    async getWaringList() {
      let dt = await getdayTop();
      if (dt.code === 200 && dt.result.length > 0) {
        const sotrArr = dt.result.sort((a, b) => b - a);
        let result = sotrArr.slice(0, 10);
        const data = result.map((item) => {
          item.value = Number(item.value).toFixed(2);
          item.time =
            item.time.slice(0, 4) +
            "-" +
            item.time.slice(4, 6) +
            "-" +
            item.time.slice(6, 8);
          return [item.name, item.value, item.time];
        });
        data.sort(this.sequence);

        this.config.data = data;
        this.config = { ...this.config };
      }
    },
  },
};
</script>

<style lang="less" scoped>
.zdmax {
  // position: absolute;
  // top: 1049px;
  // right: 70px;
  width: 763px;
  height: 684px;
  background: url("~@/assets/img/xgzs/gjfx.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 40px;
  .title {
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    padding-bottom: 10px;
  }
  :deep(.dv-scroll-board) {
    margin: 10px;
    width: 100%;
    height: 550px;
    .header {
      font-size: 24px;
    }
    .rows {
      height: 449px;
      .row-item {
        font-size: 24px;
      }
    }
  }
}
</style>

 src/components/xgzs/weekzdmax.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,101 @@
<template>
  <div class="zdmax">
    <div class="title">本周监测站点最大值TOP10</div>
    <dv-scroll-board :config="config" />
  </div>
</template>

<script>
import dayjs from "dayjs";

import { getweekTop } from "@/api/api.js";
import { de } from "element-plus/es/locale";
export default {
  data() {
    return {
      config: {
        header: ["名称", "数值", "日期"],
        data: [],
        // index: true,
        columnWidth: [],
        align: ["center", "center", "center"],
        headerBGC: "transparent",
        oddRowBGC: "transparent",
        evenRowBGC: "transparent",
        rowNum: 10,
      },
    };
  },
  mounted() {
    // this.getList();
    this.getWaringList();
  },
  methods: {
    sequence(a, b) {
      // console.log(a, b);
      return b[1] - a[1];
    },
    async getWaringList() {
      let dt = await getweekTop();
      if (dt.code === 200 && dt.result.length > 0) {
        console.log(dt);
        const sotrArr = dt.result.sort((a, b) => b - a);
        let result = sotrArr.slice(0, 10);
        const data = result.map((item) => {
          item.value = Number(item.value).toFixed(2);
          item.time =
            item.time.slice(0, 4) +
            "-" +
            item.time.slice(4, 6) +
            "-" +
            item.time.slice(6, 8);
          return [item.name, item.value, item.time];
        });
        data.sort(this.sequence);

        this.config.data = data;
        this.config = { ...this.config };
      }
    },
  },
};
</script>

<style lang="less" scoped>
.zdmax {
  // position: absolute;
  // top: 1049px;
  // right: 70px;
  width: 763px;
  height: 684px;
  background: url("~@/assets/img/xgzs/gjfx.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 40px;
  .title {
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    padding-bottom: 10px;
  }
  :deep(.dv-scroll-board) {
    margin: 10px;
    width: 100%;
    height: 550px;
    .header {
      font-size: 24px;
    }
    .rows {
      height: 449px;
      .row-item {
        font-size: 24px;
      }
    }
  }
}
</style>

<style lang="less">
.zdmax {
}
</style>

 src/utils/export.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,49 @@
/*
 * @Description:
 * @Author: çŽ‹æ—­
 * @Date: 2022-03-03 15:10:54
 * @LastEditTime: 2022-04-13 15:19:08
 * @LastEditors: çŽ‹æ—­
 */
import axios from "axios";
const instance = axios.create({
  baseURL: BASE_URL, // api的base_url
  timeout: 1200000, // è¯·æ±‚超时时间
  // headers: { "content-type": "application/json;charset=UTF-8" },
  // withCredentials: true,
  responseType: "blob",
});
// æ‹¦æˆªè¯·æ±‚
// instance.interceptors.request.use(
//   //  å¯ä»¥åœ¨æ­¤å¤„添加 token
//   (config) => {
//     // var token = window.sessionStorage.getItem("token");
//     // // ä¸´æ—¶
//     // var token = sessionStorage.token;
//     // config.headers["X-Access-Token"] = token;
//     return config;
//   },
//   (error) => {
//     return Promise.reject(error);
//   }
// );
// å¯¼å‡ºExcel公用方法
export function exportMethod(data) {
  instance
    .get(data.url, { params: data.params })
    .then((res) => {
      const link = document.createElement("a");
      let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);

      // link.download = res.headers['content-disposition'] //下载后文件名
      link.download = data.fileName; // ä¸‹è½½çš„文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    })
    .catch((error) => {
      console.log(error);
    });
}

 src/views/index.vue

@@ -5,49 +5,66 @@
    <transition name="el-zoom-in-center" v-show="showlogo">
      <menus @menusData="menusData"></menus>
    </transition>

    <transition name="el-zoom-in-top" v-show="showlogo">
      <div class="right_box">
        <poiList></poiList>
        <BGDC v-show="checkMenuFlag == 'a3'"></BGDC>
        <SYFX
          :SYPOIname="POIName"
          @toggleFK="toggleFK"
          v-if="checkMenuFlag == 'a2'"
        ></SYFX>
        <SYFK
          :SYPOIname="POIName"
          :syfkData="syfkData"
          v-if="showFk"
          @FKclose="FKclose"
        ></SYFK>
        <YCWG v-show="checkMenuFlag == 'b2'"></YCWG>
        <div class="chart_box" v-if="chart_isshow">
          <div class="popout_title">曲线统计图</div>
          <div class="close" @click="popoutClose('QX')"></div>
          <chart></chart>
        </div>
        <div class="content">
          <div class="left">
            <dayzdmax v-if="checkMenuFlag == 'f1'"></dayzdmax>
            <weekzdmax v-if="checkMenuFlag == 'f1'"></weekzdmax>
          </div>
          <div class="right">
            <BGDC v-show="checkMenuFlag == 'a3'"></BGDC>
            <report-list
              :menusId="checkMenuFlag"
              v-if="
                checkMenuFlag == 'a4' ||
                checkMenuFlag == 'a5' ||
                checkMenuFlag == 'a6'
              "
            ></report-list>
            <SYFX
              :SYPOIname="POIName"
              @toggleFK="toggleFK"
              v-if="checkMenuFlag == 'a2'"
            ></SYFX>
            <SYFK
              :SYPOIname="POIName"
              :syfkData="syfkData"
              v-if="showFk"
              @FKclose="FKclose"
            ></SYFK>
            <YCWG v-show="checkMenuFlag == 'b2'"></YCWG>
            <div class="chart_box" v-if="chart_isshow">
              <div class="popout_title">曲线统计图</div>
              <div class="close" @click="popoutClose('QX')"></div>
              <chart></chart>
            </div>

        <date-time-picker
          :tpData="checkMenuFlag"
          v-if="
            checkMenuFlag == 'd21' ||
            checkMenuFlag == 'd22' ||
            checkMenuFlag == 'd23' ||
            checkMenuFlag == 'd3'
          "
          @changeTime="changeTime"
        ></date-time-picker>
        <div class="weather_box_c" v-show="checkMenuFlag == 'd6'">
          <div class="popout_title">天气特效</div>
          <!-- <div class="close" @click="popoutClose('HJ')"></div> -->
          <weather></weather>
        </div>
        <SZSZ v-show="checkMenuFlag == 'e2'"></SZSZ>
            <date-time-picker
              :tpData="checkMenuFlag"
              v-if="
                checkMenuFlag == 'd21' ||
                checkMenuFlag == 'd22' ||
                checkMenuFlag == 'd23' ||
                checkMenuFlag == 'd3'
              "
              @changeTime="changeTime"
            ></date-time-picker>
            <div class="weather_box_c" v-show="checkMenuFlag == 'd6'">
              <div class="popout_title">天气特效</div>
              <!-- <div class="close" @click="popoutClose('HJ')"></div> -->
              <weather></weather>
            </div>
            <SZSZ v-show="checkMenuFlag == 'e2'"></SZSZ>

        <BJlist v-if="checkMenuFlag == 'c3'"></BJlist>
        <YJlist v-if="checkMenuFlag == 'c2'"></YJlist>
        <gjfx v-if="checkMenuFlag == 'f1'"></gjfx>
        <zdmax v-if="checkMenuFlag == 'f1'"></zdmax>
            <BJlist v-if="checkMenuFlag == 'c3'"></BJlist>
            <YJlist v-if="checkMenuFlag == 'c2'"></YJlist>
            <gjfx v-if="checkMenuFlag == 'f1'"></gjfx>
            <zdmax v-if="checkMenuFlag == 'f1'"></zdmax>
          </div>
        </div>
      </div>
    </transition>
    <div class="video_box" v-show="checkMenuFlag == 'e3'">
@@ -74,6 +91,7 @@
import menus from "@/views/menus.vue";
//智能报告
import BGDC from "@/components/BGDC.vue";
import reportList from "@/components/reportList.vue";
//溯源分析
import SYFX from "@/components/SYFX.vue";
import SYFK from "@/components/SYFK.vue";
@@ -96,6 +114,8 @@
//统计图
import gjfx from "@/components/xgzs/gjfx.vue";
import zdmax from "@/components/xgzs/zdmax.vue";
import dayzdmax from "@/components/xgzs/dayzdmax.vue";
import weekzdmax from "@/components/xgzs/weekzdmax.vue";
import {
  queryWeatherList,
  queryLocaltion,
@@ -120,6 +140,9 @@
    poiList,
    gjfx,
    zdmax,
    reportList,
    dayzdmax,
    weekzdmax,
  },
  setup(props, { emit }) {
    const store = useStore();
@@ -192,6 +215,13 @@
        checkMenuFlag.value = res.id;
      } else {
        checkMenuFlag.value = null;
      }
      if (res.id == "e4") {
        window.open(
          `${
            window.location.href.split("#")[0]
          }config/燕山石化系统功能操作文档.pdf`
        );
      }
    };

@@ -297,6 +327,11 @@
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .content {
      display: flex;
      justify-content: space-between;
      align-content: center;
    }
  }
  .right_box::-webkit-scrollbar {
    width: 8px;

 src/views/menus.vue

@@ -225,15 +225,15 @@
            // padding: 0 12px;
          }
          .menus_btn_c_list_chlid_list:hover {
            background: rgba(0, 6, 80, 0.4);
            background: rgba(49, 180, 255, 0.4);
          }
        }
      }
      .menus_btn_c_list:hover {
        background: rgba(0, 6, 80, 0.4);
        background: rgba(49, 180, 255, 0.4);
      }
      .child_Menu_Options {
        background: rgba(0, 6, 80, 0.4);
        background: rgba(49, 180, 255, 0.4);
      }
    }
  }