|
|
@@ -14,24 +14,60 @@
|
|
|
>
|
|
|
<div class="container">
|
|
|
<div class="type-select">
|
|
|
- <el-radio-group>
|
|
|
- <el-radio>左轴指标同比</el-radio>
|
|
|
- <el-radio>指标库</el-radio>
|
|
|
- <el-radio>预测指标</el-radio>
|
|
|
+ <el-radio-group v-model="rightEdbForm.IndicatorType">
|
|
|
+ <el-radio :label="1">左轴指标同比</el-radio>
|
|
|
+ <el-radio :label="2">指标库</el-radio>
|
|
|
+ <el-radio :label="3">预测指标</el-radio>
|
|
|
</el-radio-group>
|
|
|
- <el-input placeholder="指标ID/指标名称"></el-input>
|
|
|
+ <el-select v-if="rightEdbForm.IndicatorType!==1"
|
|
|
+ v-model="search_txt"
|
|
|
+ v-loadMore="searchLoad"
|
|
|
+ ref="searchRef"
|
|
|
+ :filterable="!search_txt"
|
|
|
+ remote
|
|
|
+ clearable
|
|
|
+ :placeholder="$t('Edb.InputHolderAll.input_name_orid')"
|
|
|
+ style="width:90%;margin-top: 10px;display: block;"
|
|
|
+ :remote-method="searchHandle"
|
|
|
+ @click.native="inputFocusHandle"
|
|
|
+ @change="selectTarget($event && searchOptions.find(_ => _.EdbInfoId === $event))"
|
|
|
+ >
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ <el-option
|
|
|
+ v-for="item in searchOptions"
|
|
|
+ :key="item.EdbInfoId"
|
|
|
+ :label="chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
|
|
|
+ :value="item.EdbInfoId"
|
|
|
+ :disabled="!item.HaveOperaAuth"
|
|
|
+ >
|
|
|
+ <edbDetailPopover :info="item">
|
|
|
+ <div slot="reference">
|
|
|
+ <img
|
|
|
+ :src="$icons.lock_ico2"
|
|
|
+ width="18"
|
|
|
+ height="18"
|
|
|
+ style="vertical-align:middle"
|
|
|
+ v-if="!item.HaveOperaAuth"
|
|
|
+ />
|
|
|
+ {{chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName }}
|
|
|
+ </div>
|
|
|
+ </edbDetailPopover>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form-box">
|
|
|
- <el-form>
|
|
|
+ <el-form :model="rightEdbForm" :rules="formRules" hide-required-asterisk
|
|
|
+ label-position="right"
|
|
|
+ label-width="120px">
|
|
|
<el-form-item label="生成样式">
|
|
|
- <el-select>
|
|
|
+ <el-select v-model="rightEdbForm.Style">
|
|
|
<el-option label="柱形" value="column"></el-option>
|
|
|
<el-option label="标记点" value="mark"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<!-- 如果选择标记点 -->
|
|
|
- <el-form-item label="形状">
|
|
|
- <el-select>
|
|
|
+ <el-form-item label="标记点形状" v-if="rightEdbForm.Style==='mark'">
|
|
|
+ <el-select v-model="rightEdbForm.Shape">
|
|
|
<el-option
|
|
|
v-for="markItem in markTypesOpts"
|
|
|
:key="markItem.value"
|
|
|
@@ -53,19 +89,26 @@
|
|
|
></el-color-picker>
|
|
|
</el-form-item>
|
|
|
<!-- 如果选择标记点 -->
|
|
|
- <el-form-item label="大小">
|
|
|
+ <el-form-item label="标记点大小" v-if="rightEdbForm.Style==='mark'">
|
|
|
<el-input-number
|
|
|
v-model="rightEdbForm.Size"
|
|
|
controls-position="right"
|
|
|
:min="1"
|
|
|
style="width: 90px"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="图例名称"></el-form-item>
|
|
|
+ <el-form-item label="图例名称">
|
|
|
+ <el-input v-model="rightEdbForm.Legend"></el-input>
|
|
|
+ </el-form-item>
|
|
|
<!-- 如果选择左轴同比 -->
|
|
|
- <el-form-item label="数字格式"></el-form-item>
|
|
|
+ <el-form-item label="数字格式" v-if="rightEdbForm.IndicatorType===1">
|
|
|
+ <el-radio-group v-model="rightEdbForm.NumFormat">
|
|
|
+ <el-radio :label="0">百分数</el-radio>
|
|
|
+ <el-radio :label="1">小数</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
<!-- 如果选择标记点 -->
|
|
|
- <el-form-item label="连线" v-if="rightEdbForm.Style==='mark'">
|
|
|
- <el-radio-group>
|
|
|
+ <el-form-item label="标记点连线" v-if="rightEdbForm.Style==='mark'">
|
|
|
+ <el-radio-group v-model="rightEdbForm.IsConnected">
|
|
|
<el-radio :label="0">无</el-radio>
|
|
|
<el-radio :label="1">有</el-radio>
|
|
|
</el-radio-group>
|
|
|
@@ -120,31 +163,126 @@ export default {
|
|
|
default:false
|
|
|
},
|
|
|
},
|
|
|
+ computed:{
|
|
|
+ formRules(){ //方便英文翻译
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
rightEdbForm:{
|
|
|
IndicatorType:1,//1左轴同比 2指标库 3预测指标
|
|
|
Style:'column',//生成样式 column/mark
|
|
|
Shape:'circle',//标记点形状
|
|
|
- ChartColor:'',//颜色
|
|
|
+ ChartColor:'#075EEE',//颜色
|
|
|
Size:3,//标记点大小
|
|
|
Legend:'',//图例名称
|
|
|
NumFormat:1,//数值格式 1百分比 2小数
|
|
|
IsConnected:0,//连线 0无 1有
|
|
|
- LineColor:'',//线条颜色
|
|
|
+ LineColor:'#075EEE',//线条颜色
|
|
|
LineWidth:3,//线条粗细
|
|
|
- LineStyle:'',//线条线型
|
|
|
+ LineStyle:'Solid',//线条线型
|
|
|
},
|
|
|
markTypesOpts,lineStylesOpts,
|
|
|
predefineColors: defaultOpts.colors.slice(0, 2),
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ /* 搜索 */
|
|
|
+ searchHandle(query) {
|
|
|
+ this.search_page = 1;
|
|
|
+ this.current_search = query;
|
|
|
+ this.searchApi(this.current_search)
|
|
|
+ },
|
|
|
+
|
|
|
+ async searchApi(query,page=1) {
|
|
|
+ let params = {
|
|
|
+ KeyWord:query,
|
|
|
+ CurrentIndex: page,
|
|
|
+ }
|
|
|
+ const res = this.edbFromType === 0
|
|
|
+ ? await dataBaseInterface.targetSearchByPage(params)
|
|
|
+ : await preDictEdbInterface.edbSearch(params)
|
|
|
+
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 聚焦获取当前检索 */
|
|
|
+ inputFocusHandle(e) {
|
|
|
+ this.search_page = 1;
|
|
|
+ this.current_search = e.target.value;
|
|
|
+ this.searchApi(this.current_search);
|
|
|
+ },
|
|
|
+ searchLoad() {
|
|
|
+ if(!this.search_have_more) return;
|
|
|
+ this.searchApi(this.current_search,++this.search_page);
|
|
|
+ },
|
|
|
+ //选择指标,作为曲线图拿该指标的数据
|
|
|
+ selectTarget(item,type=''){
|
|
|
+ if(!item) return
|
|
|
+ let params = {
|
|
|
+ EdbInfoId: item.EdbInfoId,
|
|
|
+ ChartType: 1,
|
|
|
+ Calendar: '',
|
|
|
+ DateType: 3,
|
|
|
+ StartYear:0,
|
|
|
+ StartDate:'',
|
|
|
+ EndDate:''
|
|
|
+ }
|
|
|
+ dataBaseInterface.chartInfo(params).then((res) => {
|
|
|
+ if(res.Ret !== 200) return;
|
|
|
+ let tableItem = res.Data.EdbInfoList[0];
|
|
|
+ tableItem.EdbAliasName = tableItem.EdbName;
|
|
|
+ //检查添加指标是否已存在
|
|
|
+ let have_bol = this.tableData.every(item => item.EdbInfoId !== tableItem.EdbInfoId);
|
|
|
|
|
|
+ if(have_bol) {
|
|
|
+ this.search_txt = '';
|
|
|
+ this.tableData.push(tableItem);
|
|
|
+ //默认拼接来源
|
|
|
+ if(!this.chartInfo.SourcesFrom) {
|
|
|
+
|
|
|
+ this.chartInfo.SourcesFrom = JSON.stringify({
|
|
|
+ isShow: this.chartInfo.SourcesFromVisable,
|
|
|
+ text: res.Data.ChartInfo.ChartSource,
|
|
|
+ color: JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.color,
|
|
|
+ fontSize: JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.fontSize
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ let sourceObj = JSON.parse(_.cloneDeep(this.chartInfo.SourcesFrom));
|
|
|
+ let concatSourceArr = `${sourceObj.text},${res.Data.ChartInfo.ChartSource}`.split(',');
|
|
|
+ let sourceStr = Array.from(new Set(concatSourceArr)).join(',');
|
|
|
+ this.chartInfo.SourcesFrom = JSON.stringify({
|
|
|
+ ...sourceObj,
|
|
|
+ text: sourceStr
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ // this.$message.warning('录入指标已存在');
|
|
|
+ this.$message.warning(this.$t('Chart.OptMsg.edb_haved_msg'));
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ confirmPerson(){
|
|
|
+ //校验
|
|
|
+ this.$emit('modify',this.rightEdbForm)
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
+.average-edit-dialog{
|
|
|
+ .type-select{
|
|
|
+ padding-bottom: 30px;
|
|
|
+ border-bottom: 1px solid #C8CDD9;
|
|
|
+ }
|
|
|
+ .form-box{
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
cxmo