eta_front/src/views/dataEntry_manage/databaseComponents/fittingResidueDia.vue

<template>
	<el-dialog
		:visible.sync="isShow"
		:close-on-click-modal="false"
		:modal-append-to-body="false"
		@close="cancelHandle"
		custom-class="fitting-dailog"
		center
		width="1200px"
		top="5vh"
		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">拟合残差</span>
		</div>
		<div class="dialog-main">
			<el-form
        ref="form"
        class="form-cont"
        label-position="left"
        label-width="110px"
        :model="formData"
        :rules="formRules"
        :disabled="operationForm.view"
      >
			
        <el-form-item label="自变量" prop="self_variate">
          <el-select
            v-model="formData.self_variate"
            v-loadMore="searchLoad"
            :filterable="!formData.self_variate"
            clearable
            placeholder="请输入指标名称"
            style="width: 70%"
            remote
            :remote-method="getTarget"
            @click.native="inputFocusHandle"
            @blur="search_have_more = false"
						@change="changeTarget('self',$event)"
            :disabled="operationForm.view"
          >
            <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"
            >
            </el-option>
          </el-select>
          <span v-if="formData.self_variate" style="color: #409EFF;margin-left: 20px;">{{formData.self_edb_date[0]+'至'+ formData.self_edb_date[1]}}</span>
        </el-form-item>
        <el-form-item label="" style="display: block;">
          <el-radio-group v-model="formData.self_move_type" style="margin-right: 10px" @change="formData.self_move_val=''">
            <el-radio :label="0">标准指标</el-radio>
            <el-radio :label="1">领先天数</el-radio>
          </el-radio-group>
          <template v-if="formData.self_move_type !== 0">
            <el-input
              style="width: 80px"
              type="number"
              size="mini"
              v-model="formData.self_move_val"
              @keyup.native="filterCode(formData)"
            ></el-input>
						天
          </template>  
        </el-form-item>

        <el-form-item label="因变量" prop="depend_variate">
          <el-select
            v-model="formData.depend_variate"
            v-loadMore="searchLoad"
            :filterable="!formData.depend_variate"
            clearable
            placeholder="请输入指标名称"
            style="width: 70%"
            remote
            :remote-method="getTarget"
            @click.native="inputFocusHandle"
            @blur="search_have_more = false"
						@change="changeTarget('depend',$event)"
            :disabled="operationForm.view"
          >
            <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"
            >
            </el-option>
          </el-select>
          <span v-if="formData.depend_variate" style="color: #409EFF;margin-left: 20px;">{{formData.depend_edb_date[0]+'至'+ formData.depend_edb_date[1]}}</span>
        </el-form-item>
        <!-- <el-form-item label="" style="display: block;">
          <el-radio-group v-model="formData.depend_move_type" style="margin-right: 10px" @change="formData.depend_move_val=''">
            <el-radio :label="0">标准指标</el-radio>
            <el-radio :label="1">领先天数</el-radio>
          </el-radio-group>
          <template v-if="formData.depend_move_type !== 0">
            <el-input
              style="width: 80px"
              type="number"
              min="0"
              size="mini"
              v-model="formData.depend_move_val"
              @keyup.native="filterCode(formData)"
            ></el-input>
            天
          </template>  
        </el-form-item> -->

        <el-form-item label="拟合时间段" prop="date">
          <el-date-picker
            v-model="formData.date[0]"
            range-separator="至"
            placeholder="开始日期"
            value-format="yyyy-MM-dd"
						style="width: 25%"
            @change="changeDate"
          />
					<span style="margin: 0 10px">至</span>
          <el-date-picker
            v-model="formData.date[1]"
            placeholder="结束日期"
            value-format="yyyy-MM-dd"
						style="width: 25%"
            @change="changeDate"
            :picker-options="endDateOptions"
          />
        </el-form-item>
        <el-form-item label="指标名称" prop="edb_name" class="target-form-cont">
          <el-input
          v-model="formData.edb_name"
          style="width: 70%"
          placeholder="指标名称"></el-input>
        </el-form-item>
        <el-form-item label="指标目录" prop="menu">
          <el-cascader
            v-model="formData.menu"
            :options="options"
            :props="levelProps"
            style="width:70%" 
            clearable
            placeholder="请选择指标目录"
          />
        </el-form-item>
        <el-form-item label="频度" prop="frequency">
          <el-select 
          v-model="formData.frequency" 
          placeholder="请选择频度" 
          style="width:70%" 
          clearable>
            <el-option
              v-for="item in frequencyArr"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
			<selectUnit v-model="formData.unit" style="width:70%" />
        </el-form-item>
		  </el-form>
		</div>
		<div class="dia-bot" v-if="!operationForm.view">
			<el-button
				type="primary"
				style="margin-right: 20px"
				@click="saveHandle"
				:loading="loading"
				>{{loading ? '计算中...' : operationForm.edb_id ? '保存' : '拟合残差计算'}}</el-button
			>
			<el-button type="primary" plain @click="cancelHandle('cancel')">取消</el-button>
		</div>
		<el-popover
			placement="top-start"
			width="360"
			trigger="click">
			<p v-if="isPredict" style="padding:30px;line-height:25px;" v-html="$parent.tips.get(50)"/>
			<p v-else style="padding:30px;line-height:25px;" v-html="$parent.tips.get(37)"/>
			<span slot="reference" class="tip-label">公式说明</span>
		</el-popover>
	</el-dialog>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import { unitArr } from '@/utils/defaultOptions';
