|
|
@@ -1,539 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-dialog
|
|
|
- :visible.sync="isOpenComputed"
|
|
|
- :close-on-click-modal="false"
|
|
|
- :modal-append-to-body="false"
|
|
|
- @close="cancelHandle"
|
|
|
- custom-class="computed-dialog"
|
|
|
- center
|
|
|
- width="1090px"
|
|
|
- top="8vh"
|
|
|
- v-dialogDrag
|
|
|
- >
|
|
|
- <div slot="title" style="display: flex; align-items: center">
|
|
|
- <img
|
|
|
- :src="$icons.computed"
|
|
|
- style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
|
|
|
- />
|
|
|
- <span style="font-size: 16px">{{ title }}</span>
|
|
|
- </div>
|
|
|
- <div class="dialog-main">
|
|
|
- <ul class="add-cont">
|
|
|
- <li class="add-li" v-for="(list, index) in addList" :key="index">
|
|
|
- <span class="li-tag">{{ list.tag }}</span>
|
|
|
- <el-select
|
|
|
- v-model="list.target"
|
|
|
- v-loadMore="searchLoad"
|
|
|
- :filterable="!list.target"
|
|
|
- clearable
|
|
|
- placeholder="请输入指标名称"
|
|
|
- style="width: 400px"
|
|
|
- @change="chooseTarget"
|
|
|
- @clear="clearHandle(index)"
|
|
|
- :disabled="calulateForm.view"
|
|
|
- remote
|
|
|
- :remote-method="searchTarget"
|
|
|
- @click.native="inputFocusHandle"
|
|
|
- >
|
|
|
- <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
- <el-option
|
|
|
- v-for="item in searchOptions"
|
|
|
- :key="item.EdbInfoId"
|
|
|
- :label="$parent.currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
|
|
|
- :value="item.EdbInfoId"
|
|
|
- >
|
|
|
- <edbDetailPopover :info="item">
|
|
|
- <div slot="reference">{{$parent.currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}</div>
|
|
|
- </edbDetailPopover>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
-
|
|
|
- <i class="el-icon-tickets" style="color:#409EFF;font-size:18px" @click="$emit('lookHistory',list.target)" v-if="list.target"/>
|
|
|
-
|
|
|
- <i
|
|
|
- class="el-icon-error del-tag"
|
|
|
- v-if="index > 3 && !calulateForm.view"
|
|
|
- @click="delTarget(index)"
|
|
|
- />
|
|
|
- <span :class="{
|
|
|
- 'target-date': true,
|
|
|
- 'newest': list.end_date===newestDate
|
|
|
- }" v-if="list.start_date">{{
|
|
|
- `${list.start_date}至${list.end_date}`
|
|
|
- }}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <span class="add-icon" @click="addTargetHandle" v-if="!calulateForm.view">
|
|
|
- <i
|
|
|
- class="el-icon-circle-plus-outline"
|
|
|
- style="color: #5882ef; font-size: 16px"
|
|
|
- />
|
|
|
- 添加更多参数
|
|
|
- </span>
|
|
|
- <div class="computed-min">
|
|
|
- <div class="computed-top">
|
|
|
- <span style="margin-right: 8px">计算公式</span>
|
|
|
- <el-input placeholder="请输入公式" v-model="formula" clearable :disabled="calulateForm.view">
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <span class="example-txt"
|
|
|
- >公式示例：A*0.5+B*C*1.2+120-MAX(A,B,C)</span
|
|
|
- >
|
|
|
- <span class="example-txt">函数支持：MAX(),MIN()</span>
|
|
|
- </div>
|
|
|
- <el-form
|
|
|
- ref="diaForm"
|
|
|
- label-position="right"
|
|
|
- inline
|
|
|
- label-width="80px"
|
|
|
- :model="formData"
|
|
|
- :rules="formRules"
|
|
|
- :disabled="calulateForm.view"
|
|
|
- >
|
|
|
- <el-form-item label="指标名称" prop="targetName">
|
|
|
- <el-input
|
|
|
- v-model="formData.targetName"
|
|
|
- style="width: 340px"
|
|
|
- placeholder="请输入指标名称"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="单位" prop="unit">
|
|
|
- <selectUnit v-model="formData.unit" style="width: 340px" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="指标目录" prop="menu">
|
|
|
-<!-- <el-select
|
|
|
- v-model="formData.menu"
|
|
|
- placeholder="请选择分类"
|
|
|
- style="width: 340px"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.ClassifyId"
|
|
|
- :label="item.ClassifyName"
|
|
|
- :value="item.ClassifyId"
|
|
|
- />
|
|
|
- </el-select> -->
|
|
|
- <el-cascader
|
|
|
- v-model="formData.menu"
|
|
|
- :options="options"
|
|
|
- :props="{
|
|
|
- label: 'ClassifyName',
|
|
|
- value: 'ClassifyId',
|
|
|
- children: 'Children',
|
|
|
- checkStrictly: true
|
|
|
- }"
|
|
|
- style="width: 90%"
|
|
|
- placeholder="请选择所属分类"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="频度" prop="frequency">
|
|
|
- <el-select
|
|
|
- v-model="formData.frequency"
|
|
|
- placeholder="请选择频率"
|
|
|
- style="width: 340px"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in frequencyArr"
|
|
|
- :key="item"
|
|
|
- :label="item"
|
|
|
- :value="item"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="dia-bot" v-if="!calulateForm.view">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- style="margin-right: 20px"
|
|
|
- @click="saveHandle"
|
|
|
- :loading="dataloading"
|
|
|
- v-if="title==='计算指标'"
|
|
|
- >生成计算指标</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- style="margin-right: 20px"
|
|
|
- @click="saveHandle"
|
|
|
- v-else
|
|
|
- >保存</el-button
|
|
|
- >
|
|
|
- <el-button type="primary" plain @click="cancelHandle('cancel')">取消</el-button>
|
|
|
- </div>
|
|
|
- <el-popover
|
|
|
- placement="top-start"
|
|
|
- width="360"
|
|
|
- trigger="click">
|
|
|
- <p style="padding:30px;line-height:25px;" v-html="$parent.tips.get(31)"/>
|
|
|
- <span slot="reference" class="tip-label">公式说明</span>
|
|
|
- </el-popover>
|
|
|
- </el-dialog>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
|
|
|
-import { formRules } from '@/views/dataEntry_manage/databaseComponents/util';
|
|
|
-import { unitArr } from '@/utils/defaultOptions';
|
|
|
-const tag_arr = [];
|
|
|
-for(let i=0;i<26;i++) tag_arr.push(String.fromCharCode(65+i));
|
|
|
-export default {
|
|
|
- name: '',
|
|
|
- props: {
|
|
|
- isOpenComputed: {
|
|
|
- type: Boolean,
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default: '计算指标',
|
|
|
- },
|
|
|
- calulateForm: {
|
|
|
- type: Object,
|
|
|
- },
|
|
|
- calulateList: {
|
|
|
- type: Array,
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- isOpenComputed(newval) {
|
|
|
- newval && this.getMenu();
|
|
|
- /* 回显 */
|
|
|
- if (this.calulateList.length && newval) {
|
|
|
- this.addList = _.cloneDeep(this.calulateList);
|
|
|
- this.formula = this.calulateForm.formula;
|
|
|
- this.formData = {
|
|
|
- targetName: this.calulateForm.targetName,
|
|
|
- unit: this.calulateForm.unit,
|
|
|
- menu: this.calulateForm.menu,
|
|
|
- frequency: this.calulateForm.frequency,
|
|
|
- };
|
|
|
-
|
|
|
- this.searchOptions = this.calulateList.map(item => ({
|
|
|
- EdbInfoId: item.target,
|
|
|
- EdbName: item.edb_name,
|
|
|
- }))
|
|
|
- this.getNewestDate();
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- options: [],
|
|
|
- frequencyArr: ['日度', '周度','旬度','月度', '季度', '年度'],
|
|
|
- formRules,
|
|
|
- unitArr,
|
|
|
- addList: [
|
|
|
- {
|
|
|
- tag: tag_arr[0],
|
|
|
- target: '',
|
|
|
- start_date: '',
|
|
|
- end_date: '',
|
|
|
- },
|
|
|
- {
|
|
|
- tag: tag_arr[1],
|
|
|
- target: '',
|
|
|
- start_date: '',
|
|
|
- end_date: '',
|
|
|
- },
|
|
|
- {
|
|
|
- tag: tag_arr[2],
|
|
|
- target: '',
|
|
|
- start_date: '',
|
|
|
- end_date: '',
|
|
|
- },
|
|
|
- {
|
|
|
- tag: tag_arr[3],
|
|
|
- target: '',
|
|
|
- start_date: '',
|
|
|
- end_date: '',
|
|
|
- },
|
|
|
- ],
|
|
|
- searchOptions: [],
|
|
|
- formula: '', //计算公式
|
|
|
- dataloading: false,
|
|
|
- formData: {
|
|
|
- targetName: '',
|
|
|
- unit: '',
|
|
|
- menu: '',
|
|
|
- frequency: '',
|
|
|
- },
|
|
|
- search_have_more: false,
|
|
|
- search_page: 1,
|
|
|
- current_search:'',
|
|
|
-
|
|
|
- newestDate: '',
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 递归改变目录结构
|
|
|
- filterNodes(arr) {
|
|
|
- arr.length &&
|
|
|
- arr.forEach((item) => {
|
|
|
- item.Children.length && this.filterNodes(item.Children);
|
|
|
- if (!item.Children.length) {
|
|
|
- delete item.Children;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /* 获取目录结构 */
|
|
|
- getMenu() {
|
|
|
- preDictEdbInterface.classifyListV2().then(res => {
|
|
|
- if(res.Ret !== 200) return
|
|
|
-
|
|
|
- this.filterNodes(res.Data.AllNodes||[]);
|
|
|
- this.options = res.Data.AllNodes || [];
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /* 添加额外的指标列 */
|
|
|
- addTargetHandle() {
|
|
|
- if(this.addList.length >= 26) return this.$message.warning('添加指标个数已达上限')
|
|
|
- let tag = this.addList[this.addList.length-1].tag;
|
|
|
- let index = tag_arr.findIndex(item => item === tag);
|
|
|
- const item = {
|
|
|
- tag: tag_arr[index+1],
|
|
|
- target: '',
|
|
|
- start_date: '',
|
|
|
- end_date: ''
|
|
|
- };
|
|
|
- this.addList.push(item);
|
|
|
- },
|
|
|
-
|
|
|
- /* 搜索指标 */
|
|
|
- searchTarget(query) {
|
|
|
- this.search_page = 1;
|
|
|
- this.current_search = query;
|
|
|
- this.searchApi(this.current_search);
|
|
|
- },
|
|
|
-
|
|
|
- /* 聚焦获取当前检索 */
|
|
|
- inputFocusHandle(e) {
|
|
|
- this.search_page = 1;
|
|
|
- this.current_search = e.target.value;
|
|
|
- this.searchApi(this.current_search);
|
|
|
- },
|
|
|
-
|
|
|
- searchApi(query,page=1) {
|
|
|
- preDictEdbInterface
|
|
|
- .edbSearch({
|
|
|
- Keyword: query,
|
|
|
- CurrentIndex: page
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if (res.Ret !== 200) return
|
|
|
-
|
|
|
- const { List,Paging } = res.Data;
|
|
|
- this.search_have_more = page < Paging.Pages;
|
|
|
- this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- searchLoad() {
|
|
|
- if(!this.search_have_more) return;
|
|
|
- this.searchApi(this.current_search,++this.search_page)
|
|
|
- },
|
|
|
-
|
|
|
- /* 选中指标 显示开始日期结束日期 */
|
|
|
- chooseTarget(val) {
|
|
|
- if (val) {
|
|
|
- const choose_obj = this.searchOptions.find(
|
|
|
- (item) => item.EdbInfoId === val
|
|
|
- );
|
|
|
- this.addList.forEach((list) => {
|
|
|
- if (list.target === val) {
|
|
|
- list.start_date = choose_obj.StartDate;
|
|
|
- list.end_date = choose_obj.EndDate;
|
|
|
- this.getNewestDate();
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /* 获取所选日期最早日期 */
|
|
|
- getNewestDate() {
|
|
|
- let dateArr = this.addList.filter(_ => _.end_date).map(_ => new Date(_.end_date).getTime())
|
|
|
- let earliestDate = Math.min(...dateArr);
|
|
|
- let sameDateArr = dateArr.filter(_ => _===earliestDate)
|
|
|
- if(dateArr.length === 1 || sameDateArr.length===dateArr.length) {
|
|
|
- this.newestDate = '';
|
|
|
- return
|
|
|
- }
|
|
|
- this.newestDate = this.$moment(Math.min(...dateArr)).format('YYYY-MM-DD');
|
|
|
- },
|
|
|
-
|
|
|
- /* 清空指标和关联日期 */
|
|
|
- clearHandle(index) {
|
|
|
- this.addList[index].start_date = '';
|
|
|
- this.addList[index].end_date = '';
|
|
|
- this.getNewestDate();
|
|
|
- },
|
|
|
- // 删除指标
|
|
|
- delTarget(index) {
|
|
|
- this.addList.splice(index, 1);
|
|
|
- this.getNewestDate();
|
|
|
- },
|
|
|
- saveHandle() {
|
|
|
- if (!this.formula) return this.$message.warning('计算公式不能为空');
|
|
|
- this.$refs.diaForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- // 指标id数组
|
|
|
- let target_arr = this.addList
|
|
|
- .filter((item) => item.target)
|
|
|
- .map((item) => {
|
|
|
- return {
|
|
|
- EdbInfoId: item.target,
|
|
|
- FromTag: item.tag,
|
|
|
- };
|
|
|
- });
|
|
|
- let params = {
|
|
|
- CalculateFormula: this.formula,
|
|
|
- ClassifyId: this.formData.menu[this.formData.menu.length - 1],
|
|
|
- EdbName: this.formData.targetName,
|
|
|
- Frequency: this.formData.frequency,
|
|
|
- Unit: this.formData.unit,
|
|
|
- EdbInfoIdArr: target_arr,
|
|
|
- };
|
|
|
- this.dataloading = true;
|
|
|
-
|
|
|
- const params2 = { ... params,EdbInfoId: this.calulateForm.edb_id };
|
|
|
-
|
|
|
- preDictEdbInterface.calculateEdbSave(this.calulateForm.edb_id ? params2 : params).then((res) => {
|
|
|
- this.dataloading = false;
|
|
|
- if (res.Ret !== 200) return
|
|
|
-
|
|
|
- this.$message.success(this.calulateForm.edb_id ? '编辑成功' : '新增成功');
|
|
|
- this.calulateForm.edb_id ? this.$emit('addCallBack','edit') : this.$emit('addCallBack','add',{
|
|
|
- code:res.Data.UniqueCode,
|
|
|
- id:res.Data.EdbInfoId,
|
|
|
- classifyId:params.ClassifyId
|
|
|
- });
|
|
|
- this.init();
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- init() {
|
|
|
- this.$refs.diaForm.resetFields();
|
|
|
- this.addList = [
|
|
|
- {
|
|
|
- tag: tag_arr[0],
|
|
|
- target: '',
|
|
|
- start_date: '',
|
|
|
- end_date: '',
|
|
|
- },
|
|
|
- {
|
|
|
- tag: tag_arr[1],
|
|
|
- target: '',
|
|
|
- start_date: '',
|
|
|
- end_date: '',
|
|
|
- },
|
|
|
- {
|
|
|
- tag: tag_arr[2],
|
|
|
- target: '',
|
|
|
- start_date: '',
|
|
|
- end_date: '',
|
|
|
- },
|
|
|
- {
|
|
|
- tag: tag_arr[3],
|
|
|
- target: '',
|
|
|
- start_date: '',
|
|
|
- end_date: '',
|
|
|
- },
|
|
|
- ];
|
|
|
- this.searchOptions = [];
|
|
|
- this.formula = '';
|
|
|
- this.formData = {
|
|
|
- targetName: '',
|
|
|
- unit: '',
|
|
|
- menu: '',
|
|
|
- frequency: '',
|
|
|
- };
|
|
|
- },
|
|
|
- cancelHandle(type) {
|
|
|
- this.init();
|
|
|
- this.$emit('cancel');
|
|
|
- type==='cancel' && !this.calulateForm.edb_id && this.$emit('openPrev');
|
|
|
- },
|
|
|
- },
|
|
|
- created() {},
|
|
|
- mounted() {},
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss">
|
|
|
-.computed-dialog {
|
|
|
- overflow: hidden;
|
|
|
- div::-webkit-scrollbar {
|
|
|
- width: 6px !important;
|
|
|
- }
|
|
|
- .el-dialog__body {
|
|
|
- max-height: 700px;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- .dialog-main {
|
|
|
- padding: 25px 42px 25px 25px;
|
|
|
- .el-cascader .el-input {
|
|
|
- width: 340px;
|
|
|
- }
|
|
|
- .add-cont {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- .add-li {
|
|
|
- position: relative;
|
|
|
- margin-bottom: 48px;
|
|
|
- .li-tag {
|
|
|
- font-size: 16px;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- .del-tag {
|
|
|
- position: absolute;
|
|
|
- right: -30px;
|
|
|
- top: 12px;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .target-date {
|
|
|
- color: #5882ef;
|
|
|
- position: absolute;
|
|
|
- bottom: -25px;
|
|
|
- left: 24px;
|
|
|
- &.newest {
|
|
|
- color: #f00;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .add-icon {
|
|
|
- font-size: 16px;
|
|
|
- color: #5882ef;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .computed-min {
|
|
|
- margin: 50px 0;
|
|
|
- padding-bottom: 40px;
|
|
|
- border-bottom: 1px dashed #aab4cc;
|
|
|
- .example-txt {
|
|
|
- display: block;
|
|
|
- margin-left: 70px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .dia-bot {
|
|
|
- padding-bottom: 40px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .tip-label {
|
|
|
- position: absolute;
|
|
|
- bottom: 30px;
|
|
|
- right: 30px;
|
|
|
- color: #409EFF;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
