新增图表

src/api/modules/chartRelevanceApi.js

@@ -692,7 +692,7 @@ export const crossVarietyInterface = {
    * @returns 
    */
   classifyList: params => {
-    return http.get('/cross_variety/chart_classify/list',params)
+    return http.get('/cross_variety/classify/list',params)
   },
 
   /**
@@ -774,7 +774,87 @@ export const crossVarietyInterface = {
     chartDetail: params => {
       return http.get('/cross_variety/chart_info/detail',params)
     },
+
+    /**
+     * 添加图表
+     * @param {*} params 
+     * "ChartName": "跨品种分析图标名称",
+      "TagX": 1,
+      "TagY": 2,
+      "CalculateValue": 6,
+      "CalculateUnit": "月",
+      "DateConfigList": [
+        {
+          "DateType": 2,
+          "Num": 60
+        }
+      ],
+      "VarietyList": [2,5]
+     * @returns 
+     */
+    chartAdd: params => {
+      return http.post('/cross_variety/chart_info/add',params)
+    },
+
+    /**
+     * 编辑图表
+     * @param {*} params 
+     * ChartInfoId
+     * "ChartName": "跨品种分析图标名称",
+      "TagX": 1,
+      "TagY": 2,
+      "CalculateValue": 6,
+      "CalculateUnit": "月",
+      "DateConfigList": [
+        {
+          "DateType": 2,
+          "Num": 60
+        }
+      ],
+      "VarietyList": [2,5]
+     * @returns 
+     */
+    chartEdit: params => {
+      return http.post('/cross_variety/chart_info/edit',params)
+    },
+
+    /**
+     * 预览图表
+     * @param {*} params 
+     *  "TagX": 1,
+        "TagY": 2,
+        "CalculateValue": 6,
+        "CalculateUnit": "月",
+        "DateConfigList": [
+          {
+            "DateType": 1,
+            "Num": 0
+          }
+        ],
+        "VarietyList": [2,5]
+     * @returns 
+     */
+    chartPreview: params => {
+      return http.post('/cross_variety/chart_info/preview',params)
+    },
+
+    /**
+     * 图表另存为
+     * @param {*} params ChartInfoId ChartName
+     * @returns 
+     */
+    chartSaveOther: params => {
+      return http.post('/cross_variety/chart_info/copy')
+    },
     
+    /**
+     * 品种列表
+     * @param {*} params 
+     */
+    getVarietyList: params => {
+      return http.get('/cross_variety/variety/list',params)
+    },
+
     /**
      * 添加品种
      * @param {VarietyName} params 
@@ -804,13 +884,21 @@ export const crossVarietyInterface = {
     
     /**
      * 删除品种
-     * @param {VarietyName} params 
+     * @param {ChartVarietyId} params 
      * @returns 
      */
     varietyDel: params => {
       return http.post('/cross_variety/variety/delete',params)
     },
 
+    /**
+     * 标签列表
+     * @param {*} params 
+     */
+     getTagList: params => {
+      return http.get('/cross_variety/tag/list',params)
+    },
+
     /**
      * 添加标签
      * @param {TagName} params 

src/views/chartRelevance_manage/crossVarietyAnalysis/chartEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="editor-page" id="box">
+  <div class="crossVariety-edit-page" id="box">
     <span
       class="slide-icon slide-right"
       @click="isSlideLeft = !isSlideLeft"
@@ -29,11 +29,11 @@
           <div class="list" v-if="varietyOptions.length">
             <el-tag 
               size="small" 
-              class="tag"
+              :class="['tag',{'act':checkedVarietys.includes(item.ChartVarietyId)}]"
               v-for="item in varietyOptions"
-              :key="item.label"
+              :key="item.ChartVarietyId"
               @click="checkVarietyHandle(item)"
-            >{{item.label}}</el-tag>
+            >{{item.ChartVarietyName}}</el-tag>
           </div>
 
           <tableNoData v-else text="暂无品种" size="mini"/>
@@ -51,9 +51,9 @@
               size="small" 
               class="tag"
               v-for="item in tagOptions"
-              :key="item.label"
+              :key="item.ChartTagId"
               @click="setTagRelationOpen(item)"
-            >{{item.label}}</el-tag>
+            >{{item.ChartTagName}}</el-tag>
           </div>
 
           <tableNoData text="暂无标签" size="mini" v-else/>
@@ -78,7 +78,7 @@
       <div
         class="chart-min-cont"
       >
-        <div class="chart-wrapper">
+        <div class="chart-wrapper" v-if="options.series&&options.series.length">
           <div class="chart-show-cont"  v-if="!chartInfo.WarnMsg">
             <div style="position:relative;">
               <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
@@ -97,6 +97,8 @@
                     style="width: 60px; display: block"
                     size="mini"
                     type="number"
+                    :min="0"
+                    :max="100"
                     placeholder="上限"
                     v-model="chartLimit.max"
                     @change="changeLimit"
@@ -105,6 +107,8 @@
                     class="min-data-input"
                     size="mini"
                     type="number"
+                    :min="0"
+                    :max="100"
                     placeholder="下限"
                     v-model="chartLimit.min"
                     @change="changeLimit"
@@ -116,6 +120,8 @@
                     class="left"
                     size="mini"
                     type="number"
+                    :min="0"
+                    :max="100"
                     placeholder="下限"
                     v-model="chartLimit.x_min"
                     @change="changeLimit"
@@ -124,6 +130,8 @@
                     class="left"
                     size="mini"
                     type="number"
+                    :min="0"
+                    :max="100"
                     placeholder="上限"
                     v-model="chartLimit.x_max"
                     @change="changeLimit"
@@ -138,15 +146,18 @@
           <p class="error-tip" style="min-height: 400px;" v-if="chartInfo.WarnMsg">{{chartInfo.WarnMsg}}</p>
         </div>
 
+        <div class="nodata" v-else>
+          <tableNoData text="暂无信息"/>
+        </div>
+
         <!-- 图表相关配置 -->
         <chartFormSection
           :tagList="tagOptions"
+          :chartInfo="chartInfo"
+          ref="chartFormRef"
         />
       </div> 
 
-      <!-- <div class="nodata" v-else>
-        <tableNoData text="暂无信息"/>
-      </div> -->
     </div>
 
     <!-- 管理弹窗 -->
@@ -159,6 +170,8 @@
     <!-- 标签指标配置 -->
     <tagRelationDialog
       :isShow.sync="isShowTagRelationDia"
+      :varietyList="varietyOptions"
+      :info="tagRelationInfo"
     />
 
     <!-- 操作说明 -->
@@ -172,6 +185,7 @@
 
 <script>
 import { crossVarietyInterface } from '@/api/modules/chartRelevanceApi';
+import { dataBaseInterface } from '@/api/api';
 import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
 import Chart from '@/views/dataEntry_manage/components/chart';
 import ExplainDialog from '../components/explainDialog.vue';
@@ -219,21 +233,31 @@ export default {
       isSlideLeft: false,
       chartInfo: {
         ChartName:'图表标题',
+        Source: 10,
+        CalculateValue: '',
+        CalculateUnit: '天',
+        TagX: '',
+        TagY: '',
+        DateConfigList: [
+          { DateType: 1,Num: 0 },
+        ],
         SysUserRealName: '还真'
       },
 
       showExplain: false,
 
-      checkedVariety: [], //选中的品种
+      checkedVarietys: [], //选中的品种
       varietyOptions: [],
-
       tagOptions: [],
 
       isShowSetDia: false,//管理弹窗
       dialogType: '',
 
       isShowTagRelationDia: false,//标签指标管理弹窗
-      tagRelation: ''
+      tagRelationInfo: {
+        tagName:'',
+        id: 0
+      }
     };
   },
   methods: {
@@ -243,21 +267,66 @@ export default {
       
     },
 
+    checkParmas(type='') {
+      if(!this.checkedVarietys.length || !this.$refs.chartFormRef.form.CalculateValue || !this.$refs.chartFormRef.form.TagX ||!this.$refs.chartFormRef.form.TagY||!this.$refs.chartFormRef.form.DateConfigList.length){
+        type && this.$message.warning(message)
+        return false
+      }
+      return true
+    },
+
     /* 获取标签列表 */
     async getTagList() {
-      // let res = await crossVarietyInterface.getTagListApi() 
+      let res = await crossVarietyInterface.getTagList()
+
+      if(res.Ret !== 200) return
+      this.tagOptions = res.Data.List || []
     },
 
     async getVarietyList() {
-      // let res = await crossVarietyInterface.getVarietyListApi()
+      let res = await crossVarietyInterface.getVarietyList()
+
+      if(res.Ret !== 200) return
+      this.varietyOptions = res.Data.List || []
+    },
+
+    /* 预览数据 */
+    async getChartPreviewData() {
+      if(!this.checkParmas()) return;
+
+      let params = {
+        VarietyList: this.checkedVarietys,
+        ...this.$refs.chartFormRef.form
+      }
+      let res = await crossVarietyInterface.chartPreview(params)
+
+      if(res.Ret !== 200) return 
+      
+      this.chartLimit = {
+        min: Number(res.Data.YMinValue),
+        max: Number(res.Data.YMaxValue),
+        x_min: Number(res.Data.XMinValue),
+        x_max: Number(res.Data.XMaxValue)
+      }
+      this.crossVarietyChartData = res.Data;
+      this.setCrossVarietyChart()
     },
     
     /* 选择品种 */
     checkVarietyHandle(item) {
+      this.checkedVarietys.includes(item.ChartVarietyId) 
+        ? this.checkedVarietys.splice(this.checkedVarietys.indexOf(item.ChartVarietyId),1) 
+        : this.checkedVarietys.push(item.ChartVarietyId)
+
+      this.getChartPreviewData();
     },
 
     /* 打开标签关联弹窗 */
     setTagRelationOpen(item) {
+      this.tagRelationInfo = {
+        tagName: item.ChartTagName,
+        id: item.ChartTagId
+      }
       this.isShowTagRelationDia = true;
     },
 
@@ -268,7 +337,51 @@ export default {
     },
 
     /* 保存图表 */
-    saveChartHandle() {
+    async saveChartHandle() {
+      let { min,max,x_min,x_max } = this.chartLimit;
+      let params = {
+        VarietyList: this.checkedVarietys,
+        ...this.$refs.chartFormRef.form,
+        XMinValue: String(x_min),
+				XMaxValue: String(x_max),
+				YMinValue: String(min),
+				YMaxValue: String(max),
+      }
+      let res = this.chart_code 
+        ? await crossVarietyInterface.chartEdit({...params,ChartInfoId: this.chartInfo.ChartInfoId})
+        : await crossVarietyInterface.chartAdd(params)
+
+      if(res.Ret !== 200) return
+      this.setChartImage(res.Data);
+    },
+
+     /* 设置图表封面图片 */
+    setChartImage(data) {
+      let svg = this.$refs.chartRef.chart.getSVG({
+        chart: {
+          width: 340,
+          height: 230,
+        }
+      });
+      let form = new FormData();
+      form.append('Img', svg);
+      this.setImageHandle(form,data);
+    },
+    async setImageHandle(form,{ UniqueCode,ChartInfoId }) {
+      let { Data } = await dataBaseInterface.uploadImgSvg(form);
+      await dataBaseInterface.setChartImage({
+        ChartInfoId: ChartInfoId,
+        ImageUrl: Data.ResourceUrl,
+      });
+
+			this.$message.success('保存成功');
+			this.$router.replace({
+				path: '/crossVarietyChartList',
+				query: {
+					code: UniqueCode,
+					id: ChartInfoId
+				}
+			})
 
     },
    
@@ -281,6 +394,8 @@ export default {
 
   },
   mounted() {
+    this.getVarietyList();
+    this.getTagList();
     this.getChartDetail();
     window.addEventListener('resize', this.reloadRightWid);
   },
@@ -298,7 +413,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.editor-page {
+.crossVariety-edit-page {
   $font-small: 12px;
   $font-normal: 14px;
   display: flex;
@@ -365,7 +480,7 @@ export default {
           flex-wrap: wrap;
           max-height: 200px;
           overflow-y: auto;
-          gap: 8px;
+          gap: 10px;
           .tag {
             color: #333;
             background: #fff;
@@ -410,12 +525,12 @@ export default {
       display: flex;
       flex-wrap: wrap;
       .chart-wrapper {
-				padding: 20px;
+				padding: 30px 0;
         width: 100%;
 				/* =================== */
 				.chart-show-cont {
 					min-height: 400px;
-					padding: 0 0 50px 100px;
+					padding: 0 100px 50px;
 					position: relative;
 					.chart-title {
 						font-size: 16px;
@@ -427,8 +542,8 @@ export default {
 						font-size: 14px;
 						color: #333;
 						position: absolute;
-						bottom: 20px;
-						right: 50px;
+						bottom: -50px;
+						right: -70px;
 					}
           .range-cont {
             position: absolute;
@@ -438,7 +553,7 @@ export default {
               display: block;
             }
             &.left {
-              left: -80px;
+              left: -70px;
             }
             &.bottom {
               width: 100%;
@@ -446,7 +561,7 @@ export default {
               justify-content: space-between;
               top: auto;
               right: 0;
-              bottom: -5%;
+              bottom: -4%;
               .left {
                 width: 60px;
                 display: block;
@@ -464,24 +579,31 @@ export default {
 
       @media screen and (min-width: 1711px) {
         .min-data-input {
-          margin-top: 360px;
+          margin-top: 290px;
         }
       }
       @media screen and (max-width: 1710px) {
         .min-data-input {
-          margin-top: 290px;
+          margin-top: 250px;
         }
       }
 
     }
     .nodata {
-      height: calc(100vh - 120px);
       background-color: #fff;
       text-align: center;
       font-size: 16px;
       color: #666;
+      width: 100%;
       padding: 100px 0;
     }
   }
 }
 </style>
+<style lang="scss">
+.crossVariety-edit-page {
+  .el-input--mini .el-input__inner {
+		padding: 0 0 0 4px;
+	}
+}
+</style>

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

@@ -7,18 +7,19 @@
       :model="form"
       :rules="formRules"
     >
-      <el-form-item label="时间长度" prop="timeValue">
+      <el-form-item label="时间长度" prop="CalculateValue">
         <el-input
-          v-model="form.timeValue"
+          v-model="form.CalculateValue"
           style="width: 140px"
           :step="1"
           type="number"
-          @change="(val) => {form.timeValue = Number(val)}"
+          @change="(val) => {form.CalculateValue = Number(val);changeParams()}"
         />
         <el-select
-          v-model="form.timeUnit"
+          v-model="form.CalculateUnit"
           placeholder="请选择"
           style="width: 100px"
+          @change="changeParams"
         >
           <el-option
             v-for="item in unitOpt"
@@ -28,31 +29,33 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="X轴坐标" prop="xSeries">
+      <el-form-item label="X轴坐标" prop="TagX">
         <el-select
-          v-model="form.xSeries"
+          v-model="form.TagX"
           style="width: 240px"
           placeholder="请选择"
+          @change="changeParams"
         >
           <el-option
             v-for="item in tagList"
-            :key="item.val"
-            :label="item.label"
-            :value="item.val"
+            :key="item.ChartTagId"
+            :label="item.ChartTagName"
+            :value="item.ChartTagId"
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="Y轴坐标" prop="ySeries">
+      <el-form-item label="Y轴坐标" prop="TagY">
         <el-select
-          v-model="form.ySeries"
+          v-model="form.TagY"
           placeholder="请选择"
           style="width: 240px"
+          @change="changeParams"
         >
           <el-option
             v-for="item in tagList"
-            :key="item.val"
-            :label="item.label"
-            :value="item.val"
+            :key="item.ChartTagId"
+            :label="item.ChartTagName"
+            :value="item.ChartTagId"
           />
         </el-select>
       </el-form-item>
@@ -61,6 +64,7 @@
           v-model="form.chartName"
           style="width: 240px"
           placeholder="请输入图表名称"
+          @change="changeParams"
         />
       </el-form-item>
     </el-form>
@@ -68,9 +72,9 @@
     <div class="date-section">
       <label class="el-form-item__label">选择日期</label>
       <ul>
-        <li class="date-li" v-for="(item,index) in form.dateArr" :key="index">
+        <li class="date-li" v-for="(item,index) in form.DateConfigList" :key="index">
           <el-select
-            v-model="item.dateType"
+            v-model="item.DateType"
             style="width: 150px"
             placeholder="请选择"
           >
@@ -83,21 +87,28 @@
           </el-select>
 
           <el-input
-            v-model="item.nNum"
-            v-if="item.dateType===2"
+            v-model="item.Num"
+            v-if="item.DateType===2"
             style="width: 140px"
             :step="1"
             type="number"
-            @change="(val) => {item.nNum = Number(val)}"
+            @change="(val) => {item.Num = Number(val)}"
           />
 
-          <el-button type="text" v-if="index===0">
+          <el-button type="text" v-if="index===0" @click="addDateHandle">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -2 16 16" fill="none">
               <path d="M5.23966 8.48046H7.51966V10.7605C7.51966 10.8265 7.57366 10.8805 7.63966 10.8805H8.35966C8.42566 10.8805 8.47966 10.8265 8.47966 10.7605V8.48046H10.7597C10.8257 8.48046 10.8797 8.42646 10.8797 8.36046V7.64046C10.8797 7.57446 10.8257 7.52046 10.7597 7.52046H8.47966V5.24046C8.47966 5.17446 8.42566 5.12046 8.35966 5.12046H7.63966C7.57366 5.12046 7.51966 5.17446 7.51966 5.24046V7.52046H5.23966C5.17366 7.52046 5.11966 7.57446 5.11966 7.64046V8.36046C5.11966 8.42646 5.17366 8.48046 5.23966 8.48046Z" fill="#0052D9"/>
               <path d="M13.52 2H2.48C2.2145 2 2 2.2145 2 2.48V13.52C2 13.7855 2.2145 14 2.48 14H13.52C13.7855 14 14 13.7855 14 13.52V2.48C14 2.2145 13.7855 2 13.52 2ZM12.92 12.92H3.08V3.08H12.92V12.92Z" fill="#0052D9"/>
             </svg>添加日期
           </el-button>
 
+          <i 
+            v-else 
+            class="el-icon-delete" 
+            style="cursor:pointer;color:#f00;"
+            @click="form.DateConfigList.splice(index,1)"
+          />
+
         </li>
       </ul>
     </div>
@@ -109,19 +120,13 @@ export default {
     tagList: {
       type: Array,
     },
+    chartInfo: {
+      type: Object
+    }
   },
   data() {
     return {
-      form: {
-        timeValue: '',
-        tiemUnit: '',
-        xSeries: '',
-        ySeries: '',
-        dateArr: [
-          { dateType: 1,nNum: 0 },
-          { dateType: 2,nNum: 0.5 },
-        ]
-      },
+      form: {...this.chartInfo},
       unitOpt: [
         { label: "年", val: "年" },
         { label: "季", val: "季" },
@@ -136,7 +141,17 @@ export default {
       ]
     };
   },
-  methods: {},
+  methods: {
+    addDateHandle() {
+      this.form.DateConfigList.push({
+        DateType: 1,Num: 1
+      })
+    },
+
+    changeParams() {
+      // this.$emit('')
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -151,6 +166,7 @@ export default {
     display: flex;
     .date-li {
       display: flex;
+      align-items: center;
       gap: 10px;
       margin-bottom: 20px;
     }

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

@@ -3,7 +3,7 @@
     :visible.sync="isShow"
     :close-on-click-modal="false"
     :modal-append-to-body="false"
-    :title="'指标配置'"
+    :title="`${info.tagName}指标配置`"
     @close="cancelHandle"
     custom-class="tag-relation-dialog"
     center
@@ -16,29 +16,28 @@
           <label class="variety-name">{{item.varietyName}}</label>
 
           <selectTarget
-            :defaultId="item.search_edb"
+            :defaultId="item.edbInfoId"
             :defaultOpt="searchOptions"
             @select="e => selectTargetHandle(e,item)"  
             :filter="false"
             style="max-width: 200px;"
           />
           <el-date-picker
-            v-if="item.latestDate"
-            v-model="item.latestDate"
+            v-model="item.endDate"
             type="date"
             value-format="yyyy-MM-dd"
             disabled
             style="width:140px;"
+            placeholder="最新日期"
           />
 
           <el-input
-            v-if="item.latestValue"
-            v-model="item.latestValue"
+            v-model="item.endValue"
             style="width: 100px;"
             disabled
+            placeholder="最新值"
           />
 
-          <!-- <i class="el-icon-error" style="font-size:20px;cursor:pointer"></i> -->
         </li>
       </ul>
 
@@ -52,39 +51,32 @@
   </el-dialog>
 </template>
 <script>
+import { crossVarietyInterface } from '@/api/modules/chartRelevanceApi';
 import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
 export default {
   components: { selectTarget },
   props: {
     isShow: {
       type: Boolean
+    },
+    info: {
+      type:  Object
+    },
+    varietyList: {
+      type: Array
+    }
+  },
+  watch: {
+    isShow(nval) {
+      if(!nval) return
+
+      this.getRelationList() 
     }
   },
   data() {
     return {
-      list: [
-        { 
-          varietyName: 'pta',
-          edbName: '',
-          edbInfoId: '',
-          latestDate: '2023-05-06',
-          latestValue: '55'
-        },
-        { 
-          varietyName: '螺纹',
-          edbName: '',
-          edbInfoId: '',
-          latestDate: '2023-05-06',
-          latestValue: '55'
-        },
-        { 
-          varietyName: 'pta',
-          edbName: '',
-          edbInfoId: '',
-          latestDate: '2023-05-06',
-          latestValue: '55'
-        },
-      ]
+      list: [],
+      searchOptions: []
     }
   },
   methods:{
@@ -92,24 +84,63 @@ export default {
       if(!e){
         item.edbName = '';
         item.edbInfoId = '';
-        item.latestDate = '';
-        item.latestValue = '';
+        item.endDate = '';
+        item.endValue = '';
         return
       } 
-      const { LatestDate,LatestValue,EdbName,EdbInfoId } = e;
+      const { EndDate,EndValue,EdbName,EdbInfoId } = e;
       
       item.edbName = EdbName;
       item.edbInfoId = EdbInfoId;
-      item.latestDate = LatestDate;
-      item.latestValue = LatestValue;
+      item.endDate = EndDate;
+      item.endValue = EndValue;
     },
 
-    /* 保存`` */
-    saveHandle() {
-      
+    /* 获取标签关联品种列表 */
+    async getRelationList() {
+      let res = await crossVarietyInterface.getTagRelation({ ChartTagId: this.info.id })
+      if(res.Ret!==200) return
+
+      let relationArr = res.Data.List || [];
+
+      this.list = this.varietyList.map(_ => {
+        let relationItem = relationArr.length ? relationArr.find(item => item.ChartVarietyId===_.ChartVarietyId) : undefined
+
+        return {
+          varietyName: _.ChartVarietyName,
+          varietyId: _.ChartVarietyId,
+          edbName: relationItem?relationItem.EdbName:'',
+          edbInfoId: relationItem?relationItem.EdbInfoId:0,
+          endDate: relationItem?relationItem.EndDate:'',
+          endValue: relationItem?relationItem.EndValue:''
+        }
+      })
+
+      this.searchOptions = this.list.map(_ => ({
+        EdbName: _.edbName,
+        EdbInfoId: _.edbInfoId
+      }))
     },
 
+    /* 保存`` */
+    saveHandle: _.debounce(async function() {
+      let params = {
+        ChartTagId: this.info.id,
+        VarietyEdb: this.list.map(_ => ({
+          ChartVarietyId: _.varietyId,
+          EdbInfoId: _.edbInfoId
+        })).filter(_ => _.EdbInfoId)
+      }
+      let res = await crossVarietyInterface.setTagRelationVariety(params)
+
+      if(res.Ret!==200) return
+      this.$message.success('配置保存成功')
+      this.cancelHandle()
+    },300),
+
     cancelHandle() {
+      this.list = [];
+      this.searchOptions=[];
       this.$emit('update:isShow',false)
     }
   },

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

@@ -20,7 +20,7 @@
       <div class="tag-list">
         <div
           v-for="(item,index) in list"
-          :key="item.label"
+          :key="item.id"
           class="el-tag"
           :style="item.isEdit&&'padding:0;border:none;'"
           @dblclick="editTagOpen(item,index)"
@@ -77,7 +77,11 @@ export default {
   watch: {
     isShow(nval) {
       if(!nval) return
-      this.list = this.dataList
+      this.initData()
+    },
+
+    dataList(nval) {
+      this.initData();
     }
   },
   data() {
@@ -99,8 +103,20 @@ export default {
   methods:{
     /* 关闭标签 */
     closeItemHandle(item) {
-      let index = this.list.findIndex(_ => _.label === item.label);
-      this.list.splice(index,1)
+
+      this.delItem(item)
+    },
+
+    async delItem(item) {
+      let res = this.type==='tag' 
+        ? await crossVarietyInterface.tagDel({ChartTagId:item.id})
+        : await crossVarietyInterface.varietyDel({ChartVarietyId:item.id})
+
+      if(res.Ret !== 200) return
+      // let index = this.list.findIndex(_ => _.id === item.id);
+      // this.list.splice(index,1)
+      
+      this.refreshData()
     },
 
     addNewItem() {
@@ -119,10 +135,9 @@ export default {
       let res = this.type==='tag' 
         ? await crossVarietyInterface.tagAdd({ TagName: this.inputValue})
         : await crossVarietyInterface.varietyAdd({ VarietyName: this.inputValue})
-      // let item = {
-      //   label: this.inputValue
-      // }
-      // this.list.push(item)
+        
+      if(res.Ret!==200) return
+      this.refreshData()
       
     },
 
@@ -135,10 +150,25 @@ export default {
 
     /* 编辑标签 */
     async editItemHandle(item) {
-      item.isEdit = false;
       let res = this.type==='tag' 
-        ? await crossVarietyInterface.tagEdit({ TagName: this.inputValue,ChartTagId:''})
-        : await crossVarietyInterface.varietyEdit({ VarietyName: this.inputValue,ChartVarietyId:''})
+        ? await crossVarietyInterface.tagEdit({ TagName: item.label,ChartTagId:item.id})
+        : await crossVarietyInterface.varietyEdit({ VarietyName: item.label,ChartVarietyId:item.id})
+      if(res.Ret !== 200) return
+
+      item.isEdit = false;
+      this.refreshData()
+    },
+
+    refreshData() {
+      this.type==='tag' ? this.$parent.getTagList() : this.$parent.getVarietyList();
+    },
+
+    initData() {
+      this.list = this.dataList.map(_ => ({
+        label: this.type==='tag' ? _.ChartTagName : _.ChartVarietyName,
+        id: this.type==='tag' ? _.ChartTagId : _.ChartVarietyId,
+        ..._
+      }))
     },
 
     cancelHandle() {

src/views/chartRelevance_manage/crossVarietyAnalysis/list.vue

@@ -217,8 +217,7 @@
 </template>
 
 <script>
-
-import { statisticFeatureInterface } from '@/api/modules/chartRelevanceApi';
+import { crossVarietyInterface } from '@/api/modules/chartRelevanceApi';
 import leftMixin from '../mixins/classifyMixin';
 import Chart from '@/views/dataEntry_manage/components/chart';
 import classifyDia from '@/views/datasheet_manage/components/sheetClassifyDia.vue';
@@ -297,7 +296,7 @@ export default {
 
 		/* 获取分类 */
 		getTreeData(params=null) {
-			statisticFeatureInterface.classifyList({IsShowMe:this.isShowMe}).then(res => {
+			crossVarietyInterface.classifyList({IsShowMe:this.isShowMe}).then(res => {
 				const { Ret,Data } = res;
 				if(Ret !== 200) return
 
@@ -320,7 +319,7 @@ export default {
 
 		searchApi(query,page=1) {
       /* 查找列表 */
-      statisticFeatureInterface
+      crossVarietyInterface
         .searchChart({
           Keyword: query,
           IsShowMe:this.isShowMe,
@@ -376,7 +375,7 @@ export default {
 		 /* 删除节点校验 */
     async removeNode(node, { ChartClassifyId,ChartInfoId }) {
 
-			const { Data } = await statisticFeatureInterface.classifyDelCheck({ ChartClassifyId })
+			const { Data } = await crossVarietyInterface.classifyDelCheck({ ChartClassifyId })
 
 			const { DeleteStatus } = Data;
 
@@ -398,7 +397,7 @@ export default {
 
 		 /* 删除方法 */
     delApi(ChartClassifyId,ChartInfoId,type='') {
-      statisticFeatureInterface
+      crossVarietyInterface
         .classifyDel({
           ChartClassifyId,
 					ChartInfoId
@@ -436,7 +435,7 @@ export default {
 
 		/* 获取图表列表 */
 		getPublicList() {
-			statisticFeatureInterface.getChartList({
+			crossVarietyInterface.getChartList({
 				CurrentIndex: this.chart_page,
 				PageSize: this.chart_pages_size,
         ChartClassifyId: this.select_classify || 0,
@@ -462,24 +461,19 @@ export default {
 
 		/* 获取图表详情 */
 		getDetailHandle() {
-			statisticFeatureInterface.chartDetail({
+			crossVarietyInterface.chartDetail({
 				ChartInfoId: this.select_id
 			}).then(res => {
 				if(res.Ret !== 200) return
 
 				const { ChartInfo,DataResp } = res.Data;
 				this.chartInfo = ChartInfo;
-				if(ChartInfo.Source===9) {
-          this.statisticFrequencyData = DataResp;
-          this.setStatisticFrequency();
-				}else {
-					this.setDefaultChart([DataResp])
-				}
-
-				!ChartInfo.ChartImage && this.$nextTick(() => {
-					//关联图表和图片
-					 this.setChartImage();
-				})
+				// if(ChartInfo.Source===9) {
+        //   this.statisticFrequencyData = DataResp;
+        //   this.setStatisticFrequency();
+				// }else {
+				// 	this.setDefaultChart([DataResp])
+				// }
 			})
 		},
 
@@ -506,7 +500,7 @@ export default {
         spinner: 'el-icon-loading',
         background: 'rgba(255, 255, 255, 0.8)',
       });
-      statisticFeatureInterface
+      crossVarietyInterface
         .refreshChart({
           ChartInfoId: this.chartInfo.ChartInfoId,
         })

src/views/dataEntry_manage/mixins/chartPublic.js

@@ -36,7 +36,19 @@ const basicYAxis = {
   showLastLabel: true,
   tickPixelInterval: 50,
 }
-
+/**备注一下 越多越乱
+ * @params
+ * Source 1 ; chartType 1曲线 2季节 3面积 4堆积柱 5散点 6组合 7柱形 8截面散点
+ * 2 商品价格
+ * 3 相关性
+ * 4 滚动相关性
+ * 5 商品利润
+ * 6 拟合方程
+ * 7 统计特征/标准差
+ * 8 统计特征/百分位
+ * 9 统计特征/频率
+ * 10 跨品种分析
+ */
 export const chartSetMixin = {
 	data() {
 		return {
@@ -174,6 +186,9 @@ export const chartSetMixin = {
 				XEndDate:"12-31", // 横坐标显示范围-结束
 				JumpYear:0, //是否跨年
 			},
+
+      /* 跨品种分析图 */
+      crossVarietyChartData: {}
 		}
 	},
   watch: {
@@ -1751,6 +1766,113 @@ export const chartSetMixin = {
       this.currentLang=='en' && this.changeOptions()
     },
 
+    /* 跨品种分析 */
+    setCrossVarietyChart() {
+      const { min,max,x_min,x_max }  = this.chartLimit;
+
+      const { DataList,XName,YName,XNameEn,YNameEn } = this.crossVarietyChartData;
+
+      //y轴
+      let yAxis = {
+        ...basicYAxis,
+        title: {
+          text: YName,
+          textCh:YName,// 中文
+          textEn:YNameEn||YName,
+          align: 'middle',
+        },
+        opposite: false,
+        reversed: false,
+        min: Number(min),
+        max: Number(max),
+        tickWidth: 1,
+      }
+
+      // x轴
+      let xAxis = {
+        ...scatterXAxis,
+        title: {
+          text: XName,
+          textCh:XName,// 中文
+          textEn:XNameEn || XName,
+          align: 'middle',
+        },
+        min: Number(x_min),
+        max: Number(x_max),
+      }
+
+       //数据列
+      let series = [];
+      DataList.forEach(item => {
+        //数据列
+        let series_item = {
+          data: [],
+          type: 'scatter',
+          name: item.Name,
+          nameCh: item.Name,
+          nameEn: item.NameEn||item.Name,
+          color: item.Color,
+          lineWidth: 0,
+          chartType: 'linear',
+          zIndex:1
+        }
+        item.CoordinatePointData.forEach(_ => {
+          series_item.data.push({
+            x: _.X,
+            y: _.Y,
+          })
+        })
+        series.push(series_item);
+      })
+
+      let tooltip = {
+        formatter: function() {
+          console.log(this)
+          let series_obj = DataList.find(_ => _.Name === this.series.name);
+          // let ponit_obj = series_obj.CoordinatePointData.find(_ => _.X ===this.x && _.Y===this.y);
+
+          let str=`<b>${ this.series.name }</b>`;
+          str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
+          str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} ${ponit_obj.YDate}`;
+
+          return ''
+        },
+        formatterCh: function() {
+          // let series_obj = DataList.find(_ => _.Name === this.series.name);
+          // let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);
+
+          // let str=`<b>${ ponit_obj.Name }</b>`;
+          // str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
+          // str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} ${ponit_obj.YDate}`;
+
+          return str
+          
+        },
+        // formatterEn: function() {
+        //   let series_obj = DataList.find(_ => _.NameEn === this.series.name);
+        //   let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);
+
+        //   let str=`<b>${ ponit_obj.NameEn }</b>`;
+        //   str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XNameEn}: ${this.x} ${ponit_obj.XDate}<br>`;
+        //   str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YNameEn}: ${this.y} ${ponit_obj.YDate}`;
+
+        //   return str
+        // }
+      }
+
+      this.options = {
+        title: {
+          text:''
+        },
+        series,
+        yAxis: [yAxis],
+        xAxis,
+        // tooltip
+      }
+      this.currentLang=='en' && this.changeOptions()
+
+    },
+
 		/* 查询范围为1年内 x轴显示为月/日 否则默认年/月 */
 		xLabelDealHandle() {
 			const end =
@@ -2048,12 +2170,15 @@ export const chartSetMixin = {
 
     /* 改变上下限时重绘图 依赖于chartLimit的柱 商品价格 散点截面 */
     changeLimit() {
+      //source1 eta图库的类型对应
       const typeMap = {
         7: this.setBarChart,
         10: this.setSectionScatterChart
       }
+      //其他source
       const sourceMap = {
         2: this.setCommodityChart,
+        10: this.setCrossVarietyChart
         // 3:
       }
       if(this.chartInfo.Source === 1) {