|
|
@@ -0,0 +1,388 @@
|
|
|
+<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">
|
|
|
+ <el-button
|
|
|
+ style="width: 100%;margin-bottom: 10px;"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ size="medium"
|
|
|
+ @click="exportClick"
|
|
|
+ :loading="btnload"
|
|
|
+ v-permission="permissionBtn.dataSourcePermission.coalWordData_export"
|
|
|
+ >导出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"
|
|
|
+ @blur="searchvalBlur"
|
|
|
+ @clear="searchvalClear"
|
|
|
+ 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.IndexName }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-autocomplete>
|
|
|
+ </div>
|
|
|
+ <ul class="classify-list">
|
|
|
+ <li
|
|
|
+ :class="['classify-item', { act: select_classify == item.Area }]"
|
|
|
+ v-for="item in classifyList"
|
|
|
+ :key="item.Area"
|
|
|
+ @click="changeClassify(item)"
|
|
|
+ >
|
|
|
+ {{ item.Area }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="right-cont minHeight"
|
|
|
+ v-loading="dataloading"
|
|
|
+ element-loading-text="获取数据中..."
|
|
|
+ >
|
|
|
+ <div class="right-box" v-if="rightShow"
|
|
|
+ v-infinite-scroll="loadNext"
|
|
|
+ :infinite-scroll-disabled="!haveMore"
|
|
|
+ :infinite-scroll-immediate="false">
|
|
|
+ <template v-if="dateArr.length">
|
|
|
+ <div class="data-header">
|
|
|
+ <lz-table
|
|
|
+ :tableOption="tableOption"
|
|
|
+ tableType="header"
|
|
|
+ ref="table"
|
|
|
+ source="coalWord"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="data-cont" >
|
|
|
+ <lz-table
|
|
|
+ :tableOption="tableOption"
|
|
|
+ tableType="data"
|
|
|
+ :dateArr="dateArr"
|
|
|
+ source="coalWord"
|
|
|
+ />
|
|
|
+ </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"
|
|
|
+ v-for="item in frequencyList"
|
|
|
+ :key="item"
|
|
|
+ @click="changeFrequency(item)"
|
|
|
+ >{{ item }}</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import lzTable from "@/components/lzTable.vue";
|
|
|
+import { coalWordInterface } 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: {
|
|
|
+ exportApi() {
|
|
|
+ // 数据导出接口
|
|
|
+ let urlStr = this.exportBase;
|
|
|
+ // token
|
|
|
+ urlStr += `?${localStorage.getItem("auth") || ""}`;
|
|
|
+ // 分类名称
|
|
|
+ urlStr += `&Area=${this.select_classify}`;
|
|
|
+ // 指标Id
|
|
|
+ urlStr += `&IndexCode=${this.leftSearchTradeCode}`;
|
|
|
+ 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 + "/entry/export/mtjh", //数据导出接口
|
|
|
+ select_classify: "",
|
|
|
+ classifyList: [],
|
|
|
+ select_frequency: "",
|
|
|
+ PageSize:20,
|
|
|
+ CurrentIndex:1,
|
|
|
+ haveMore:true,
|
|
|
+ frequencyType: new Map([
|
|
|
+ [1, "日度"],
|
|
|
+ [2, "周度"],
|
|
|
+ [3, "月度"],
|
|
|
+ [4, "季度"],
|
|
|
+ [5, "年度"],
|
|
|
+ [99, "无固定频率"],
|
|
|
+ ]),
|
|
|
+ frequencyList: [],
|
|
|
+ tableOption: [],
|
|
|
+ dateArr: [], //最长的日期数组
|
|
|
+ btnload: false,
|
|
|
+ leftSearchVal: "", //左侧搜索值
|
|
|
+ leftSearchTradeCode: "", //如果是搜索选择的 则有此code
|
|
|
+ isAuto: true, // 改变分类时是否自动获取数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 获取分类 */
|
|
|
+ getClassify() {
|
|
|
+ coalWordInterface.classifyList().then((res) => {
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ this.classifyList = res.Data || [];
|
|
|
+ this.select_classify =
|
|
|
+ this.select_classify || this.classifyList[0].Area;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 获取频度 */
|
|
|
+ getFrequency(defaultSelect) {
|
|
|
+ coalWordInterface.getFrequencyList({
|
|
|
+ Area: this.select_classify,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ this.frequencyList = res.Data || []
|
|
|
+ //设置当前选中的频度,若传入有默认选项则选中默认频度,否则选中列表第一个
|
|
|
+ this.select_frequency = defaultSelect || this.frequencyList[0];
|
|
|
+ //如果有默认频度,结束后恢复watcher
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (defaultSelect) this.isAuto = true;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 获取数据 */
|
|
|
+ getDataList() {
|
|
|
+ this.dataloading = true;
|
|
|
+ coalWordInterface.dataList({
|
|
|
+ Area: this.select_classify,
|
|
|
+ PageSize: this.PageSize,
|
|
|
+ CurrentIndex:this.CurrentIndex,
|
|
|
+ Frequency: this.select_frequency,
|
|
|
+ }).then((res) => {
|
|
|
+ this.rightShow = true;
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+
|
|
|
+ // 找出最多的页码 判断是否还有数据
|
|
|
+ let page_arrs = res.Data.map((item) => item.Paging?item.Paging.Pages:0);
|
|
|
+ let totalPage = Math.max.apply(Math, page_arrs);
|
|
|
+ this.haveMore = this.CurrentIndex < totalPage ? true : false;
|
|
|
+ // 设置表格数据
|
|
|
+ this.setDataList(res.Data || []);
|
|
|
+
|
|
|
+ this.CurrentIndex == 1 &&
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initWidth();
|
|
|
+ });
|
|
|
+ }).finally(()=>{
|
|
|
+ this.dataloading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /* 滚动加载 */
|
|
|
+ loadNext() {
|
|
|
+ this.CurrentIndex++;
|
|
|
+ if(this.leftSearchTradeCode){
|
|
|
+ this.getTargetDataList()
|
|
|
+ }else{
|
|
|
+ this.getDataList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 改变分类 */
|
|
|
+ changeClassify(item) {
|
|
|
+ if(this.dataloading) return
|
|
|
+ this.select_classify = item.Area;
|
|
|
+ this.leftSearchVal = "";
|
|
|
+ this.leftSearchTradeCode = ""
|
|
|
+ this.CurrentIndex=1
|
|
|
+ },
|
|
|
+ /* 改变频度 */
|
|
|
+ changeFrequency(item) {
|
|
|
+ if(this.select_frequency == item) return
|
|
|
+ this.select_frequency = item;
|
|
|
+ this.leftSearchVal = "";
|
|
|
+ this.CurrentIndex=1
|
|
|
+ },
|
|
|
+ initWidth() {
|
|
|
+ $(".right-box")[0].style.width =
|
|
|
+ this.$refs.table ? this.$refs.table.$el.clientWidth + 2 + "px":0
|
|
|
+ $(".right-box")[0].scrollTop = 0;
|
|
|
+ $(".right-box")[0].scrollLeft = 0;
|
|
|
+ },
|
|
|
+ /* 数据导出 */
|
|
|
+ exportClick() {
|
|
|
+ this.btnload = true;
|
|
|
+ console.log({
|
|
|
+ Area:this.select_classify,
|
|
|
+ IndexCode:this.leftSearchTradeCode
|
|
|
+ },this.exportApi);
|
|
|
+ const link = document.createElement("a");
|
|
|
+ link.href = this.exportApi;
|
|
|
+ link.download = "";
|
|
|
+ link.click();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.btnload = false;
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+
|
|
|
+ //左侧搜索
|
|
|
+ async handleLeftSearch(query, cb) {
|
|
|
+ cb([]);
|
|
|
+ if (!query) return;
|
|
|
+ const res = await coalWordInterface.targetListSearch({
|
|
|
+ Keyword: query,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ let arr = res.Data || [];
|
|
|
+ if (!arr.length) {
|
|
|
+ cb([{ nodata: true }]);
|
|
|
+ } else {
|
|
|
+ cb(arr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选中左侧搜索值
|
|
|
+ handleSelectLeftSearchval(e) {
|
|
|
+ if (!e.IndexCode || this.dataloading) return;
|
|
|
+ this.leftSearchTradeCode = e.IndexCode;
|
|
|
+ this.leftSearchVal = e.IndexName;
|
|
|
+ this.select_classify = e.Area
|
|
|
+ // 关闭watcher
|
|
|
+ this.isAuto = false;
|
|
|
+ this.getFrequency(e.Frequency);
|
|
|
+ this.CurrentIndex=1
|
|
|
+ this.getTargetDataList()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.handleScrollLeftWrap();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ searchvalBlur(){
|
|
|
+ if((!this.leftSearchVal) && this.leftSearchTradeCode){
|
|
|
+ this.searchvalClear()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchvalClear(){
|
|
|
+ this.CurrentIndex=1
|
|
|
+ this.leftSearchTradeCode=''
|
|
|
+ this.getDataList();
|
|
|
+ },
|
|
|
+ // 左侧滚动
|
|
|
+ handleScrollLeftWrap() {
|
|
|
+ let top = $(".act")[0].offsetTop;
|
|
|
+ $(".classify-list").animate({
|
|
|
+ scrollTop: top - 200,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取单个指标数据
|
|
|
+ getTargetDataList() {
|
|
|
+ if (!this.leftSearchTradeCode) return;
|
|
|
+ this.dataloading = true;
|
|
|
+
|
|
|
+ try {
|
|
|
+ coalWordInterface.getTargetDataList({
|
|
|
+ IndexCode: this.leftSearchTradeCode,
|
|
|
+ Pagesize: this.PageSize,
|
|
|
+ CurrentIndex: this.CurrentIndex
|
|
|
+ }).then(res=>{
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+
|
|
|
+ this.haveMore = this.CurrentIndex < res.Data.Paging.Pages ? true : false;
|
|
|
+ this.setDataList([res.Data])
|
|
|
+
|
|
|
+ this.CurrentIndex == 1 &&
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initWidth();
|
|
|
+ });
|
|
|
+ }).finally(()=>{
|
|
|
+ this.dataloading = false;
|
|
|
+ })
|
|
|
+ } catch (err) {
|
|
|
+ console.error(err);
|
|
|
+ this.dataloading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 设置表格数据
|
|
|
+ setDataList(data) {
|
|
|
+ if(this.CurrentIndex ==1){
|
|
|
+ this.tableOption = data;
|
|
|
+ /* 不满6个追加6个空的显示一排 别问 问就是为了美观 */
|
|
|
+ if (data.length < 6){
|
|
|
+ for (let i = 0; i < 6; i++) {
|
|
|
+ this.tableOption.push({
|
|
|
+ DataList: [],
|
|
|
+ });
|
|
|
+ if (this.tableOption.length >= 6) break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.tableOption.forEach((item) => {
|
|
|
+ data.forEach((_item) => {
|
|
|
+ if (item.IndexCode === _item.IndexCode) {
|
|
|
+ item.DataList = item.DataList.concat(_item.DataList);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 合并所有日期
|
|
|
+ let arr = this.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