export default {
	name:'',
	props: {
		isShow: {
			type: Boolean
		},
		type: {
			type: Number
		},
		operationForm: {
			type: Object,
		},
		isPredict:{//是否是预测指标
			type: Boolean,
			default:false
		}
	},
	watch: {
		isShow(newval) {
			newval && this.getMenu();
			if(newval && this.operationForm.edb_id) {
				const backData = _.cloneDeep(this.operationForm);

				this.formData = {
					date: backData.date.split(','),
					edb_name: backData.targetName,
					menu: backData.menu,
					frequency: backData.frequency,
					unit: backData.unit,
					self_variate: backData.from_arr[0].FromEdbInfoId,
					self_move_type: backData.from_arr[0].MoveValue === 0 ? 0 : 1,
					self_move_val: backData.from_arr[0].MoveValue,
					depend_variate: backData.from_arr[1].FromEdbInfoId,
					// depend_move_type: backData.from_arr[1].MoveValue === 0 ? 0 : 1,
					// depend_move_val: backData.from_arr[1].MoveValue,
					depend_edb_date: [backData.from_arr[1].StartDate,backData.from_arr[1].EndDate],
					self_edb_date: [backData.from_arr[0].StartDate,backData.from_arr[0].EndDate],
				}

				//options 回显
				this.searchOptions = backData.from_arr.map(item => ({
					EdbInfoId: item.FromEdbInfoId,
					EdbName: item.FromEdbName,
					StartDate: item.StartDate,
					EndDate: item.EndDate,
				}))
				
			}
		}
	},
	data () {
		return {
			searchOptions:[],//指标列表
			formData: {
        self_variate: '',
        self_move_type: 0,
				self_edb_date:[],
        self_move_val: '',
        depend_variate: '',
				depend_edb_date: [],
        depend_move_type: 0,
        depend_move_val: '',
        date: ['',this.$moment().format('YYYY-MM-DD')],
				edb_name:'',
				unit:'',
				menu:'',
				frequency:'',
			},
			formRules: {
        self_variate:[
					{ required: true, message: '自变量不能为空', trigger: 'change' },
				],
        depend_variate:[
					{ required: true, message: '因变量不能为空', trigger: 'change' },
				],
        date:[
					{ required: true, message: '拟合时间段不能为空', trigger: 'change' },
				],
        edb_name:[
					{ required: true, message: '指标名称不能为空', trigger: 'change' },
				],
				menu:[
					{ required: true, message: '所属目录不能为空', trigger: 'change' },
				],
				frequency:[
					{ required: true, message: '频度不能为空', trigger: 'change' },
				],
				unit:[
					{ required: true, message: '单位不能为空', trigger: ['blur','change'] },
				]
      },
			unitArr,
			options: [],
			levelProps: {
				label: 'ClassifyName',
				value: 'ClassifyId',
				children: 'Children',
			},
			frequencyArr: ['日度', '周度','旬度', '月度', '季度', '年度'],
			fre_options: ['天','周','月','季','年'],
			loading:false,
			
			search_have_more: false,
			search_page: 1,
			current_search: '',

			endDateOptions: {
				shortcuts: [{
					text: '至今',
					onClick(picker) {
						const date = new Date();
						picker.$emit('pick',date)
					}
				}]
			},

			depend_edb_name: '',
			self_edb_name: ''

		};
	},
	methods: {
		/* 指标列表 */
		getTarget(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);
		},

		async searchApi(query,page=1) {
			const params={
				KeyWord:query,
				CurrentIndex: page,
				FilterSource: this.type === 5 ? 2 : this.type === 14 ? 3 : 1
			}
			const res=this.isPredict?await preDictEdbInterface.edbSearch(params):await dataBaseInterface.targetSearchByPage(params)
			// dataBaseInterface.targetSearchByPage({
			// 	KeyWord:query,
			// 	CurrentIndex: page,
			// 	FilterSource: this.type === 5 ? 2 : this.type === 14 ? 3 : 1
			// }).then(res => {
				if(res.Ret !== 200) return

				const { List,Paging } = res.Data;
				this.search_have_more = page < Paging.Pages;
				let arr = page === 1 ? List : this.searchOptions.concat(List);

				this.searchOptions = this.operationForm.edb_id ? arr.filter(item => item.EdbInfoId !== this.operationForm.edb_id) : arr;
					
			// })
		},

		searchLoad() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page)
		},

		/* 获取目录结构 */
		async getMenu() {
			const res=this.isPredict?await preDictEdbInterface.classifyListV2():await dataBaseInterface.menuListV3()
			// dataBaseInterface.menuList().then((res) => {
				if (res.Ret === 200) {
					/* if(!this.isPredict){
						this.filterNodes(res.Data.AllNodes);
						this.options = res.Data.AllNodes || [];
					}else{
						this.options = res.Data.AllNodes || [];
					} */
					this.options = res.Data.AllNodes || [];
				}
			// });
		},
		// 递归改变第三级目录结构
		filterNodes(arr) {
			arr.length &&
				arr.forEach((item) => {
					item.Children.length && this.filterNodes(item.Children);
					if (item.Level === 2) {
						delete item.Children;
					}
				});
		},

	  /* 过滤负数 小数点*/
    filterCode(item) {
      item.moveVal=item.moveVal.replace(/[^\.\d]/g,'').replace('.','');
    },

		/* 选择指标时同步日期 */
		changeTarget(type,val) {
			const choose_obj = this.searchOptions.find(item => item.EdbInfoId === val);
			type === 'depend' ? this.depend_edb_name =  choose_obj && choose_obj.EdbName : this.self_edb_name = choose_obj&&choose_obj.EdbName||'';
			//默认拼接名称
			if(this.formData.depend_variate && this.formData.self_variate) {
				this.formData.edb_name = `${this.depend_edb_name}拟合残差/${this.self_edb_name}`
			}

			if (val) {
				type === 'self' 
					? this.formData.self_edb_date = [choose_obj.StartDate,choose_obj.EndDate]
					: this.formData.depend_edb_date = [choose_obj.StartDate,choose_obj.EndDate]

			}
		},

    /* 选择日期 */
    changeDate() {
			console.log(this.formData.date)
			if(this.formData.date[0] && this.formData.date[1]) {
				let differ = this.$moment(this.formData.date[1]).diff(
					this.$moment(this.formData.date[0]),
					'days',
					true
				)
				if(differ < 2) {
					this.formData.date = [];
					this.$message.warning(`${differ<0?'开始日期不能晚于结束日期':'日期间隔不得少于两天'}`)
				}
			}
    },

		init() {
			this.searchOptions = [];
			this.formData = {
				self_variate: '',
        self_move_type: 0,
        self_move_val: '',
				self_edb_date:[],
				depend_edb_date: [],
        depend_variate: '',
        depend_move_type: 0,
        depend_move_val: '',
				date: ['',this.$moment().format('YYYY-MM-DD')],
				edb_name:'',
				unit:'',
				menu:'',
				frequency:'',
			};
			this.$refs.form.resetFields();
		},
		/* 保存 */
		async saveHandle() {
			// if(!this.select_target) this.$message.warning('指标不能为空')
			
				await this.$refs.form.validate();
				this.loading = true;
				const {
					self_variate,
					self_move_type,
					self_move_val,
					depend_variate,
					date,
					edb_name,
					unit,
					menu,
					frequency
				} = this.formData;
				let params ={
					Source: this.type,
					EdbName: edb_name,
					Unit: unit,
					ClassifyId: menu[menu.length - 1],
					Frequency: frequency,
					Formula: date.join(','),
					EdbInfoIdArr: [
						{
							EdbInfoId: self_variate,
							FromTag: 'A',
							MoveValue: self_move_type === 0 ? 0 : Number(self_move_val)
						},
						{
							EdbInfoId: depend_variate,
							FromTag: 'B',
							MoveValue: 0 
						},
					],

					
				}

				const res = this.operationForm.edb_id 
					? this.isPredict?await preDictEdbInterface.operateEdbSave({...params,EdbInfoId: this.operationForm.edb_id}):await dataBaseInterface.calculateTargetEdit({ ...params,EdbInfoId: this.operationForm.edb_id })
					: this.isPredict?await preDictEdbInterface.operateEdbSave(params):await dataBaseInterface.calculateTargetSave(params)
					this.loading = false;
					if (res.Ret !== 200) return
					this.$message.success(res.Msg);

					this.operationForm.edb_id 
						? this.$emit('addCallBack','edit') 
						: this.$emit('addCallBack','add',{ code:res.Data.UniqueCode,id:res.Data.EdbInfoId,classifyId:params.ClassifyId });
					this.init();
		},
		/* 关闭弹窗 */
		cancelHandle(type) {
			this.init()
			this.$emit('cancel');
			type==='cancel' && !this.operationForm.edb_id && this.$emit('openPrev');
		},
	},
}
</script>
<style lang='scss'>
.fitting-dailog {
	position: relative;
	div::-webkit-scrollbar {
		width: 6px !important;
	}
	.el-input-number .el-input__inner {
		padding: 0 34px 0 4px;
	}
	.el-dialog__body {
		max-height: 780px;
		overflow: auto;
	}
  .target-form-cont {
		margin-top: 30px;
		padding-top: 30px;
		border-top: 1px dashed #AAB4CC;
	}
	.dialog-main {
		padding: 0 50px 30px;
		.el-cascader .el-input {
			width: 100%;
		}

    .form-cont {
      padding-top: 30px;
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
          -webkit-appearance: none;
      }
      input[type="number"]{
        -moz-appearance: textfield;
      }
    }
	}
	.dia-bot {
		padding: 20px 0 30px;
		display: flex;
		justify-content: center;
	}
	.tip-cont {
		padding: 30px;
	}
	.tip-label {
		position: absolute;
		bottom: 30px;
		right: 30px;
		color: #409EFF;
		cursor: pointer;
	}
}
</style>