布局

src/views/chartRelevance_manage/components/explainText.js

@@ -35,4 +35,9 @@ export const statisticFeatureListTextArr = [
     <p>2、根据频段数划分多个间距相同的区间（左闭右开，最后一个区间为左闭右闭），统计数据值落在每个区间的数据个数；</p>
     <p>3、频率=落在某区间数据个数/所选时间段内数据总个数；</p>
     <p>4、累计频率为从最小值所在区间对应的频率开始累加；</p>`
+]
+
+//跨品种分析
+export const crossVarietyAnalisisTextArr = [
+
 ]

src/views/chartRelevance_manage/components/selectTarget.vue

@@ -5,7 +5,7 @@
       v-model="targetType"
       placeholder="请选择指标种类"
       @change="targetTypeChange"
-      v-if="selectStyleType===1"
+      v-if="selectStyleType===1&&filter"
     >
       <el-option
         v-for="item in etaTypeOpt"
@@ -15,7 +15,7 @@
       />
     </el-select>
 
-    <div v-else-if="selectStyleType===2" class="database-choose">
+    <div v-else-if="selectStyleType===2&&filter">
       <label>选择指标：</label>
       <el-radio-group v-model="targetType" @change="targetTypeChange">
         <el-radio  
@@ -26,7 +26,7 @@
       </el-radio-group>
     </div>
 
-    <div v-else-if="selectStyleType===3" style="display:flex;align-items:center">
+    <div v-else-if="selectStyleType===3&&filter" style="display:flex;align-items:center">
       <el-select
         v-model="targetType"
         placeholder="请选择指标种类"
@@ -73,7 +73,7 @@
       remote
       clearable
       placeholder="请选择指标名称"
-      style="width: 100%; margin-top: 20px"
+      :style="`width: 100%; ${filter?'margin-top: 20px':''}`"
       :remote-method="searchHandle"
       @click.native="inputFocusHandle"
       @change="handleSelectTarget"
@@ -96,6 +96,7 @@
 <script>
 import { dataBaseInterface } from '@/api/api.js';
 import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
+import * as sheetInterface from "@/api/modules/sheetApi.js";
 export default {
     props:{
       defaultId:{
@@ -109,6 +110,9 @@ export default {
       },
       selectStyleType: {
         default: 1
+      },
+      filter: { //是否要预测和eta的筛选
+        default: true
       }
     },
     watch:{
@@ -152,7 +156,14 @@ export default {
                 KeyWord: query,
                 CurrentIndex: page,
             }
-            const res = this.targetType=='1'?await dataBaseInterface.targetSearchByPage(params):await preDictEdbInterface.edbSearch(params)
+
+            let res;
+            if(this.filter) {
+               res = this.targetType=='1'?await dataBaseInterface.targetSearchByPage(params):await preDictEdbInterface.edbSearch(params)
+            }else {
+              res = await sheetInterface.searchTarget(params)
+            }
+            
 
             if (res.Ret !== 200) return
             const { List, Paging } = res.Data;

src/views/chartRelevance_manage/crossVarietyAnalysis/chartEditor.vue

@@ -24,7 +24,7 @@
         <section class="section-item">
           <div class="top">
             <label>选择品种</label>
-            <el-button type="text">品种管理</el-button>
+            <el-button type="text" @click="setDialogOpen('variety')">品种管理</el-button>
           </div>
           <div class="list">
             <el-tag 
@@ -42,7 +42,7 @@
         <section class="section-item">
           <div class="top">
             <label>标签配置</label>
-            <el-button type="text">标签管理</el-button>
+            <el-button type="text" @click="setDialogOpen('tag')">标签管理</el-button>
           </div>
           <div class="list">
             <el-tag 
@@ -145,9 +145,21 @@
       </div> -->
     </div>
 
+    <!-- 管理弹窗 -->
+    <tagSetDialog
+      :isShow.sync="isShowSetDia"
+      :type="dialogType"
+      :dataList="dialogType==='variety'?varietyOptions:tagOptions"
+    />
+
+    <!-- 标签指标配置 -->
+    <tagRelationDialog
+      :isShow.sync="isShowTagRelationDia"
+    />
+
     <!-- 操作说明 -->
     <ExplainDialog 
-        textArrName="statisticFeatureListTextArr"
+        textArrName="crossVarietyAnalisisTextArr"
         :show-explain="showExplain"
         @close="showExplain = false"
     />
@@ -155,17 +167,20 @@
 </template>
 
 <script>
-import {yearSelector} from '@/utils/defaultOptions';
 import {statisticFeatureInterface} from '@/api/modules/chartRelevanceApi';
 import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
 import Chart from '@/views/dataEntry_manage/components/chart';
 import ExplainDialog from '../components/explainDialog.vue';
-import chartFormSection from './components/chartFormSection.vue'
+import chartFormSection from './components/chartFormSection.vue';
+import tagSetDialog from './components/tagSetDialog.vue';
+import tagRelationDialog from './components/tagRelationDialog.vue';
 export default {
   components: {
     ExplainDialog,
     Chart,
-    chartFormSection
+    chartFormSection,
+    tagSetDialog,
+    tagRelationDialog
   },
   directives: {
     drag(el, bindings) {
@@ -203,6 +218,8 @@ export default {
         SysUserRealName: '还真'
       },
 
+      showExplain: false,
+
       checkedVariety: [],
       varietyOptions: [
         {label: '螺纹'},
@@ -218,7 +235,12 @@ export default {
         {label:'库存'},
         {label:'进口'},
         {label:'产量'},
-      ]
+      ],
+
+      isShowSetDia: false,//管理弹窗
+      dialogType: '',
+
+      isShowTagRelationDia: true,//标签指标管理弹窗
     };
   },
   methods: {
@@ -233,8 +255,14 @@ export default {
     },
 
     /* 打开标签关联弹窗 */
-    setTagRelationOpen() {
+    setTagRelationOpen(item) {
+
+    },
 
+    /* 标签管理 */
+    setDialogOpen(type) {
+      this.dialogType = type;
+      this.isShowSetDia = true;
     },
 
     /* 保存图表 */
@@ -242,7 +270,6 @@ export default {
 
     },
    
-
     reloadRightWid() {
       let total_wid = $('#box')[0].offsetWidth;
       let left = $('#left')[0].offsetWidth;
@@ -334,7 +361,7 @@ export default {
         .list {
           display: flex;
           flex-wrap: wrap;
-          height: 200px;
+          max-height: 200px;
           overflow-y: auto;
           gap: 8px;
           .tag {
@@ -372,9 +399,10 @@ export default {
   }
   .right-cont {
     width: 80%;
-
+    overflow-x: auto;
     .chart-min-cont {
       background: #fff;
+      min-width: 880px;
       height: calc(100vh - 118px);
       overflow-y: auto;
       display: flex;

src/views/chartRelevance_manage/crossVarietyAnalysis/components/tagRelationDialog.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-dialog
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    :modal-append-to-body="false"
+    :title="'指标配置'"
+    @close="cancelHandle"
+    custom-class="tag-relation-dialog"
+    center
+    width="650px"
+    v-dialogDrag
+  >
+    <div class="dialog-min">
+      <ul class="list-ul">
+        <li class="list-li" v-for="(item,index) in list" :key="index">
+          <label class="variety-name">{{item.varietyName}}</label>
+
+          <selectTarget
+            :defaultId="item.search_edb"
+            :defaultOpt="searchOptions"
+            @select="e => selectTargetHandle(e,item)"  
+            :filter="false"
+            style="max-width: 200px;"
+          />
+          
+          <span>{{item.latestDate}}</span>
+          <span> {{item.latestValue}}</span>
+
+          <!-- <i class="el-icon-error" style="font-size:20px;cursor:pointer"></i> -->
+        </li>
+      </ul>
+
+      <div class="dialog-bot">
+        <el-button type="primary" style="margin-right: 20px" @click="saveHandle"
+          >保存</el-button
+        >
+        <el-button type="primary" plain @click="cancelHandle">取消</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
+export default {
+  components: { selectTarget },
+  props: {
+    isShow: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      list: [
+        { 
+          varietyName: 'pta',
+          edbName: '',
+          edbInfoId: '',
+          latestDate: '2023-05-06',
+          latestValue: '55'
+        },
+        { 
+          varietyName: '螺纹',
+          edbName: '',
+          edbInfoId: '',
+          latestDate: '2023-05-06',
+          latestValue: '55'
+        },
+      ]
+    }
+  },
+  methods:{
+    selectTargetHandle(e,item) {
+      if(!e){
+        item.edbName = '';
+        item.edbInfoId = '';
+        item.latestDate = '';
+        item.latestValue = '';
+        return
+      } 
+      const { LatestDate,LatestValue,EdbName,EdbInfoId } = e;
+      
+      item.edbName = EdbName;
+      item.edbInfoId = EdbInfoId;
+      item.latestDate = LatestDate;
+      item.latestValue = LatestValue;
+    },
+
+    /* 保存`` */
+    saveHandle() {
+      
+    },
+
+    cancelHandle() {
+      this.$emit('update:isShow',false)
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+.dialog-min {
+  padding: 30px 0 50px;
+  .list-ul{
+    .list-li {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      margin-bottom: 20px;
+      .variety-name {
+        margin-right: 50px;
+        width: 120px;
+      }
+    }
+  }
+  .dialog-bot {
+    display: flex;
+    margin-top: 40px;
+    justify-content: center;
+  }
+}
+</style>
+<style lang="scss">
+  .tag-relation-dialog .el-dialog__body {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+  }
+</style>

src/views/chartRelevance_manage/crossVarietyAnalysis/components/tagSetDialog.vue

@@ -3,34 +3,159 @@
     :visible.sync="isShow"
     :close-on-click-modal="false"
     :modal-append-to-body="false"
-    :title="saveScence==='saveOther'?'图表另存为':'保存'"
+    :title="type==='tag'?'标签管理':'品种管理'"
     @close="cancelHandle"
-    custom-class="dialog savechart-dialog"
+    custom-class="dialog"
     center
     width="560px"
     v-dialogDrag
   >
-    <div class="">
+    <div class="dialog-min">
+      <el-input
+        v-model="searchTxt"
+        placeholder="请输入名称"
+        prefix-icon="el-icon-search"
+        size="medium"
+      />
+      <div class="tag-list">
+        <div
+          v-for="(item,index) in list"
+          :key="item.label"
+          class="el-tag"
+          :style="item.isEdit&&'padding:0;border:none;'"
+          @dblclick="editTagOpen(item,index)"
+        >
 
+          <el-input
+            v-model="item.label"
+            v-if="item.isEdit"
+            class="input-edit"
+            :ref="`inputRef${index}`"
+            size="small"
+            @keyup.enter.native="editItemHandle(item)"
+          />
+          <span v-else>
+            {{ item.label }}
+            <i 
+              class="el-tag__close el-icon-close" 
+              @click.stop="closeItemHandle(item)"
+            />
+          </span>
+        </div>
+
+        <el-input
+          class="input-edit"
+          v-if="inputVisible"
+          v-model="inputValue"
+          ref="saveTagInput"
+          size="small"
+          @keyup.enter.native="addNewTagHandle"
+        >
+        </el-input>
+        <el-button v-else size="small" @click="addNewItem">+ 标签</el-button>
+
+      </div>
     </div>
 
   </el-dialog>
 </template>
 <script>
 export default {
+  props: {
+    isShow: {
+      type: Boolean
+    },
+    type: {
+      type: String
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    isShow(nval) {
+      if(!nval) return
+      this.list = this.dataList
+    }
+  },
   data() {
     return {
-
+      searchTxt: '',
+      inputVisible: false,
+      inputValue: '',
+      list: [
+        { label: '基差' },
+        { label: '库存' },
+        { label: '进口' },
+        { label: '产量' },
+      ]
     }
   },
   mounted(){
 
   },
   methods:{
+    /* 关闭标签 */
+    closeItemHandle(item) {
+      let index = this.list.findIndex(_ => _.label === item.label);
+      this.list.splice(index,1)
+    },
+
+    addNewItem() {
+      this.inputValue = '';
+      this.inputVisible = true;
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+
+    /* 新增标签 */
+    addNewTagHandle() {
+      this.inputVisible = false;
+      if(!this.inputValue) return
 
+      let item = {
+        label: this.inputValue
+      }
+      this.list.push(item)
+      
+    },
+
+    editTagOpen(item,index) {
+      this.$set(item,'isEdit',true)
+      this.$nextTick(_ => {
+        this.$refs[`inputRef${index}`][0].$refs.input.focus();
+      });
+    },
+
+    /* 编辑标签 */
+    editItemHandle(item) {
+      item.isEdit = false;
+    },
+
+    /* 保存标签 */
+    saveListHandle() {
+
+    },
+
+    cancelHandle() {
+      this.$emit('update:isShow',false)
+    }
   },
 }
 </script>
 <style scoped lang='scss'>
-
+.dialog-min {
+  padding: 0 0 60px;
+  .tag-list { 
+    margin-top: 30px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+  .input-edit {
+    width: 100px;
+  }
+}
 </style>

src/views/chartRelevance_manage/crossVarietyAnalysis/components/varietySetDialog.vue

@@ -1,23 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-
-    }
-  },
-  mounted(){
-
-  },
-  methods:{
-
-  },
-}
-</script>
-<style scoped lang='scss'>
-
-</style>