|
@@ -16,9 +16,12 @@
|
|
|
<i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
|
|
|
</span>
|
|
|
<div class="left-top">
|
|
|
+ <el-button style="margin-left: 0;margin-bottom: 10px;" v-permission="permissionBtn.dataSourcePermission.fwData_batch_addBase"
|
|
|
+ type="primary" size="medium" @click="isBatchAddIndicsDiaShow = true"
|
|
|
+ ><!-- 批量加入指标库 -->{{$t('SteelChemicalPage.batch_add_edb_btn')}}</el-button
|
|
|
+ >
|
|
|
<el-button
|
|
|
- v-permission="permissionBtn.dataSourcePermission.yyzxData_export"
|
|
|
- style="width: 100%"
|
|
|
+ v-permission="permissionBtn.dataSourcePermission.fwData_export"
|
|
|
type="primary"
|
|
|
plain
|
|
|
size="medium"
|
|
@@ -52,18 +55,34 @@
|
|
|
ref="treeRef"
|
|
|
class="target_tree word-wrap"
|
|
|
:data="classifyList"
|
|
|
- node-key="ClassifyId"
|
|
|
+ node-key="key"
|
|
|
:props="{
|
|
|
label: 'ClassifyName',
|
|
|
children: 'Child',
|
|
|
+ isLeaf: 'leaf'
|
|
|
}"
|
|
|
+ :default-checked-keys = "defaultCheckedKeys"
|
|
|
+ :default-expanded-keys="defaultShowNodes"
|
|
|
:current-node-key="select_classify"
|
|
|
:expand-on-click-node="false"
|
|
|
check-strictly
|
|
|
highlight-current
|
|
|
empty-text="暂无分类"
|
|
|
+ lazy
|
|
|
+ :load="getLazyTreeData"
|
|
|
+ @node-expand="handleNodeExpand"
|
|
|
+ @node-collapse="handleNodeCollapse"
|
|
|
@current-change="nodeChangeHandle"
|
|
|
>
|
|
|
+ <div slot-scope="{ node, data }" class="custom-tree-node">
|
|
|
+ <div class="text_oneLine" style="width:100%">
|
|
|
+ <span v-if="data.IndexCode">{{data.IndexName}}</span>
|
|
|
+ <span v-else>
|
|
|
+ <!-- {{ currentLang==='zh' ? data.ClassifyName : data.ClassifyNameEn }} -->
|
|
|
+ {{ data.ClassifyName }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
<span
|
|
@@ -88,6 +107,7 @@
|
|
|
tableType="header"
|
|
|
ref="table"
|
|
|
source="yyzx"
|
|
|
+ @addToLib="addToLib"
|
|
|
@editTarget="editTargetByTable"
|
|
|
/>
|
|
|
</div>
|
|
@@ -101,24 +121,43 @@
|
|
|
</div>
|
|
|
<div v-else class="nodata"></div>
|
|
|
</div>
|
|
|
+ <div class="frequency-box">
|
|
|
+ <div :class="indexFrequency !== index ? 'frequency' : 'frequency active' " v-for="(item, index) in frequencyList" :key="index" @click="clickFrequencyList(index, item)">{{ item }}</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<div v-else class="nodata-cont">
|
|
|
<tableNoData :text="$t('Table.prompt_slogan')"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 批量添加至指标库弹窗 -->
|
|
|
+ <batchAddIndicsDia
|
|
|
+ :isOpenDialog="isBatchAddIndicsDiaShow"
|
|
|
+ @close="isBatchAddIndicsDiaShow=false"
|
|
|
+ />
|
|
|
+ <!-- 单个添加至指标库弹窗 -->
|
|
|
+ <addIndicsDia
|
|
|
+ :isOpenDialog="isAddIndicsDiaShow"
|
|
|
+ :edbData="currentIndicData"
|
|
|
+ @close="isAddIndicsDiaShow=false;"
|
|
|
+ @addCallback="intoBaseBack"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import lzTable from "@/components/lzTable.vue";
|
|
|
import { fwmtInterface } from "@/api/api.js";
|
|
|
+import batchAddIndicsDia from "./components/batchFwAddIndicsDia"
|
|
|
+import addIndicsDia from './components/addIndicsDia.vue';
|
|
|
+import leftMixin from "./mixins/leftMixin.js";
|
|
|
export default {
|
|
|
name: "Fwmt",
|
|
|
- components: { lzTable },
|
|
|
+ mixins: [leftMixin],
|
|
|
+ components: { lzTable, batchAddIndicsDia, addIndicsDia },
|
|
|
data() {
|
|
|
return {
|
|
|
isLeftWrapShow:true,
|
|
|
- exportBase:process.env.VUE_APP_API_ROOT + "/datamanage/fenwei/export", //ssm数据导出接口
|
|
|
+ exportBase:process.env.VUE_APP_API_ROOT + "/datamanage/fenwei/index/data/export", //ssm数据导出接口
|
|
|
dataloading: false,
|
|
|
rightShow: false,
|
|
|
select_classify: 0,
|
|
@@ -133,6 +172,17 @@ export default {
|
|
|
leftSearchVal: "", //左侧搜索值
|
|
|
leftSearchTradeCode: "", //如果是搜索选择的 则有此code
|
|
|
isShowSingleData: false, //右侧是否展示的是单个指标数据
|
|
|
+ isBatchAddIndicsDiaShow: false, //批量添加指标弹窗
|
|
|
+ currentIndicData:{}, //当前选中指标
|
|
|
+ isAddIndicsDiaShow: false, //单个添加指标弹窗
|
|
|
+ defaultShowNodes: [], //
|
|
|
+ defaultCheckedKeys: [], // 选中
|
|
|
+ repetition: null, // 是否重复请求
|
|
|
+ indexFrequency: 0, // 当前选中的指标code
|
|
|
+ select_frequency: '', // 当前选中的频度
|
|
|
+ classId: '', // 当前选中的指标的分类id
|
|
|
+ selectedEdb: false, // 是否选中指标
|
|
|
+ FenweiIndexId: '', // 当前选中的指标的key
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -140,7 +190,19 @@ export default {
|
|
|
getClassify() {
|
|
|
fwmtInterface.classifyList().then((res) => {
|
|
|
if (res.Ret !== 200) return;
|
|
|
- this.classifyList = res.Data || [];
|
|
|
+ const addKey = arr => arr.map(item => ({
|
|
|
+ ...item,
|
|
|
+ key: item.ClassifyId, // key值为当前项ClassifyId
|
|
|
+ Child: item.Child ? addKey(item.Child) : null // 这里要判断原数据有没有子级如果没有判断会报错
|
|
|
+ }))
|
|
|
+ this.classifyList = addKey(res.Data || []);
|
|
|
+ // this.classifyList = res.Data || [];
|
|
|
+ this.select_classify = this.classifyList.length ? (this.classifyList[0].Child && this.classifyList[0].Child.length ? this.classifyList[0].Child[0].ClassifyId : this.classifyList[0].ClassifyId) : 0; // 获取classifyList中第一个元素的ClassifyId,如果该元素有子元素,则取第一个子元素的ClassifyId
|
|
|
+ // this.defaultShowNodes = [this.classifyList[0].ClassifyId]
|
|
|
+ this.$nextTick(() => { // 获取到节点后设置选中
|
|
|
+ this.$refs.treeRef.setCurrentKey(this.select_classify)
|
|
|
+ })
|
|
|
+ this.getFrequency()
|
|
|
});
|
|
|
},
|
|
|
/* 获取数据 */
|
|
@@ -150,6 +212,7 @@ export default {
|
|
|
fwmtInterface
|
|
|
.dataList({
|
|
|
ClassifyId: this.select_classify,
|
|
|
+ Frequency: this.select_frequency,
|
|
|
PageSize: this.page_size,
|
|
|
CurrentIndex: this.page_no,
|
|
|
})
|
|
@@ -215,6 +278,23 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
}, 200),
|
|
|
+
|
|
|
+ // 获取频度
|
|
|
+ getFrequency() {
|
|
|
+ fwmtInterface.getFrequency({ClassifyId: this.select_classify}).then((res) => {
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ this.frequencyList = res.Data || [];
|
|
|
+ this.select_frequency = this.frequencyList[0];
|
|
|
+ this.getDataList()
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击频度
|
|
|
+ clickFrequencyList(index, item) {
|
|
|
+ this.indexFrequency = index;
|
|
|
+ this.select_frequency = item;
|
|
|
+ this.getDataList();
|
|
|
+ },
|
|
|
+
|
|
|
// 获取单个指标数据
|
|
|
async getTargetDataList(code) {
|
|
|
this.isShowSingleData = true;
|
|
@@ -225,6 +305,7 @@ export default {
|
|
|
});
|
|
|
this.rightShow = true;
|
|
|
if (res.Ret !== 200) return;
|
|
|
+ this.frequencyList = [];
|
|
|
const DataList = res.Data.Data || [];
|
|
|
// 设置为没有更多数据
|
|
|
this.haveMore = false;
|
|
@@ -251,10 +332,10 @@ export default {
|
|
|
this.dateArr.push("");
|
|
|
if (this.dateArr.length >= 12) break;
|
|
|
}
|
|
|
- this.select_quota = res.Data.IndexName;
|
|
|
- this.select_Unit = res.Data.Unit;
|
|
|
- this.select_frequency = res.Data.Frequency;
|
|
|
- this.select_ModifyTime = res.Data.ModifyTime || "";
|
|
|
+ // this.select_quota = res.Data.IndexName;
|
|
|
+ // this.select_Unit = res.Data.Unit;
|
|
|
+ // this.select_frequency = res.Data.Frequency;
|
|
|
+ // this.select_ModifyTime = res.Data.ModifyTime || "";
|
|
|
this.dataloading = false;
|
|
|
this.rightShow && this.initWidth();
|
|
|
} catch (err) {
|
|
@@ -269,6 +350,76 @@ export default {
|
|
|
$(".right-box")[0].scrollLeft = 0;
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ //指标懒加载
|
|
|
+ async getLazyTreeData(node,resolve){
|
|
|
+ let arr=[]
|
|
|
+ if(!node.data.Child && !node.data.isLeaf && node.data.ClassifyId){
|
|
|
+ const res=await fwmtInterface.dataList({
|
|
|
+ ClassifyId: node.data.ClassifyId
|
|
|
+ })
|
|
|
+ if(res.Ret===200){
|
|
|
+ const temarr=res.Data||[]
|
|
|
+ if (temarr.length > 0) {
|
|
|
+ arr=temarr.map((item, i)=>{
|
|
|
+ const classId = item.ClassifyId
|
|
|
+ delete item.ClassifyId
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ classId,
|
|
|
+ key: item.FenweiIndexId,
|
|
|
+ leaf: true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ arr = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ arr=node.data.Child||[]
|
|
|
+ }
|
|
|
+ resolve(arr)
|
|
|
+ this.$nextTick(() => { // 获取到节点后设置选中
|
|
|
+ this.$refs.treeRef.setCurrentKey(this.FenweiIndexId)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 树节点展开
|
|
|
+ handleNodeExpand(data) {
|
|
|
+ // 保存当前展开的节点
|
|
|
+ let flag = this.defaultShowNodes.some((item) => item === data.UniqueCode);
|
|
|
+
|
|
|
+ if (!flag) {
|
|
|
+ // 不存在则存到数组里
|
|
|
+ this.defaultShowNodes.push(data.UniqueCode);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 树节点关闭
|
|
|
+ handleNodeCollapse(data) {
|
|
|
+ this.defaultShowNodes.some((item, index) => {
|
|
|
+ if (item === data.UniqueCode) {
|
|
|
+ // 删除关闭节点
|
|
|
+ this.defaultShowNodes.length = index;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取选中指标数据
|
|
|
+ addToLib(data){
|
|
|
+ //添加前校验 ID是否已存在指标库中
|
|
|
+ //打开弹窗
|
|
|
+ this.currentIndicData = data
|
|
|
+ this.isAddIndicsDiaShow = true
|
|
|
+ },
|
|
|
+ //添加指标到库
|
|
|
+ intoBaseBack() {
|
|
|
+ this.isAddIndicsDiaShow = false
|
|
|
+ if(this.isShowSingleData){
|
|
|
+ // this.$refs.edbDetailRef.getEdbDetail()
|
|
|
+ this.getTargetDataList(this.leftSearchTradeCode)
|
|
|
+ }else {
|
|
|
+ this.getDataList()
|
|
|
+ }
|
|
|
+ },
|
|
|
/* 无频度的异常显示处理 7*12*/
|
|
|
nodataDeal() {
|
|
|
this.tableOption = [];
|
|
@@ -322,12 +473,46 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 在数组中找到满足条件的元素的索引数组
|
|
|
+ *
|
|
|
+ * @param arr 要查找的数组
|
|
|
+ * @param fn 查找条件函数,函数接收一个参数,返回布尔值
|
|
|
+ * @returns 返回满足条件的元素的索引数组,如果未找到则返回null
|
|
|
+ */
|
|
|
+ findIndex (arr, fn) {
|
|
|
+ function findData(arr,indexs = []){
|
|
|
+ return arr.reduce((obj, item, index) => {
|
|
|
+ if(obj.config && fn(obj.config)){
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ const isArray = Array.isArray(item.Child)
|
|
|
+ const res = isArray ? findData(item.Child, obj.indexs) : fn(item) ? {config:item} : null
|
|
|
+ if (res && res.config && fn(res.config)) {
|
|
|
+ obj.indexs.push(index)
|
|
|
+ return {
|
|
|
+ config: res.config,
|
|
|
+ indexs:obj.indexs
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }, { config: null, indexs })
|
|
|
+ }
|
|
|
+ const res = findData(arr)
|
|
|
+ const indexs = res.indexs.reverse()
|
|
|
+ return res.config&&fn(res.config)?indexs:null
|
|
|
+ },
|
|
|
// 选中左侧搜索值
|
|
|
handleSelectLeftSearchval(e) {
|
|
|
+ console.log(e);
|
|
|
if (!e.IndexCode) return;
|
|
|
this.leftSearchTradeCode = e.IndexCode;
|
|
|
this.leftSearchVal = e.IndexName;
|
|
|
-
|
|
|
+ const ParentClassifyId = this.classifyList[this.findIndex(this.classifyList, (item) => item.ClassifyId === e.ClassifyId)[0]].ClassifyId
|
|
|
+ this.defaultShowNodes = [ParentClassifyId, e.ClassifyId];
|
|
|
+ this.FenweiIndexId = e.FenweiIndexId;
|
|
|
+ // this.defaultShowNodes = [ParentClassifyId, e.ClassifyId];
|
|
|
// 获取单独指标数据
|
|
|
this.getTargetDataList(e.IndexCode);
|
|
|
},
|
|
@@ -348,16 +533,20 @@ export default {
|
|
|
|
|
|
//改变选中节点
|
|
|
nodeChangeHandle(data, node) {
|
|
|
- if (data.ClassifyId === this.select_classify) return;
|
|
|
+ this.classId = data.classId
|
|
|
+ if (data.ClassifyId === this.repetition || data.IndexCode === this.repetition) return;
|
|
|
this.select_classify = data.ClassifyId;
|
|
|
- if(data.ParentId===0&&data.Child){
|
|
|
- this.rightShow=false
|
|
|
- return
|
|
|
- }
|
|
|
+ this.repetition = data.ClassifyId || data.IndexCode
|
|
|
this.leftSearchVal=''
|
|
|
this.page_no = 1;
|
|
|
this.page_size = 20;
|
|
|
- this.getDataList()
|
|
|
+ if (!data.IndexCode) {
|
|
|
+ this.leftSearchTradeCode = ''
|
|
|
+ this.getFrequency()
|
|
|
+ } else {// 获取单独指标数据
|
|
|
+ this.leftSearchTradeCode = data.IndexCode
|
|
|
+ this.getTargetDataList(data.IndexCode);
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
},
|
|
@@ -371,7 +560,7 @@ export default {
|
|
|
// 指标id
|
|
|
urlStr += `&IndexCode=${
|
|
|
this.isShowSingleData ? this.leftSearchTradeCode : ""
|
|
|
- }`;
|
|
|
+ }&ClassifyId=${ this.classId }`;
|
|
|
} else {
|
|
|
// 目录id
|
|
|
urlStr += `&ClassifyId=${
|
|
@@ -414,7 +603,7 @@ export default {
|
|
|
width: 5px !important;
|
|
|
} */
|
|
|
.left-cont {
|
|
|
- min-width: 300px;
|
|
|
+ min-width: 320px;
|
|
|
width: 300px;
|
|
|
margin-right: 20px;
|
|
|
padding: 30px 0;
|
|
@@ -523,6 +712,26 @@ export default {
|
|
|
margin: 0 30px 10px 0;
|
|
|
}
|
|
|
}
|
|
|
+ .frequency-box {
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .frequency {
|
|
|
+ color: #0052D9;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ background: #99baf0;
|
|
|
+ width: 120px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(0, 82, 217, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
.nodata-cont {
|
|
|
width: 150px !important;
|
|
|
text-align: center;
|
|
@@ -539,4 +748,44 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.smmTarget-container {
|
|
|
+ .el-tree__drop-indicator {
|
|
|
+ height: 3px;
|
|
|
+ background-color: #409eff;
|
|
|
+ }
|
|
|
+ .el-tree-node__content {
|
|
|
+ margin-bottom: 14px !important;
|
|
|
+ }
|
|
|
+ .el-tree-node__children {
|
|
|
+ .el-tree-node {
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ padding-left: 18px;
|
|
|
+ }
|
|
|
+ .el-tree-node__content {
|
|
|
+ margin-bottom: 5px !important;
|
|
|
+ padding-left: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .expanded.el-icon-caret-right:before {
|
|
|
+ content: url("~@/assets/img/set_m/down.png") !important;
|
|
|
+ }
|
|
|
+ .el-icon-caret-right:before {
|
|
|
+ content: url("~@/assets/img/set_m/slide.png") !important;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
|
|
|
+ content: "" !important;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon.expanded {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ .el-tree-node.is-current > .el-tree-node__content {
|
|
|
+ background-color: #f0f4ff !important;
|
|
|
+ }
|
|
|
+ .el-tree-node__content {
|
|
|
+ padding-right: 10px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|