|
|
@@ -0,0 +1,343 @@
|
|
|
+<template>
|
|
|
+ <div class="coal-word-container coal-similarity-container" >
|
|
|
+ <span
|
|
|
+ class="slide-btn-icon"
|
|
|
+ :class="{'slide-left':isLeftWrapShow,'slide-right':!isLeftWrapShow}"
|
|
|
+ @click="isLeftWrapShow = !isLeftWrapShow"
|
|
|
+ >
|
|
|
+ <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
|
|
|
+ </span>
|
|
|
+ <div class="left-cont minHeight" v-show="isLeftWrapShow">
|
|
|
+ <div class="left-top">
|
|
|
+ <!-- v-permission="permissionBtn.dataSourcePermission.coalWordData_export" -->
|
|
|
+ <el-button
|
|
|
+ style="width: 100%;margin-bottom: 10px;"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ size="medium"
|
|
|
+ @click="exportClick"
|
|
|
+ :loading="btnload"
|
|
|
+ >导出Excel</el-button
|
|
|
+ >
|
|
|
+ <el-autocomplete
|
|
|
+ style="margintop: 20px; width: 100%"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="leftSearchVal"
|
|
|
+ :fetch-suggestions="handleLeftSearch"
|
|
|
+ :trigger-on-focus="false"
|
|
|
+ placeholder="指标名称/指标ID"
|
|
|
+ @select="handleSelectLeftSearchval"
|
|
|
+ popper-class="el-autocomplete-suggestion-data-entry"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.item.nodata" style="text-align: center">
|
|
|
+ 暂无数据
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ scope.item.QuotaName }}
|
|
|
+ {{ frequencyType.get(scope.item.Frequency) }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-autocomplete>
|
|
|
+ </div>
|
|
|
+ <ul class="classify-list">
|
|
|
+ <li
|
|
|
+ :class="['classify-item', { act: select_classify === item.BreedId }]"
|
|
|
+ v-for="item in classifyList"
|
|
|
+ :key="item.BreedId"
|
|
|
+ @click="changeClassify(item)"
|
|
|
+ >
|
|
|
+ {{ item.BreedName }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="right-cont minHeight"
|
|
|
+ v-loading="dataloading"
|
|
|
+ element-loading-text="获取数据中..."
|
|
|
+ >
|
|
|
+ <div class="right-box" v-if="rightShow">
|
|
|
+ <template v-if="dateArr.length">
|
|
|
+ <div class="data-header">
|
|
|
+ <lz-table
|
|
|
+ :tableOption="tableOption"
|
|
|
+ tableType="header"
|
|
|
+ ref="table"
|
|
|
+ source="lz"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="data-cont" >
|
|
|
+ <lz-table
|
|
|
+ :tableOption="tableOption"
|
|
|
+ tableType="data"
|
|
|
+ :dateArr="dateArr"
|
|
|
+ source="lz"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <tableNoData v-else text="暂无数据" class="nodata"></tableNoData>
|
|
|
+ </div>
|
|
|
+ <div class="frequency-list" v-if="rightShow">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="frequency-btn"
|
|
|
+ :plain="select_frequency !== item.key"
|
|
|
+ v-for="item in frequencyList"
|
|
|
+ :key="item.key"
|
|
|
+ @click="changeFrequency(item.key)"
|
|
|
+ >{{ item.label }}</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import lzTable from "@/components/lzTable.vue";
|
|
|
+import { lzDataInterface } from "@/api/api.js";
|
|
|
+export default {
|
|
|
+ name: "coalWord",
|
|
|
+ components: { lzTable },
|
|
|
+ watch: {
|
|
|
+ select_classify(newval) {
|
|
|
+ if (!this.isAuto) return;
|
|
|
+ this.select_frequency = "";
|
|
|
+ newval && this.getFrequency();
|
|
|
+ },
|
|
|
+ select_frequency(newval) {
|
|
|
+ if (!this.isAuto) return;
|
|
|
+ newval && this.getDataList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ exportLzapi() {
|
|
|
+ // 数据导出接口
|
|
|
+ let urlStr = this.exportBase;
|
|
|
+ // token
|
|
|
+ urlStr += `?${localStorage.getItem("auth") || ""}`;
|
|
|
+ // 指标名称参数
|
|
|
+ urlStr += `&QuotaName=${this.select_quota}`;
|
|
|
+ // 指标id
|
|
|
+ urlStr += `&LzCode=${this.leftSearchTradeCode}`;
|
|
|
+ // 分类名称
|
|
|
+ urlStr += `&BreedName=${this.select_breed}`;
|
|
|
+ // 频度
|
|
|
+ urlStr += `&Frequency=${this.select_frequency}`;
|
|
|
+ // 单位
|
|
|
+ urlStr += `&UnitName=${this.select_Unit}`;
|
|
|
+ // 修改时间
|
|
|
+ urlStr += `&ModifyTime=${this.select_ModifyTime}`;
|
|
|
+ return this.escapeStr(urlStr);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if(this.permissionBtn.isShowBtn('dataSourcePermission','coalWordData_view')){
|
|
|
+ this.getClassify();
|
|
|
+ }else{
|
|
|
+ this.rightShow=true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLeftWrapShow:true,
|
|
|
+ dataloading: false,
|
|
|
+ rightShow: false,
|
|
|
+ exportBase: process.env.VUE_APP_API_ROOT + "/datamanage/export/lzList", //数据导出接口
|
|
|
+ select_classify: "",
|
|
|
+ classifyList: [],
|
|
|
+ select_frequency: "",
|
|
|
+ frequencyType: new Map([
|
|
|
+ [1, "日度"],
|
|
|
+ [2, "周度"],
|
|
|
+ [3, "月度"],
|
|
|
+ [4, "季度"],
|
|
|
+ [5, "年度"],
|
|
|
+ [99, "无固定频率"],
|
|
|
+ ]),
|
|
|
+ frequencyList: [],
|
|
|
+ tableOption: [],
|
|
|
+ dateArr: [], //最长的日期数组
|
|
|
+ btnload: false,
|
|
|
+
|
|
|
+ leftSearchVal: "", //左侧搜索值
|
|
|
+ leftSearchTradeCode: "", //如果是搜索选择的 则有此code
|
|
|
+ select_quota: "", // 选中的指标名称
|
|
|
+ select_Unit: "", // 选中的单位
|
|
|
+ select_ModifyTime: "", //选中的更新时间
|
|
|
+ select_breed: "", // 选中的分类名称
|
|
|
+ isAuto: true, // 改变分类时是否自动获取数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 获取分类 */
|
|
|
+ getClassify() {
|
|
|
+ // TODO: 获取分类接口对接
|
|
|
+ lzDataInterface.classifyList().then((res) => {
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ this.classifyList = res.Data || [];
|
|
|
+ this.select_classify =
|
|
|
+ this.select_classify || this.classifyList[0].BreedId;
|
|
|
+ this.select_breed = this.classifyList[0].BreedName;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 获取频度 */
|
|
|
+ getFrequency(defaultSelect) {
|
|
|
+ // TODO: 获取频度接口对接
|
|
|
+ lzDataInterface
|
|
|
+ .frequencyList({
|
|
|
+ BreedId: Number(this.select_classify),
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ this.frequencyList =
|
|
|
+ res.Data &&
|
|
|
+ res.Data.map((item) => {
|
|
|
+ return {
|
|
|
+ label: this.frequencyType.get(item.Frequency),
|
|
|
+ key: item.Frequency,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ //设置当前选中的频度,若传入有默认选项则选中默认频度,否则选中列表第一个
|
|
|
+ this.select_frequency = defaultSelect || this.frequencyList[0].key;
|
|
|
+ //如果有默认频度,结束后恢复watcher
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (defaultSelect) this.isAuto = true;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 获取数据 */
|
|
|
+ getDataList() {
|
|
|
+ // TODO: 获取数据接口对接
|
|
|
+ this.dataloading = true;
|
|
|
+ lzDataInterface
|
|
|
+ .dataList({
|
|
|
+ BreedId: Number(this.select_classify),
|
|
|
+ Frequency: this.select_frequency,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.rightShow = true;
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ // 设置表格数据
|
|
|
+ this.setDataList(res.Data);
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initWidth();
|
|
|
+ this.dataloading = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 改变品种 */
|
|
|
+ changeClassify(item) {
|
|
|
+ this.select_classify = item.BreedId;
|
|
|
+ this.select_breed = item.BreedName;
|
|
|
+ this.leftSearchVal = "";
|
|
|
+ this.leftSearchTradeCode = ""
|
|
|
+ this.select_quota = ""
|
|
|
+ this.select_Unit = ""
|
|
|
+ this.select_ModifyTime = ""
|
|
|
+ },
|
|
|
+ /* 改变频度 */
|
|
|
+ changeFrequency(key) {
|
|
|
+ this.select_frequency = key;
|
|
|
+ this.leftSearchVal = "";
|
|
|
+ },
|
|
|
+ initWidth() {
|
|
|
+ $(".right-box")[0].style.width =
|
|
|
+ this.$refs.table && this.$refs.table.$el.clientWidth + 2 + "px";
|
|
|
+ $(".right-box")[0].scrollTop = 0;
|
|
|
+ $(".right-box")[0].scrollLeft = 0;
|
|
|
+ },
|
|
|
+ /* 数据导出 */
|
|
|
+ exportClick() {
|
|
|
+ this.btnload = true;
|
|
|
+ const link = document.createElement("a");
|
|
|
+ link.href = this.exportLzapi;
|
|
|
+ link.download = "";
|
|
|
+ link.click();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.btnload = false;
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+
|
|
|
+ //左侧搜索
|
|
|
+ async handleLeftSearch(query, cb) {
|
|
|
+ cb([]);
|
|
|
+ if (!query) return;
|
|
|
+ const res = await lzDataInterface.getTargetListByName({
|
|
|
+ Keyword: query,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ let arr = res.Data || [];
|
|
|
+ if (!arr.length) {
|
|
|
+ cb([{ nodata: true }]);
|
|
|
+ } else {
|
|
|
+ cb(arr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选中左侧搜索值
|
|
|
+ handleSelectLeftSearchval(e) {
|
|
|
+ if (!e.LzCode) return;
|
|
|
+ this.rightShow = false;
|
|
|
+ this.leftSearchTradeCode = e.LzCode;
|
|
|
+ this.leftSearchVal = e.QuotaName;
|
|
|
+ this.select_quota = e.QuotaName;
|
|
|
+ this.select_Unit = e.UnitName;
|
|
|
+ this.select_ModifyTime = e.ModifyTime;
|
|
|
+ this.select_classify = this.classifyList.find(
|
|
|
+ (item) => item.BreedName === e.BreedName
|
|
|
+ ).BreedId;
|
|
|
+ this.select_breed = "";
|
|
|
+ // 关闭watcher
|
|
|
+ this.isAuto = false;
|
|
|
+ this.getFrequency(e.Frequency);
|
|
|
+ this.setDataList([e]);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.rightShow = true;
|
|
|
+ this.handleScrollLeftWrap();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 左侧滚动
|
|
|
+ handleScrollLeftWrap() {
|
|
|
+ let top = $(".act")[0].offsetTop;
|
|
|
+ $(".classify-list").animate({
|
|
|
+ scrollTop: top - 200,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 设置表格数据
|
|
|
+ setDataList(tableOption) {
|
|
|
+ this.tableOption = tableOption;
|
|
|
+ /* 不满6个追加6个空的显示一排 别问 问就是为了美观 */
|
|
|
+ if (tableOption.length < 6)
|
|
|
+ for (let i = 0; i < 6; i++) {
|
|
|
+ this.tableOption.push({
|
|
|
+ DataList: [],
|
|
|
+ });
|
|
|
+ if (this.tableOption.length >= 6) break;
|
|
|
+ }
|
|
|
+ // 合并所有日期
|
|
|
+ let arr = tableOption.map((item) => item.DataList);
|
|
|
+ let obj = [];
|
|
|
+ arr.forEach((dataList) => {
|
|
|
+ obj.push(...dataList.map((item) => item.DataTime));
|
|
|
+ });
|
|
|
+ // 日期去重倒序排序
|
|
|
+ this.dateArr = [...new Set(obj)].sort().reverse();
|
|
|
+ //数据最大长度小于12个 追加数据满12个 别问 问就是为了美观
|
|
|
+ if (this.dateArr.length < 12)
|
|
|
+ for (let i = 0; i < 12; i++) {
|
|
|
+ this.dateArr.push("");
|
|
|
+ if (this.dateArr.length >= 12) break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 对[#,;]转义
|
|
|
+ escapeStr(str) {
|
|
|
+ return str.replace(/#/g, escape("#")).replace(/;/g, escape(";"));
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "../css/coalCommon.scss";
|
|
|
+</style>
|
hbchen