switch branch

src/routes/modules/chartRoutes.js

@@ -203,17 +203,17 @@ export default [
 			{
 				path: 'chartrelevance',
 				name: '相关性分析',
-				component:()=>import('@/views/chartRelevance_manage/list.vue')
+				component:()=>import('@/views/chartRelevance_manage/relevance/list.vue')
 			},
 			{
 				path: 'fittingEquationList',
 				name: '拟合方程曲线',
-				component:()=>import('@/views/chartRelevance_manage/fittingEquationList.vue')
+				component:()=>import('@/views/chartRelevance_manage/fittingEquation/fittingEquationList.vue')
 			},
 			{
 				path: 'fittingEquationChartEditor',
 				name: '添加图表',
-				component: () => import('@/views/chartRelevance_manage/fittingEquationChartEditor.vue'),
+				component: () => import('@/views/chartRelevance_manage/fittingEquation/fittingEquationChartEditor.vue'),
 				meta: { 
 					pathFrom: "fittingEquationList",
           			pathName: "拟合方程曲线",
@@ -222,7 +222,7 @@ export default [
 			{
 				path: 'relevancechartEditor',
 				name: '编辑图表',
-				component:()=>import('@/views/chartRelevance_manage/relevanceChartEditor.vue'),
+				component:()=>import('@/views/chartRelevance_manage/relevance/relevanceChartEditor.vue'),
 				meta: { 
 					pathFrom: "chartrelevance",
           			pathName: "相关性图表",
@@ -231,17 +231,31 @@ export default [
 			{
 				path: 'statisticFeatureList',
 				name: '统计特征',
-				component: () => import('@/views/chartRelevance_manage/statisticFeatureList.vue')
+				component: () => import('@/views/chartRelevance_manage/statistic/statisticFeatureList.vue')
 			},
 			{
 				path: 'statisticFeatureChartEditor',
 				name: '编辑图表',
-				component:()=>import('@/views/chartRelevance_manage/statisticFeatureChartEditor.vue'),
+				component:()=>import('@/views/chartRelevance_manage/statistic/statisticFeatureChartEditor.vue'),
 				meta: { 
 					pathFrom: "statisticFeatureList",
           			pathName: "统计特征",
 				}
-			}
+			},
+			{
+				path: 'crossVarietyChartList',
+				name: '跨品种分析',
+				component: () => import('@/views/chartRelevance_manage/crossVarietyAnalysis/list.vue')
+			},
+			{
+				path: 'crossVarietyChartEditor',
+				name: '编辑图表',
+				component:()=>import('@/views/chartRelevance_manage/crossVarietyAnalysis/chartEditor.vue'),
+				meta: { 
+					pathFrom: "crossVarietyChartList",
+          pathName: "跨品种分析",
+				}
+			},
 		]
 	},
 

src/views/chartRelevance_manage/crossVarietyAnalysis/chartEditor.vue

@@ -0,0 +1,457 @@
+<template>
+  <div class="editor-page" id="box">
+    <span
+      class="slide-icon slide-right"
+      @click="isSlideLeft = !isSlideLeft"
+      v-show="isSlideLeft"
+    >
+      <i class="el-icon-d-arrow-right"></i>
+    </span>
+    <div class="left-cont" v-show="!isSlideLeft" id="left">
+      <div class="left-top">
+        <div>
+          <el-button type="primary" @click="saveChartHandle">保存</el-button>
+          <el-button type="primary" plain @click="$router.back()">取消</el-button>
+
+        </div>
+        <div style="color:#409EFF;font-size: 16px;cursor: pointer;" @click="showExplain = true">
+            <i class="el-icon-document" style="font-size:22px;"></i>
+            操作说明
+        </div>
+      </div>
+
+      <div class="left-min">
+        <section class="section-item">
+          <div class="top">
+            <label>选择品种</label>
+            <el-button type="text">品种管理</el-button>
+          </div>
+          <div class="list">
+            <el-tag 
+              size="small" 
+              class="tag"
+              v-for="item in varietyOptions"
+              :key="item.label"
+              @click="checkVarietyHandle(item)"
+            >{{item.label}}</el-tag>
+          </div>
+        </section>
+
+        <el-divider/>
+
+        <section class="section-item">
+          <div class="top">
+            <label>标签配置</label>
+            <el-button type="text">标签管理</el-button>
+          </div>
+          <div class="list">
+            <el-tag 
+              size="small" 
+              class="tag"
+              v-for="item in tagOptions"
+              :key="item.label"
+              @click="setTagRelationOpen(item)"
+            >{{item.label}}</el-tag>
+          </div>
+        </section>
+
+      </div>
+      
+      <span
+        class="move-btn resize"
+        v-drag
+        id="resize"
+      ></span>
+      <span class="slide-icon slide-left" @click="isSlideLeft = !isSlideLeft">
+        <i class="el-icon-d-arrow-left"></i>
+      </span>
+    </div>
+    <div
+      class="right-cont"
+      id="right"
+      :style="isSlideLeft ? 'width:100%' : `width:80%`"
+    >
+      <div
+        class="chart-min-cont"
+      >
+        <div class="chart-wrapper">
+          <div class="chart-show-cont"  v-if="!chartInfo.WarnMsg">
+            <div style="position:relative;">
+              <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
+              <Chart 
+                :options="options"
+                minHeight="400px" 
+                height="450px"
+                ref="chartRef"
+              />
+              <span class="chart-author">作者:{{ chartInfo.SysUserRealName}}</span>
+
+              <!-- 上下限 -->
+              <template>	
+                <div class="range-cont left">
+                  <el-input
+                    style="width: 60px; display: block"
+                    size="mini"
+                    type="number"
+                    placeholder="上限"
+                    v-model="chartLimit.max"
+                    @change="changeLimit"
+                  />
+                  <el-input
+                    class="min-data-input"
+                    size="mini"
+                    type="number"
+                    placeholder="下限"
+                    v-model="chartLimit.min"
+                    @change="changeLimit"
+                  />
+                </div>
+                <!-- x轴上下限 -->
+                <div class="range-cont bottom" > 
+                  <el-input
+                    class="left"
+                    size="mini"
+                    type="number"
+                    placeholder="下限"
+                    v-model="chartLimit.x_min"
+                    @change="changeLimit"
+                  />
+                  <el-input
+                    class="left"
+                    size="mini"
+                    type="number"
+                    placeholder="上限"
+                    v-model="chartLimit.x_max"
+                    @change="changeLimit"
+                  />
+                </div>
+              </template>
+              
+            </div>
+          </div>
+
+          <!-- 异常显示 -->
+          <p class="error-tip" style="min-height: 400px;" v-if="chartInfo.WarnMsg">{{chartInfo.WarnMsg}}</p>
+        </div>
+
+        <!-- 图表相关配置 -->
+        <chartFormSection
+          :tagList="tagOptions"
+        />
+      </div> 
+
+      <!-- <div class="nodata" v-else>
+        <tableNoData text="暂无信息"/>
+      </div> -->
+    </div>
+
+    <!-- 操作说明 -->
+    <ExplainDialog 
+        textArrName="statisticFeatureListTextArr"
+        :show-explain="showExplain"
+        @close="showExplain = false"
+    />
+  </div>
+</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'
+export default {
+  components: {
+    ExplainDialog,
+    Chart,
+    chartFormSection
+  },
+  directives: {
+    drag(el, bindings) {
+      el.onmousedown = function (e) {
+        var init = e.clientX;
+        // console.log(init);
+        var box = $('#box')[0];
+        // console.log(box.clientWidth)
+        let total_wid = box.offsetWidth;
+        var left = $('#left')[0];
+        var right = $('#right')[0];
+        var initWidth = left.offsetWidth;
+        document.onmousemove = function (e) {
+          var end = e.clientX;
+          var newWidth = end - init + initWidth;
+          left.style.width = newWidth + 'px';
+          right.style.width = newWidth > 300 ? total_wid - newWidth + 'px' : total_wid - 320 + 'px';
+        };
+        document.onmouseup = function () {
+          document.onmousemove = document.onmouseup = null;
+          e.releaseCapture && e.releaseCapture();
+        };
+        e.setCapture && e.setCapture();
+        return false;
+      };
+    },
+  },
+  mixins: [ chartSetMixin ],
+  data() {
+    return {
+      chart_code: this.$route.query.code || '',
+      isSlideLeft: false,
+      chartInfo: {
+        ChartName:'图表标题',
+        SysUserRealName: '还真'
+      },
+
+      checkedVariety: [],
+      varietyOptions: [
+        {label: '螺纹'},
+        {label: 'PTA'},
+        {label: '大豆'},
+        {label: '猪肉'},
+        {label: '热卷'},
+        {label: '焦炭'},
+      ],
+
+      tagOptions: [
+        {label:'基差'},
+        {label:'库存'},
+        {label:'进口'},
+        {label:'产量'},
+      ]
+    };
+  },
+  methods: {
+
+    /* 获取图表详情 */
+    getChartDetail() {
+
+    },
+    
+    /* 选择品种 */
+    checkVarietyHandle(item) {
+    },
+
+    /* 打开标签关联弹窗 */
+    setTagRelationOpen() {
+
+    },
+
+    /* 保存图表 */
+    saveChartHandle() {
+
+    },
+   
+
+    reloadRightWid() {
+      let total_wid = $('#box')[0].offsetWidth;
+      let left = $('#left')[0].offsetWidth;
+      let rigtWid = total_wid - left - 20 + 'px';
+      $('#right')[0].style.width = rigtWid;
+    },
+
+  },
+  mounted() {
+    this.getChartDetail();
+    window.addEventListener('resize', this.reloadRightWid);
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.reloadRightWid);
+  },
+  beforeRouteEnter(to, from, next) {
+    if(to.query.code){
+      to.matched[1].name='编辑图表'
+    }else{
+      to.matched[1].name='添加图表'
+    }
+    next()
+  }
+};
+</script>
+<style lang="scss" scoped>
+.editor-page {
+  $font-small: 12px;
+  $font-normal: 14px;
+  display: flex;
+  * {
+    box-sizing: border-box;
+  }
+
+  .slide-icon {
+    padding: 20px 0;
+    /* display: block; */
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 99;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    &.slide-left {
+      right: 0;
+    }
+    &.slide-right {
+      left: 0;
+    }
+  }
+  .left-cont {
+    width: 380px;
+    min-width: 380px;
+    background: #fff;
+    margin-right: 20px;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+    height: calc(100vh - 113px);
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    .left-top {
+      padding: 15px 20px;
+      border-bottom: 1px solid #ececec;
+      box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .left-min {
+      padding: 0 20px;
+      max-height: calc(100vh - 190px);
+      overflow-y: auto;
+      
+      .section-item{
+        padding: 20px 0;
+        .top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 15px;
+
+        }
+        .list {
+          display: flex;
+          flex-wrap: wrap;
+          height: 200px;
+          overflow-y: auto;
+          gap: 8px;
+          .tag {
+            color: #333;
+            background: #fff;
+            border-color: transparent;
+            cursor: pointer;
+            &.act {
+              color: #0052D9;
+              background-color: #e6eefb;
+              border-color: #ccdcf7;
+            }
+          }
+        }
+      }
+
+      .left-bottom {
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+     
+    }
+    .move-btn {
+      height: 100%;
+      width: 4px;
+      position: absolute;
+      right: 0px;
+      top: 0;
+      &:hover {
+        cursor: col-resize;
+      }
+    }
+  }
+  .right-cont {
+    width: 80%;
+
+    .chart-min-cont {
+      background: #fff;
+      height: calc(100vh - 118px);
+      overflow-y: auto;
+      display: flex;
+      flex-wrap: wrap;
+      .chart-wrapper {
+				padding: 20px;
+        width: 100%;
+				/* =================== */
+				.chart-show-cont {
+					min-height: 400px;
+					padding: 0 0 50px 100px;
+					position: relative;
+					.chart-title {
+						font-size: 16px;
+						font-weight: normal;
+						text-align: center;
+						margin-bottom: 10px;
+					}
+					.chart-author {
+						font-size: 14px;
+						color: #333;
+						position: absolute;
+						bottom: 20px;
+						right: 50px;
+					}
+          .range-cont {
+            position: absolute;
+            top: 15%;
+            .min-data-input {
+              width: 60px;
+              display: block;
+            }
+            &.left {
+              left: -80px;
+            }
+            &.bottom {
+              width: 100%;
+              display: flex;
+              justify-content: space-between;
+              top: auto;
+              right: 0;
+              bottom: -5%;
+              .left {
+                width: 60px;
+                display: block;
+                flex-shrink: 0;
+              }
+            }
+          }
+				}
+				.options-cont {
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-between;
+				}
+			}
+
+      @media screen and (min-width: 1711px) {
+        .min-data-input {
+          margin-top: 360px;
+        }
+      }
+      @media screen and (max-width: 1710px) {
+        .min-data-input {
+          margin-top: 290px;
+        }
+      }
+
+    }
+    .nodata {
+      height: calc(100vh - 120px);
+      background-color: #fff;
+      text-align: center;
+      font-size: 16px;
+      color: #666;
+      padding: 100px 0;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,159 @@
+<template>
+  <div class="form-cont">
+    <el-form
+      ref="diaForm"
+      label-position="left"
+      label-width="80px"
+      :model="form"
+      :rules="formRules"
+    >
+      <el-form-item label="时间长度" prop="timeValue">
+        <el-input
+          v-model="form.timeValue"
+          style="width: 140px"
+          :step="1"
+          type="number"
+          @change="(val) => {form.timeValue = Number(val)}"
+        />
+        <el-select
+          v-model="form.timeUnit"
+          placeholder="请选择"
+          style="width: 100px"
+        >
+          <el-option
+            v-for="item in unitOpt"
+            :key="item.val"
+            :label="item.label"
+            :value="item.val"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="xSeries">
+        <el-select
+          v-model="form.xSeries"
+          style="width: 240px"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in tagList"
+            :key="item.val"
+            :label="item.label"
+            :value="item.val"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="ySeries">
+        <el-select
+          v-model="form.ySeries"
+          placeholder="请选择"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="item in tagList"
+            :key="item.val"
+            :label="item.label"
+            :value="item.val"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="图表名称" prop="chartName">
+        <el-input
+          v-model="form.chartName"
+          style="width: 240px"
+          placeholder="请输入图表名称"
+        />
+      </el-form-item>
+    </el-form>
+
+    <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">
+          <el-select
+            v-model="item.dateType"
+            style="width: 150px"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in dateOptions"
+              :key="item.val"
+              :label="item.label"
+              :value="item.val"
+            />
+          </el-select>
+
+          <el-input
+            v-model="item.nNum"
+            v-if="item.dateType===2"
+            style="width: 140px"
+            :step="1"
+            type="number"
+            @change="(val) => {item.nNum = Number(val)}"
+          />
+
+          <el-button type="text" v-if="index===0">
+            <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>
+
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    tagList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      form: {
+        timeValue: '',
+        tiemUnit: '',
+        xSeries: '',
+        ySeries: '',
+        dateArr: [
+          { dateType: 1,nNum: 0 },
+          { dateType: 2,nNum: 0.5 },
+        ]
+      },
+      unitOpt: [
+        { label: "年", val: "年" },
+        { label: "季", val: "季" },
+        { label: "月", val: "月" },
+        { label: "周", val: "周" },
+        { label: "天", val: "天" },
+      ],
+
+      dateOptions: [
+        { label: '最新日期',val: 1 },
+        { label: 'N天前',val: 2 },
+      ]
+    };
+  },
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.form-cont {
+  width: 100%;
+  padding: 20px;
+  border-top: 1px solid #ebeff6;
+  display: flex;
+  gap: 50px;
+
+  .date-section {
+    display: flex;
+    .date-li {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+  <el-dialog
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    :modal-append-to-body="false"
+    :title="saveScence==='saveOther'?'图表另存为':'保存'"
+    @close="cancelHandle"
+    custom-class="dialog savechart-dialog"
+    center
+    width="560px"
+    v-dialogDrag
+  >
+    <div class="">
+
+    </div>
+
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+
+  },
+}
+</script>
+<style scoped lang='scss'>
+
+</style>

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

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

src/views/chartRelevance_manage/crossVarietyAnalysis/list.vue

@@ -0,0 +1,592 @@
+<template>
+	<div class=" pub-chart-box" v-if="showData">
+		<span
+			class="slide-icon slide-right"
+			@click="isSlideLeft = !isSlideLeft"
+			v-show="isSlideLeft"
+		>
+			<i class="el-icon-d-arrow-right"></i>
+		</span>
+
+		<div class="data-sheet-main" id="box">
+      <div class="main-left left" id="left" v-show="!isSlideLeft">
+				<div class="datasheet_top">
+						<el-button v-permission="permissionBtn.statisticPermission.statisticFeature_addChart"
+							 type="primary" @click="goAddChart">添加图表</el-button>
+				</div>
+
+				<div class="search-cont">
+					<el-checkbox v-model="isShowMe"  
+						v-permission="permissionBtn.statisticPermission.statisticFeature_onlyMine"
+						@change="() => { getTreeData();getPublicList() }">只看我的</el-checkbox>
+					<el-select
+						v-model="search_txt"
+						v-loadMore="searchLoad"
+						:filterable="!search_txt"
+						remote
+						clearable
+						placeholder="请输入图表名称"
+						style="width: 100%; margin-top: 20px"
+						:remote-method="searchHandle"
+						@click.native="inputFocusHandle"
+					>
+						<i slot="prefix" class="el-input__icon el-icon-search"></i>
+						<el-option
+							v-for="item in searchOptions"
+							:key="item.ChartInfoId"
+							:label="item.ChartName"
+							:value="item.ChartInfoId"
+						>
+						</el-option>
+					</el-select>
+				</div>
+				<div class="tree-cont">
+					<el-tree
+						ref="treeRef"
+						class="target_tree"
+						:data="treeData"
+						node-key="UniqueCode"
+						:props="defaultProp"
+						:allow-drag="canDragHandle"
+						:allow-drop="canDropHandle"
+						:current-node-key="select_node"
+						:default-expanded-keys="defaultShowNodes"
+						draggable
+						:expand-on-click-node="false"
+						check-strictly
+						empty-text="暂无分类"
+						@node-expand="handleNodeExpand"
+						@node-collapse="handleNodeCollapse"
+						@current-change="nodeChange"
+						@node-drop="dropOverHandle"
+						@node-drag-end="dropMouseLeave"
+						@node-drag-leave="dropMouseLeave"
+						@node-drag-enter="dropMouseOver"
+					>
+						<span class="custom-tree-node" slot-scope="{ node, data }">
+							<el-input
+								ref="editVal"
+								style="width: 90px"
+								placeholder="请输入值"
+								class="label-input"
+								v-model="new_label"
+								v-if="data.isEdit&&permissionBtn.isShowBtn('statisticPermission','statisticFeature_classifyOpt_edit')"
+								@blur="changeValue(data)"
+							/>
+							<span
+								@dblclick.stop="handleDblClick(data)"
+								v-else
+								class="text_oneLine node_label"
+								:style="`width:${
+									(select_node === data.UniqueCode && node.Nodewidth) || ''
+								}`"
+							>
+								<span>{{ data.ChartClassifyName }}</span>
+							</span>
+							<span
+								style="display: flex; align-items: center"
+								v-if="select_node === data.UniqueCode"
+							>
+								<img
+									src="~@/assets/img/data_m/move_ico.png"
+									alt=""
+									style="width: 14px; height: 14px; margin-right: 8px"
+								/>
+								<img
+									src="~@/assets/img/set_m/edit.png"
+									alt=""
+									style="width: 15px; height: 14px; margin-right: 8px"
+									@click.stop="editNode(node, data)"
+									v-if="!data.ChartInfoId&&permissionBtn.isShowBtn('statisticPermission','statisticFeature_classifyOpt_edit')"
+								/>
+								<img
+									slot="reference"
+									src="~@/assets/img/set_m/del.png"
+									alt=""
+									style="width: 14px; height: 14px"
+									@click.stop="removeNode(node, data)"
+									v-if="!data.ChartInfoId&&permissionBtn.isShowBtn('statisticPermission','statisticFeature_classifyOpt_delete')"
+								/>
+							</span>
+						</span>
+					</el-tree>
+
+				</div>
+				<span
+					class="move-btn resize"
+					v-drag
+					id="resize"
+					@mousemove="dynamicNode && resetNodeStyle(dynamicNode)"
+				></span>
+				<span class="slide-icon slide-left" @click="isSlideLeft = !isSlideLeft">
+					<i class="el-icon-d-arrow-left"></i>
+				</span>
+      </div>
+
+			<div class="main-right" id="right" :style="isSlideLeft ? 'width:100%' : 'width:80%'">
+
+				<!-- 图表详情 -->
+				<div class="chart-detail-wrapper" v-if="chartInfo.ChartInfoId">
+					<el-row class="bottom-min">
+              <el-col
+                :span="21"
+                style="padding: 20px 0;"
+              >
+                <div class="chartEn-mark" v-show="chartInfo.IsEnChart" style="top: 0;left: 0;">En</div>
+                <div class="chart-show-cont"  v-if="!chartInfo.WarnMsg">
+                  <div class="chartWrapper" id="chartWrapper">
+                    <h2 class="chart-title">{{ chartInfo.ChartName }}</h2>
+                    <Chart 
+											:options="options"
+											minHeight="440px" 
+											height="500px"
+											ref="chartRef"
+										/>
+                  </div>
+                  <span class="chart-author">作者:{{ chartInfo.SysUserRealName}}</span>
+                </div>
+
+                <!-- 异常显示 -->
+                <p class="error-tip" style="min-height: 400px;" v-if="chartInfo.WarnMsg">{{chartInfo.WarnMsg}}</p>
+              </el-col>
+              <el-col :span="3" style="position: absolute;height: 100%;right: 0;">
+								<!-- 操作 -->
+								<chartHandlesWrap
+									:chartInfo="chartInfo"
+									:linkUrl="linkUrl"
+									@copyChartConfirm="copyChartConfirm"
+									@addMychartHandle="addMychartHandle"
+									@refreshHandle="refreshHandle"
+									@saveChartOtherHandle="saveChartOtherHandle"
+									@editChartHandle="editChartHandle"
+									@openEnNameDia="openEnNameDia"
+									@delChartHandle="delChartHandle"
+								/>
+              </el-col>
+          </el-row>
+				</div>
+				<!-- 列表 -->
+				<chartListWrap
+          v-else 
+          :total="chart_total"
+          :list="chartList" 
+          @loadMoreHandle="loadMoreHandle"
+          @detailShowHandle="detailShowHandle"
+          @addMychartHandle="addMychartHandle"
+          ref="chartListWrap"
+        />
+			</div>
+		</div>
+
+
+		<!-- 分类弹窗 -->
+		<classify-dia
+			:isOpenDialog.sync="classifyDia"
+			:title="dialog_title"
+			:form="classifyForm"
+			@successCallback="getTreeData"
+		/>
+
+		 <!-- 加入我的图库弹窗 -->
+    <addMyClassifyDia
+      :isAddMyDialog="isAddMyChart"
+      :add_id="add_chart_id"
+      :add_ids="add_ids"
+      @cancel="isAddMyChart = false"
+      @addSuccess="addMySuccess"
+    />
+
+		 <!-- 图表另存 -->
+    <SaveChartOther 
+      :show.sync="isShowSaveOther" 
+      fromType="chartsetting"
+			source="statistic_feature"
+      :data="chartInfo"
+      @ensure="getTreeData"
+    />
+
+		<!-- 输入英文指标弹窗 -->
+		<set-en-name-dia 
+			:isOpenDialog="setEnName" 
+		  :formData="formItemArray"
+			@cancel="setEnName=false"
+   	  @updateEnName="updateEnName"
+		/>
+
+	</div>
+</template>
+
+<script>
+
+import { statisticFeatureInterface } 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';
+import addMyClassifyDia from '@/views/dataEntry_manage/components/addMyClassifyDia';
+import SaveChartOther from '@/views/dataEntry_manage/components/SaveChartOther';
+import setEnNameDia from '@/views/dataEntry_manage/components/setEnNameDia.vue'
+import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
+import { copyOtherOptions } from '@/utils/defaultOptions';
+export default {
+	components: {
+		classifyDia,
+		Chart,
+		addMyClassifyDia,
+		SaveChartOther,
+		setEnNameDia
+	},
+	mixins:[ leftMixin,chartSetMixin ],
+	computed: {
+		/* 分享地址 */
+    linkUrl() {
+      const LINK_CHART_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/chartshow';
+      return `${LINK_CHART_URL}?code=${this.chartInfo.UniqueCode}&fromType=share?&lang=${this.currentLang}`
+    }
+	},
+	data () {
+		return {
+			showData: false,
+			refreshLoading: false,
+			isShowMe: false,
+			search_txt: '',
+			searchOptions:[],
+			isSlideLeft: false,//左侧分类收起
+
+			select_node: '',//节点唯一标识code
+			select_classify: '',
+			new_label:'',//双击修改的value
+			treeData: [], //分类数据
+      defaultShowNodes: [], //展开节点
+      defaultProp: {
+        label: 'ChartClassifyName',
+        children: 'Children',
+      }, //树结构配置项
+			dynamicNode: null,
+
+			/* 分类弹窗 */
+			dialog_title:'',
+			classifyDia: false, //
+			classifyForm: {},
+
+			select_id: '',//选中的图表id
+			chartInfo: {},
+			chart_title:'',//图表标题 双击标题修改时来存储最新值
+
+			isAddMyChart: false, //加入图库弹窗
+      add_chart_id: 0, //要加入的图表
+			add_ids:[],//加入时已有的分类
+
+			/* 图表列表 */
+			publicHaveMove: true,//是否还有列表数据
+			chartList: [],
+			chart_total: 0,
+			chart_page: 1,
+			chart_pages_size: 16,
+
+			search_page: 1,
+			search_have_more: false,
+			current_search:'',
+		};
+	},
+	methods: {
+
+		/* 添加图表 */
+		goAddChart() {
+			this.$router.push({ path: '/crossVarietyChartEditor' });
+		},
+
+		/* 获取分类 */
+		getTreeData(params=null) {
+			statisticFeatureInterface.classifyList({IsShowMe:this.isShowMe}).then(res => {
+				const { Ret,Data } = res;
+				if(Ret !== 200) return
+
+				this.showData = true;
+				this.treeData = Data.AllNodes || [];
+				this.$nextTick(() => {
+					/* 新增完成后 处理树展开和选中 */
+					params && this.selectCurrentNode(params);
+				});
+
+			})
+		},
+
+		/* 搜索 */
+		searchHandle(query) {
+			this.search_page = 1;
+			this.current_search = query;
+			this.searchApi(this.current_search)
+		},
+
+		searchApi(query,page=1) {
+      /* 查找列表 */
+      statisticFeatureInterface
+        .searchChart({
+          Keyword: query,
+          IsShowMe:this.isShowMe,
+          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,...List];
+        });
+		},
+
+		/* 聚焦获取当前检索 */
+		inputFocusHandle(e) {
+			this.search_page = 1;
+			this.current_search = e.target.value;
+      if(this.current_search) {
+        this.searchApi(this.current_search)
+      }else {
+        this.searchOptions = [];
+      }
+		},
+
+		searchLoad() {
+			if(!this.search_have_more) return;
+			this.searchApi(this.current_search,++this.search_page);
+		},
+
+		/* 选中分类变化时 */
+		nodeChange({ UniqueCode,ChartInfoId,ChartClassifyId },node) {
+			this.search_txt = '';
+			this.select_node = UniqueCode;
+			this.select_classify = !ChartInfoId ? ChartClassifyId : 0;
+			this.select_id = ChartInfoId || 0;
+			this.resetNodeStyle(node);
+			this.dynamicNode = node;
+		},
+
+
+    /* 编辑节点 */
+    editNode(node, { ChartClassifyName,ChartClassifyId }) {
+
+      this.dialog_title = '编辑图表分类';
+      /* 编辑目录 */
+      this.classifyForm = {
+        classify_name: ChartClassifyName,
+        classify_id: ChartClassifyId,
+      };
+      this.classifyDia = true;
+    },
+
+		 /* 删除节点校验 */
+    async removeNode(node, { ChartClassifyId,ChartInfoId }) {
+
+			const { Data } = await statisticFeatureInterface.classifyDelCheck({ ChartClassifyId })
+
+			const { DeleteStatus } = Data;
+
+			DeleteStatus === 1 
+			? this.$confirm('该分类下关联表图表不可删除', '删除失败', {
+				confirmButtonText: '知道了',
+				showCancelButton: false,
+				type: 'error',
+			}) : DeleteStatus === 0
+			?  this.$confirm('确定删除当前分类吗？', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning',
+			}).then(() => {
+				this.delApi(ChartClassifyId,ChartInfoId)
+			}): null;
+
+    },
+
+		 /* 删除方法 */
+    delApi(ChartClassifyId,ChartInfoId,type='') {
+      statisticFeatureInterface
+        .classifyDel({
+          ChartClassifyId,
+					ChartInfoId
+        })
+        .then((res) => {
+          if (res.Ret !== 200) return
+					this.$message.success(res.Msg);
+
+					if (!res.Data.ChartInfoId) this.select_id = '';
+
+					//删除自动显示下一张
+					type=='del_chart' && res.Data.ChartInfoId
+						? this.getTreeData({
+								code: res.Data.UniqueCode,
+								id: res.Data.ChartInfoId
+							})
+						: this.getTreeData();
+        });
+    },
+
+		/* 分类成功回调 */
+		classifyCallback(type) {
+			this.getTreeData();
+
+			if (type === 'add') {
+        //新增分类完成之后，展开父节点显示刚新增的分类，若已展开节点则不做处理
+        let code = this.add_parent_id;
+        let flag = this.defaultShowNodes.some(item => item === code);
+        // console.log(flag)
+        !flag && this.defaultShowNodes.push(code);
+        this.add_parent_id = '';
+
+      }
+		},
+
+		/* 获取图表列表 */
+		getPublicList() {
+			statisticFeatureInterface.getChartList({
+				CurrentIndex: this.chart_page,
+				PageSize: this.chart_pages_size,
+        ChartClassifyId: this.select_classify || 0,
+				IsShowMe: this.isShowMe
+			}).then(res => {
+				if(res.Ret !== 200) return
+
+				this.publicHaveMove = res.Data
+            ? this.chart_page < res.Data.Paging.Pages
+            : false;
+          this.chartList = res.Data
+            ? this.chart_page === 1
+              ? res.Data.List
+              : [...this.chartList, ...res.Data.List]
+            : [];
+        this.chart_total = res.Data ? res.Data.Paging.Totals : 0;
+			})
+		},
+
+		getChartInfo() {
+			this.getDetailHandle();
+		},
+
+		/* 获取图表详情 */
+		getDetailHandle() {
+			statisticFeatureInterface.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();
+				})
+			})
+		},
+
+		/* 删除图表 */
+		delChartHandle() {
+			const { ChartClassifyId,ChartInfoId } = this.chartInfo;
+			this.$confirm('删除后该图表将不能再引用，确认删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.delApi(ChartClassifyId,ChartInfoId,'del_chart');
+        })
+        .catch(() => {});
+		},
+
+		/* 刷新图表 */
+		refreshHandle() {
+			this.refreshLoading = this.$loading({
+        lock: true,
+        target: '.main-right',
+        text: '刷新图表中...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(255, 255, 255, 0.8)',
+      });
+      statisticFeatureInterface
+        .refreshChart({
+          ChartInfoId: this.chartInfo.ChartInfoId,
+        })
+        .then((res) => {
+          this.refreshLoading.close();
+          if (res.Ret === 200) {
+            this.getDetailHandle();
+            this.$message.success(res.Msg);
+          }
+        });
+		},
+
+		/* 编辑图表 */
+		editChartHandle() {
+			this.$router.push({
+        path: '/crossVarietyChartEditor',
+        query: {
+          code: this.chartInfo.UniqueCode,
+					id: this.chartInfo.ChartInfoId
+        }
+      })
+		},
+
+		copyChartHandle:_.debounce(function(type){
+      let chartsName = this.currentLang=='ch'?this.chartInfo.ChartName:this.chartInfo.ChartNameEn
+      let { heightNum, widthNum , newTitle , dynamic_copyOptions} = this.dynamicWidthAndHeight(type,this.chartInfo.ChartType,chartsName,1)
+      const chartType = 'seasonLegend';
+      // 英文转SVG设置变动
+      if(this.currentLang == 'en'){
+        // 如果竖轴坐标单位为'英文单位'，表示客户没填，转成svg时置为空
+        this.$refs.chartRef.chart.options.yAxis.forEach(it => {
+          if(it.title.text == '英文单位') it.title.text='' 
+        });
+      }
+      let svg = this.$refs.chartRef.chart.getSVG({
+        chart:{
+          width:widthNum,
+          height:heightNum,
+          backgroundColor:"rgba(255, 255, 255, 0)",
+        },
+        title: {
+          text: newTitle,
+          margin: 10,
+          style: {
+            fontSize: '18px'
+          }
+        },
+        legend:{
+          ...copyOtherOptions[chartType],
+          ...dynamic_copyOptions[chartType]
+          }
+      });
+      this.copyBlobItem(widthNum,heightNum,svg,type);
+    },500),
+    
+		handleDblClick(data){
+			if(!this.permissionBtn.isShowBtn('statisticPermission','statisticFeature_classifyOpt_edit')) return 
+			this.editNodeLabel(data)
+		}
+	},
+	mounted() {
+
+		if(this.$route.query.code) {
+      this.getTreeData({code: this.$route.query.code,id: Number(this.$route.query.id)})
+    } else {
+      this.getTreeData();
+      this.getPublicList();
+    }
+
+		window.addEventListener('resize', this.reloadRightWid);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.reloadRightWid);
+	}
+}
+</script>
+<style lang='scss' scoped>
+@import '../css/index.scss';
+</style>
+
+<style lang="scss">
+@import '../css/pub.scss';
+</style>

src/views/chartRelevance_manage/css/index.scss

@@ -0,0 +1,188 @@
+* {
+  box-sizing: border-box;
+}
+$mini-font: 12px;
+$normal-font: 14px;
+.pub-chart-box {
+  .slide-icon {
+    padding: 20px 0;
+    /* display: block; */
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 99;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    &.slide-left {
+      right: 0;
+    }
+    &.slide-right {
+      left: 0;
+    }
+  }
+  .data-sheet-main {
+    display: flex;
+
+    .main-left {
+      width: 400px;
+      min-width: 300px;
+      background: #fff;
+      margin-right: 20px;
+      border: 1px solid #ececec;
+      border-radius: 4px;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+      height: calc(100vh - 120px);
+      overflow: hidden;
+      position: relative;
+      box-sizing: border-box;
+
+      .datasheet_top {
+        padding: 20px;
+        background: #fff;
+        border: 1px solid #ececec;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+        margin-bottom: 20px;
+      }
+      .search-cont {
+        padding: 0 20px;
+      }
+
+      .left-tab {
+        display: flex;
+        align-items: center;
+        padding: 20px 20px 0;
+        .tab {
+          cursor: pointer;
+          font-size: 16px;
+          border-bottom: 2px solid transparent;
+          margin-right: 40px;
+          padding-bottom: 5px;
+          &.act {
+            color: #409eff;
+            border-color: #409eff;
+          }
+          &:hover {
+            color: #409eff;
+          }
+        }
+      }
+
+      .tree-cont {
+        padding: 30px 20px;
+        max-height: calc(100vh - 280px);
+        overflow: auto;
+      }
+      .target_tree {
+        color: #333;
+        .custom-tree-node {
+          display: flex !important;
+          justify-content: space-between;
+          align-items: center;
+          display: block;
+          flex: 1;
+          .node_label {
+            margin-right: 2px;
+          }
+          .el-icon-view {
+            color: #409eff;
+            font-size: 18px;
+            margin-left: 5px;
+          }
+        }
+      }
+      .noDepart {
+        margin: 60px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #409eff;
+        font-size: 16px;
+        cursor: pointer;
+      }
+      .move-btn {
+        height: 100%;
+        width: 4px;
+        /* opacity: 0; */
+        position: absolute;
+        right: 0px;
+        top: 0;
+        &:hover {
+          cursor: col-resize;
+          /* background-color: orange */
+        }
+      }
+    }
+
+    .main-right {
+      width: 80%;
+      .chart-detail-wrapper {
+        height: calc(100vh - 120px);
+        border: 1px solid #ececec;
+        border-radius: 4px;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+        overflow: auto;
+        background: #fff;
+        padding: 30px;
+
+        .bottom-min {
+          border: 1px solid #dcdfe6;
+          margin-bottom: 20px;
+
+          .chart-show-cont {
+            padding: 0 160px 0 120px;
+            position: relative;
+            min-height: 400px;
+            .chart-title {
+              font-size: 16px;
+              font-weight: normal;
+              text-align: center;
+              margin-bottom: 10px;
+            }
+            .chart-author {
+              font-size: 14px;
+              color: #333;
+              position: absolute;
+              bottom: 0;
+              right: 50px;
+            }
+            .chartWrapper {
+              position: relative;
+              .range-cont {
+                position: absolute;
+                top: 13%;
+                .min-data-input {
+                  width: 60px;
+                  display: block;
+                }
+                &.left {
+                  left: -80px;
+                }
+                &.right {
+                  right: -65px;
+                }
+                &.rightTwo {
+                  right: -130px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @media screen and (min-width: 1711px) {
+      .min-data-input {
+        margin-top: 360px;
+      }
+    }
+    @media screen and (max-width: 1710px) {
+      .min-data-input {
+        margin-top: 290px;
+      }
+    }
+  }
+}

src/views/chartRelevance_manage/css/pub.scss

@@ -0,0 +1,49 @@
+.pub-chart-box {
+	.label-input .el-input__inner {
+		height: 25px;
+		line-height: 25px;
+		padding: 0 10px;
+	}
+
+	.range-cont .el-input__inner {
+		padding: 0 3px;
+	}
+
+	.el-tree__drop-indicator{
+		height:3px;
+		background-color:#409EFF;
+	}
+	.el-tree-node__content {
+		margin-bottom: 14px !important;
+	}
+	.el-tree-node__children {
+		.el-tree-node {
+			/* margin-bottom: 8px !important; */
+			margin-bottom: 0px !important;
+			padding-left: 18px;
+		}
+		.el-tree-node__content {
+			margin-bottom: 5px !important;
+			padding-left: 0 !important;
+		}
+	}
+	.expanded.el-icon-caret-right:before {
+		content: url('~@/assets/img/set_m/down.png') !important;
+	}
+	.el-icon-caret-right:before {
+		content: url('~@/assets/img/set_m/slide.png') !important;
+	}
+	.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
+		content: '' !important;
+	}
+	.el-tree-node__expand-icon.expanded {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	.el-tree-node.is-current > .el-tree-node__content {
+		background-color: #f0f4ff !important;
+	}
+	.el-tree-node__content {
+		padding-right: 10px !important;
+	}
+}

src/views/chartRelevance_manage/fittingEquationChartEditor.vue → src/views/chartRelevance_manage/fittingEquation/fittingEquationChartEditor.vue

@@ -174,10 +174,10 @@
 import { fittingEquationInterface } from '@/api/modules/chartRelevanceApi';
 import { yearSelector } from '@/utils/defaultOptions';
 import Chart from '@/views/dataEntry_manage/components/chart';
-import selectTarget from './components/selectTarget.vue';
-import fittingEquationSaveDia from './components/fittingEquationSaveDia.vue';
-import chartCard from './components/chartCard.vue';
-import ExplainDialog from './components/explainDialog.vue';
+import selectTarget from '../components/selectTarget.vue';
+import fittingEquationSaveDia from '../components/fittingEquationSaveDia.vue';
+import chartCard from '../components/chartCard.vue';
+import ExplainDialog from '../components/explainDialog.vue';
 export default {
   components: { Chart,selectTarget,fittingEquationSaveDia,chartCard,ExplainDialog },
 	directives: {

src/views/chartRelevance_manage/fittingEquationList.vue → src/views/chartRelevance_manage/fittingEquation/fittingEquationList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="fittingEquation-chart-container" v-if="showData">
+	<div class="fittingEquation-chart-container pub-chart-box" v-if="showData">
 		<span
 			class="slide-icon slide-right"
 			@click="isSlideLeft = !isSlideLeft"
@@ -243,7 +243,7 @@
 
 <script>
 import { fittingEquationInterface } from '@/api/modules/chartRelevanceApi';
-import leftMixin from './mixins/classifyMixin';
+import leftMixin from '../mixins/classifyMixin';
 import Chart from '@/views/dataEntry_manage/components/chart';
 import changeLang from "@/views/dataEntry_manage/components/changeLang.vue"
 import classifyDia from '@/views/datasheet_manage/components/sheetClassifyDia.vue';
@@ -634,307 +634,9 @@ export default {
 }
 </script>
 <style lang='scss' scoped>
-*{ box-sizing: border-box;}
-$mini-font: 12px; $normal-font: 14px;
-.fittingEquation-chart-container {
-	.slide-icon {
-		padding: 20px 0;
-		/* display: block; */
-		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
-		border-radius: 5px;
-		cursor: pointer;
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		z-index: 99;
-		&:hover {
-			background-color: rgba(0, 0, 0, 0.05);
-		}
-		&.slide-left {
-			right: 0;
-		}
-		&.slide-right {
-			left: 0;
-		}
-	}
-	.data-sheet-main {
-		display: flex;
-
-		.main-left {
-			width: 400px;
-			min-width: 300px;
-			background: #fff;
-			margin-right: 20px;
-			border: 1px solid #ececec;
-			border-radius: 4px;
-			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-			height: calc(100vh - 120px);
-			overflow: hidden;
-			position: relative;
-			box-sizing: border-box;
-
-			.datasheet_top {
-				padding: 20px;
-				background: #fff;
-				border: 1px solid #ececec;
-				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-				margin-bottom: 20px;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-			}
-			.search-cont {
-				padding: 0 20px;
-			}
-
-
-
-			.tree-cont {
-				padding: 30px 20px;
-				max-height: calc(100vh - 280px);
-				overflow: auto;
-			}
-			.target_tree {
-				color: #333;
-				.custom-tree-node {
-					display: flex !important;
-					justify-content: space-between;
-					align-items: center;
-					display: block;
-					flex: 1;
-					.node_label {
-						margin-right: 2px;
-					}
-					.el-icon-view {
-						color: #409EFF;
-						font-size: 18px;
-						margin-left: 5px;
-					}
-				}
-			}
-			.noDepart {
-				margin: 60px 0;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #409eff;
-				font-size: 16px;
-				cursor: pointer;
-			}
-			.move-btn {
-				height: 100%;
-				width: 4px;
-				/* opacity: 0; */
-				position: absolute;
-				right: 0px;
-				top: 0;
-				&:hover {
-				cursor: col-resize;
-					/* background-color: orange */
-				}
-			}
-		}
-
-		.main-right {
-			width: 80%;
-			.chart-detail-wrapper {
-				height: calc(100vh - 120px);
-				border: 1px solid #ececec;
-				border-radius: 4px;
-				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-				overflow: auto;
-				background: #fff;
-				padding: 30px;
-				.bottom-min {
-					border: 1px solid #DCDFE6;
-					margin-bottom: 20px;
-					.right-actions {
-						/* max-width: 160px; */
-						height: 100%;
-						padding: 20px 10px;
-						border-left: 1px solid #DCDFE6;
-						li {
-							margin-bottom: 15px;
-						}
-						@media screen and (max-width: 1710px) {
-							font-size: 12px;
-						}
-						.span-item {
-							color: #409eff;
-							cursor: pointer;
-							&:hover {
-								text-decoration: underline;
-							}
-							.el-icon-collection,
-							.el-icon-document-copy {
-								color: #409eff;
-							}
-						}
-					}
-					.chart-show-cont {
-              padding: 0 160px 0 120px;
-              position: relative;
-							min-height: 400px;
-              .chart-title {
-                font-size: 16px;
-                font-weight: normal;
-                text-align: center;
-                margin-bottom: 10px;
-              }
-              .chart-author {
-                font-size: 14px;
-                color: #333;
-                position: absolute;
-                bottom: 0;
-                right: 50px;
-              }
-              .chartWrapper {
-                position: relative;
-                .range-cont {
-                  position: absolute;
-                  top: 13%;
-                  .min-data-input {
-                    width: 60px;
-                    display: block;
-                  }
-                  &.left {
-                    left: -80px;
-                  }
-                  &.right {
-                    right: -65px;
-                  }
-                  &.rightTwo {
-                    right: -130px;
-                  }
-                }
-              }
-          }
-				}
-			}
-
-			.chart-list-cont {
-				color: #333;
-				.el-card .el-card__header,
-				.el-card__body {
-					padding: 10px;
-				}
-
-				.chartList-wrapper {
-					margin-top: 10px;
-					display: flex;
-					flex-wrap: wrap;
-					max-height: calc(100vh - 143px);
-					overflow: hidden;
-					overflow-y: auto;
-					.drag-cont {
-						width: 100%;
-						display: flex;
-						flex-wrap: wrap;
-					}
-					.dragShdow {
-						box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
-						opacity: 0.5;
-					}
-					.sheet-item {
-						position: relative;
-						.item-top {
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							font-size: 16px;
-							font-weight: 600;
-						}
-						.chart-img {
-							width: 100%;
-							height: 230px;
-							object-fit: contain !important;
-							cursor: pointer;
-						}
-						.item-bottom {
-							margin-top: 10px;
-							display: flex;
-							justify-content: space-between;
-							font-size: 12px;
-							color: #666;
-							.collected {
-								color: #f00;
-								cursor: pointer;
-							}
-							.join_txt {
-								color: #409eff;
-								cursor: pointer;
-							}
-						}
-					}
-				}
-				.nodata {
-					text-align: center;
-				}
-			}
-		}
-		
-		@media screen and (min-width: 1711px){
-			.min-data-input {
-				margin-top: 360px;
-			}
-		}
-		@media screen and (max-width: 1710px){
-			.min-data-input {
-				margin-top: 290px;
-			}
-		}
-	}
-}
+@import '../css/index.scss';
 </style>
 
 <style lang="scss">
-.fittingEquation-chart-container {
-	.label-input .el-input__inner {
-		height: 25px;
-		line-height: 25px;
-		padding: 0 10px;
-	}
-
-	.range-cont .el-input__inner {
-		padding: 0 3px;
-	}
-
-	.el-tree__drop-indicator{
-		height:3px;
-		background-color:#409EFF;
-	}
-	.el-tree-node__content {
-		margin-bottom: 14px !important;
-	}
-	.el-tree-node__children {
-		.el-tree-node {
-			/* margin-bottom: 8px !important; */
-			margin-bottom: 0px !important;
-			padding-left: 18px;
-		}
-		.el-tree-node__content {
-			margin-bottom: 5px !important;
-			padding-left: 0 !important;
-		}
-	}
-	.expanded.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/down.png') !important;
-	}
-	.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/slide.png') !important;
-	}
-	.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
-		content: '' !important;
-	}
-	.el-tree-node__expand-icon.expanded {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	.el-tree-node.is-current > .el-tree-node__content {
-		background-color: #f0f4ff !important;
-	}
-	.el-tree-node__content {
-		padding-right: 10px !important;
-	}
-}
+@import '../css/pub.scss';
 </style>

src/views/chartRelevance_manage/mixins/classifyMixin.js

@@ -117,7 +117,6 @@ export default {
     resetNodeStyle: _.debounce(function(node) {
 			const tree = $('.target_tree')[0];
 			let width = tree.offsetWidth;
-			// let label_wid = width > 500 ? 'auto' : (width <= 300 && width < 360) ?  100 : 0.7*width;
 			let label_wid =
 				width > 500
 					? 'auto'
@@ -143,26 +142,31 @@ export default {
       if(!this.new_label) return this.$message.warning('名称不能为空');
       this.$set(data,'isEdit',false)
 
-      if(this.new_label !== data.ClassifyName) {
-        let res = this.$route.path === '/fittingEquationList'
-          ? await fittingEquationInterface.classifyEdit({
-              ChartClassifyId: data.ChartClassifyId,
-              ChartClassifyName: this.new_label
-            })
-          : this.$route.path === '/statisticFeatureList'
-          ? await statisticFeatureInterface.classifyEdit({
-              ChartClassifyId: data.ChartClassifyId,
-              ChartClassifyName: this.new_label
-            })
-          :await chartRelevanceApi.classifyEdit({
-              ChartClassifyId: data.ChartClassifyId,
-              ChartClassifyName: this.new_label
-            })
-
-        if(res.Ret !== 200) return
-  
-        this.getTreeData();
+      if(this.new_label === data.ClassifyName) return 
+      
+      let res;
+      if(this.$route.path === '/fittingEquationList') {
+        res = await fittingEquationInterface.classifyEdit({
+                ChartClassifyId: data.ChartClassifyId,
+                ChartClassifyName: this.new_label
+              })
+      }else if(this.$route.path === '/statisticFeatureList') {
+        res = await statisticFeatureInterface.classifyEdit({
+                ChartClassifyId: data.ChartClassifyId,
+                ChartClassifyName: this.new_label
+              })
+      }else if(this.$route.path === '/chartrelevance') {
+        res = await chartRelevanceApi.classifyEdit({
+                ChartClassifyId: data.ChartClassifyId,
+                ChartClassifyName: this.new_label
+              })
+      }else if(this.$route.path === '/crossVarietyChartList') {
+
       }
+
+      if(res.Ret !== 200) return
+
+      this.getTreeData();
     },
 
     /* 拖拽完成 */
@@ -214,6 +218,8 @@ export default {
         res=await fittingEquationInterface.classifyMove(params)
       }else if(this.$route.path === '/statisticFeatureList') {
         res=await statisticFeatureInterface.classifyMove(params)
+      }else if(this.$route.path === '/crossVarietyChartList') {
+
       }
 
       if (res.Ret !== 200) return;
@@ -264,6 +270,8 @@ export default {
         res=await fittingEquationInterface.chartMove(params)
       }else if(this.$route.path === '/statisticFeatureList') {
         res=await statisticFeatureInterface.chartMove(params)
+      }else if(this.$route.path === '/crossVarietyChartList') {
+        
       }
       
       if (res.Ret !== 200) return;

src/views/chartRelevance_manage/list.vue → src/views/chartRelevance_manage/relevance/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="comodity-chart-container" v-if="showData">
+  <div class="comodity-chart-container pub-chart-box" v-if="showData">
     <span
       class="slide-icon slide-right"
       @click="isSlideLeft = !isSlideLeft"
@@ -302,7 +302,7 @@
 
 <script>
 import chartRelevanceApi from "@/api/modules/chartRelevanceApi.js";
-import leftMixin from "./mixins/classifyMixin";
+import leftMixin from "../mixins/classifyMixin";
 import Chart from "@/views/dataEntry_manage/components/chart";
 import changeLang from "@/views/dataEntry_manage/components/changeLang.vue";
 import classifyDia from "@/views/datasheet_manage/components/sheetClassifyDia.vue";
@@ -746,325 +746,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-* {
-  box-sizing: border-box;
-}
-$mini-font: 12px;
-$normal-font: 14px;
-.comodity-chart-container {
-  .slide-icon {
-    padding: 20px 0;
-    /* display: block; */
-    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 99;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    &.slide-left {
-      right: 0;
-    }
-    &.slide-right {
-      left: 0;
-    }
-  }
-  .data-sheet-main {
-    display: flex;
-
-    .main-left {
-      width: 400px;
-      min-width: 300px;
-      background: #fff;
-      margin-right: 20px;
-      border: 1px solid #ececec;
-      border-radius: 4px;
-      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-      height: calc(100vh - 120px);
-      overflow: hidden;
-      position: relative;
-      box-sizing: border-box;
-
-      .datasheet_top {
-        padding: 20px;
-        background: #fff;
-        border: 1px solid #ececec;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-        margin-bottom: 20px;
-      }
-      .search-cont {
-        padding: 0 20px;
-      }
-
-      .left-tab {
-        display: flex;
-        align-items: center;
-        padding: 20px 20px 0;
-        .tab {
-          cursor: pointer;
-          font-size: 16px;
-          border-bottom: 2px solid transparent;
-          margin-right: 40px;
-          padding-bottom: 5px;
-          &.act {
-            color: #409eff;
-            border-color: #409eff;
-          }
-          &:hover {
-            color: #409eff;
-          }
-        }
-      }
-
-      .tree-cont {
-        padding: 30px 20px;
-        max-height: calc(100vh - 320px);
-        overflow: auto;
-      }
-      .target_tree {
-        color: #333;
-        .custom-tree-node {
-          display: flex !important;
-          justify-content: space-between;
-          align-items: center;
-          display: block;
-          flex: 1;
-          .node_label {
-            margin-right: 2px;
-          }
-          .el-icon-view {
-            color: #409eff;
-            font-size: 18px;
-            margin-left: 5px;
-          }
-        }
-      }
-      .noDepart {
-        margin: 60px 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #409eff;
-        font-size: 16px;
-        cursor: pointer;
-      }
-      .move-btn {
-        height: 100%;
-        width: 4px;
-        /* opacity: 0; */
-        position: absolute;
-        right: 0px;
-        top: 0;
-        &:hover {
-          cursor: col-resize;
-          /* background-color: orange */
-        }
-      }
-    }
-
-    .main-right {
-      width: 80%;
-      .chart-detail-wrapper {
-        height: calc(100vh - 120px);
-        border: 1px solid #ececec;
-        border-radius: 4px;
-        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-        overflow: auto;
-        background: #fff;
-        padding: 30px;
-        .bottom-min {
-          border: 1px solid #dcdfe6;
-          margin-bottom: 20px;
-          .right-actions {
-            /* max-width: 160px; */
-            height: 100%;
-            padding: 20px 10px;
-            border-left: 1px solid #dcdfe6;
-            li {
-              margin-bottom: 15px;
-            }
-            @media screen and (max-width: 1710px) {
-              font-size: 12px;
-            }
-            .span-item {
-              color: #409eff;
-              cursor: pointer;
-              &:hover {
-                text-decoration: underline;
-              }
-              .el-icon-collection,
-              .el-icon-document-copy {
-                color: #409eff;
-              }
-            }
-          }
-          .chart-show-cont {
-            padding: 0 160px 0 120px;
-            position: relative;
-            min-height: 400px;
-            .chart-title {
-              font-size: 16px;
-              font-weight: normal;
-              text-align: center;
-              margin-bottom: 10px;
-            }
-            .chart-author {
-              font-size: 14px;
-              color: #333;
-              position: absolute;
-              bottom: 0;
-              right: 50px;
-            }
-            .chartWrapper {
-              position: relative;
-              .range-cont {
-                position: absolute;
-                top: 13%;
-                .min-data-input {
-                  width: 60px;
-                  display: block;
-                }
-                &.left {
-                  left: -80px;
-                }
-                &.right {
-                  right: -65px;
-                }
-                &.rightTwo {
-                  right: -130px;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .chart-list-cont {
-        color: #333;
-        .el-card .el-card__header,
-        .el-card__body {
-          padding: 10px;
-        }
-
-        .chartList-wrapper {
-          margin-top: 10px;
-          display: flex;
-          flex-wrap: wrap;
-          max-height: calc(100vh - 143px);
-          overflow: hidden;
-          overflow-y: auto;
-          .drag-cont {
-            width: 100%;
-            display: flex;
-            flex-wrap: wrap;
-          }
-          .dragShdow {
-            box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
-            opacity: 0.5;
-          }
-          .sheet-item {
-            position: relative;
-            .item-top {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              font-size: 16px;
-              font-weight: 600;
-            }
-            .chart-img {
-              width: 100%;
-              height: 230px;
-              object-fit: contain !important;
-              cursor: pointer;
-            }
-            .item-bottom {
-              margin-top: 10px;
-              display: flex;
-              justify-content: space-between;
-              font-size: 12px;
-              color: #666;
-              .collected {
-                color: #f00;
-                cursor: pointer;
-              }
-              .join_txt {
-                color: #409eff;
-                cursor: pointer;
-              }
-            }
-          }
-        }
-        .nodata {
-          text-align: center;
-        }
-      }
-    }
-
-    @media screen and (min-width: 1711px) {
-      .min-data-input {
-        margin-top: 360px;
-      }
-    }
-    @media screen and (max-width: 1710px) {
-      .min-data-input {
-        margin-top: 290px;
-      }
-    }
-  }
-}
+@import '../css/index.scss';
 </style>
 
 <style lang="scss">
-.comodity-chart-container {
-  .label-input .el-input__inner {
-    height: 25px;
-    line-height: 25px;
-    padding: 0 10px;
-  }
-
-  .range-cont .el-input__inner {
-    padding: 0 3px;
-  }
-
-  .el-tree__drop-indicator {
-    height: 3px;
-    background-color: #409eff;
-  }
-  .el-tree-node__content {
-    margin-bottom: 14px !important;
-  }
-  .el-tree-node__children {
-    .el-tree-node {
-      /* margin-bottom: 8px !important; */
-      margin-bottom: 0px !important;
-      padding-left: 18px;
-    }
-    .el-tree-node__content {
-      margin-bottom: 5px !important;
-      padding-left: 0 !important;
-    }
-  }
-  .expanded.el-icon-caret-right:before {
-    content: url("../../assets/img/set_m/down.png") !important;
-  }
-  .el-icon-caret-right:before {
-    content: url("../../assets/img/set_m/slide.png") !important;
-  }
-  .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
-    content: "" !important;
-  }
-  .el-tree-node__expand-icon.expanded {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  .el-tree-node.is-current > .el-tree-node__content {
-    background-color: #f0f4ff !important;
-  }
-  .el-tree-node__content {
-    padding-right: 10px !important;
-  }
-}
+@import '../css/pub.scss';
 </style>

src/views/chartRelevance_manage/relevanceChartEditor.vue → src/views/chartRelevance_manage/relevance/relevanceChartEditor.vue

@@ -374,12 +374,12 @@ import { dataBaseInterface } from '@/api/api.js';
 import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
 import {yearSelector} from '@/utils/defaultOptions';
 import chartRelevanceApi from '@/api/modules/chartRelevanceApi';
-import selectTarget from './components/selectTarget.vue'
-import chartCard from './components/chartCard.vue';
+import selectTarget from '../components/selectTarget.vue'
+import chartCard from '../components/chartCard.vue';
 import SaveChartOther from '@/views/dataEntry_manage/components/SaveChartOther';
-import saveChartToBase from './components/saveChartTobaseDia.vue';
-import saveEdbToBase from './components/saveEdbToBaseDia.vue'
-import ExplainDialog from './components/explainDialog.vue';
+import saveChartToBase from '../components/saveChartTobaseDia.vue';
+import saveEdbToBase from '../components/saveEdbToBaseDia.vue'
+import ExplainDialog from '../components/explainDialog.vue';
 export default {
   components: { selectTarget, chartCard, SaveChartOther, saveChartToBase, saveEdbToBase, ExplainDialog },
   directives: {

src/views/chartRelevance_manage/statisticFeatureChartEditor.vue → src/views/chartRelevance_manage/statistic/statisticFeatureChartEditor.vue

@@ -289,12 +289,12 @@ import { dataBaseInterface } from '@/api/api.js';
 import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
 import {yearSelector} from '@/utils/defaultOptions';
 import {statisticFeatureInterface} from '@/api/modules/chartRelevanceApi';
-import selectTarget from './components/selectTarget.vue'
-import chartCard from './components/chartCard.vue';
+import selectTarget from '../components/selectTarget.vue'
+import chartCard from '../components/chartCard.vue';
 import SaveChartOther from '@/views/dataEntry_manage/components/SaveChartOther';
-import saveChartToBase from './components/saveChartTobaseDia.vue';
-import saveEdbToBase from './components/saveEdbToBaseDia.vue';
-import ExplainDialog from './components/explainDialog.vue';
+import saveChartToBase from '../components/saveChartTobaseDia.vue';
+import saveEdbToBase from '../components/saveEdbToBaseDia.vue';
+import ExplainDialog from '../components/explainDialog.vue';
 export default {
   components: { selectTarget,chartCard,SaveChartOther,saveChartToBase,saveEdbToBase,ExplainDialog },
   directives: {

src/views/chartRelevance_manage/statisticFeatureList.vue → src/views/chartRelevance_manage/statistic/statisticFeatureList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="fittingEquation-chart-container" v-if="showData">
+	<div class="fittingEquation-chart-container pub-chart-box" v-if="showData">
 		<span
 			class="slide-icon slide-right"
 			@click="isSlideLeft = !isSlideLeft"
@@ -229,7 +229,7 @@
 <script>
 
 import { statisticFeatureInterface } from '@/api/modules/chartRelevanceApi';
-import leftMixin from './mixins/classifyMixin';
+import leftMixin from '../mixins/classifyMixin';
 import Chart from '@/views/dataEntry_manage/components/chart';
 import classifyDia from '@/views/datasheet_manage/components/sheetClassifyDia.vue';
 import addMyClassifyDia from '@/views/dataEntry_manage/components/addMyClassifyDia';
@@ -602,221 +602,9 @@ export default {
 }
 </script>
 <style lang='scss' scoped>
-*{ box-sizing: border-box;}
-$mini-font: 12px; $normal-font: 14px;
-.fittingEquation-chart-container {
-	.slide-icon {
-		padding: 20px 0;
-		/* display: block; */
-		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
-		border-radius: 5px;
-		cursor: pointer;
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		z-index: 99;
-		&:hover {
-			background-color: rgba(0, 0, 0, 0.05);
-		}
-		&.slide-left {
-			right: 0;
-		}
-		&.slide-right {
-			left: 0;
-		}
-	}
-	.data-sheet-main {
-		display: flex;
-
-		.main-left {
-			width: 400px;
-			min-width: 300px;
-			background: #fff;
-			margin-right: 20px;
-			border: 1px solid #ececec;
-			border-radius: 4px;
-			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-			height: calc(100vh - 120px);
-			overflow: hidden;
-			position: relative;
-			box-sizing: border-box;
-
-			.datasheet_top {
-				padding: 20px;
-				background: #fff;
-				border: 1px solid #ececec;
-				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-				margin-bottom: 20px;
-			}
-			.search-cont {
-				padding: 0 20px;
-			}
-
-
-
-			.tree-cont {
-				padding: 30px 20px;
-				max-height: calc(100vh - 280px);
-				overflow: auto;
-			}
-			.target_tree {
-				color: #333;
-				.custom-tree-node {
-					display: flex !important;
-					justify-content: space-between;
-					align-items: center;
-					display: block;
-					flex: 1;
-					.node_label {
-						margin-right: 2px;
-					}
-					.el-icon-view {
-						color: #409EFF;
-						font-size: 18px;
-						margin-left: 5px;
-					}
-				}
-			}
-			.noDepart {
-				margin: 60px 0;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #409eff;
-				font-size: 16px;
-				cursor: pointer;
-			}
-			.move-btn {
-				height: 100%;
-				width: 4px;
-				/* opacity: 0; */
-				position: absolute;
-				right: 0px;
-				top: 0;
-				&:hover {
-				cursor: col-resize;
-					/* background-color: orange */
-				}
-			}
-		}
-
-		.main-right {
-			width: 80%;
-			.chart-detail-wrapper {
-				height: calc(100vh - 120px);
-				border: 1px solid #ececec;
-				border-radius: 4px;
-				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-				overflow: auto;
-				background: #fff;
-				padding: 30px;
-				.bottom-min {
-					border: 1px solid #DCDFE6;
-					margin-bottom: 20px;
-					.chart-show-cont {
-              padding: 0 160px 0 120px;
-              position: relative;
-							min-height: 400px;
-              .chart-title {
-                font-size: 16px;
-                font-weight: normal;
-                text-align: center;
-                margin-bottom: 10px;
-              }
-              .chart-author {
-                font-size: 14px;
-                color: #333;
-                position: absolute;
-                bottom: 0;
-                right: 50px;
-              }
-              .chartWrapper {
-                position: relative;
-                .range-cont {
-                  position: absolute;
-                  top: 13%;
-                  .min-data-input {
-                    width: 60px;
-                    display: block;
-                  }
-                  &.left {
-                    left: -80px;
-                  }
-                  &.right {
-                    right: -65px;
-                  }
-                  &.rightTwo {
-                    right: -130px;
-                  }
-                }
-              }
-          }
-				}
-			}
-		}
-		
-		@media screen and (min-width: 1711px){
-			.min-data-input {
-				margin-top: 360px;
-			}
-		}
-		@media screen and (max-width: 1710px){
-			.min-data-input {
-				margin-top: 290px;
-			}
-		}
-	}
-}
+@import '../css/index.scss';
 </style>
 
 <style lang="scss">
-.fittingEquation-chart-container {
-	.label-input .el-input__inner {
-		height: 25px;
-		line-height: 25px;
-		padding: 0 10px;
-	}
-
-	.range-cont .el-input__inner {
-		padding: 0 3px;
-	}
-
-	.el-tree__drop-indicator{
-		height:3px;
-		background-color:#409EFF;
-	}
-	.el-tree-node__content {
-		margin-bottom: 14px !important;
-	}
-	.el-tree-node__children {
-		.el-tree-node {
-			/* margin-bottom: 8px !important; */
-			margin-bottom: 0px !important;
-			padding-left: 18px;
-		}
-		.el-tree-node__content {
-			margin-bottom: 5px !important;
-			padding-left: 0 !important;
-		}
-	}
-	.expanded.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/down.png') !important;
-	}
-	.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/slide.png') !important;
-	}
-	.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
-		content: '' !important;
-	}
-	.el-tree-node__expand-icon.expanded {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	.el-tree-node.is-current > .el-tree-node__content {
-		background-color: #f0f4ff !important;
-	}
-	.el-tree-node__content {
-		padding-right: 10px !important;
-	}
-}
+@import '../css/pub.scss';
 </style>

src/views/futures_manage/commodityChartBase.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="comodity-chart-container" v-if="showData">
+	<div class="comodity-chart-container pub-chart-box" v-if="showData">
 		<span
 			class="slide-icon slide-right"
 			@click="isSlideLeft = !isSlideLeft"
@@ -816,304 +816,9 @@ export default {
 }
 </script>
 <style lang='scss' scoped>
-*{ box-sizing: border-box;}
-$mini-font: 12px; $normal-font: 14px;
-.comodity-chart-container {
-	.slide-icon {
-		padding: 20px 0;
-		/* display: block; */
-		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
-		border-radius: 5px;
-		cursor: pointer;
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		z-index: 99;
-		&:hover {
-			background-color: rgba(0, 0, 0, 0.05);
-		}
-		&.slide-left {
-			right: 0;
-		}
-		&.slide-right {
-			left: 0;
-		}
-	}
-	.data-sheet-main {
-		display: flex;
-
-		.main-left {
-			width: 400px;
-			min-width: 300px;
-			background: #fff;
-			margin-right: 20px;
-			border: 1px solid #ececec;
-			border-radius: 4px;
-			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-			height: calc(100vh - 120px);
-			overflow: hidden;
-			position: relative;
-			box-sizing: border-box;
-
-			.datasheet_top {
-				padding: 20px;
-				background: #fff;
-				border: 1px solid #ececec;
-				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-				margin-bottom: 20px;
-			}
-			.search-cont {
-				padding: 0 20px;
-			}
-
-
-
-			.tree-cont {
-				padding: 30px 20px;
-				max-height: calc(100vh - 280px);
-				overflow: auto;
-			}
-			.target_tree {
-				color: #333;
-				.custom-tree-node {
-					display: flex !important;
-					justify-content: space-between;
-					align-items: center;
-					display: block;
-					flex: 1;
-					.node_label {
-						margin-right: 2px;
-					}
-					.el-icon-view {
-						color: #409EFF;
-						font-size: 18px;
-						margin-left: 5px;
-					}
-				}
-			}
-			.noDepart {
-				margin: 60px 0;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #409eff;
-				font-size: 16px;
-				cursor: pointer;
-			}
-			.move-btn {
-				height: 100%;
-				width: 4px;
-				/* opacity: 0; */
-				position: absolute;
-				right: 0px;
-				top: 0;
-				&:hover {
-				cursor: col-resize;
-					/* background-color: orange */
-				}
-			}
-		}
-
-		.main-right {
-			width: 80%;
-			.chart-detail-wrapper {
-				height: calc(100vh - 120px);
-				border: 1px solid #ececec;
-				border-radius: 4px;
-				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-				overflow: auto;
-				background: #fff;
-				padding: 30px;
-				.bottom-min {
-					border: 1px solid #DCDFE6;
-					margin-bottom: 20px;
-					.right-actions {
-						/* max-width: 160px; */
-						height: 100%;
-						padding: 20px 10px;
-						border-left: 1px solid #DCDFE6;
-						li {
-							margin-bottom: 15px;
-						}
-						@media screen and (max-width: 1710px) {
-							font-size: 12px;
-						}
-						.span-item {
-							color: #409eff;
-							cursor: pointer;
-							&:hover {
-								text-decoration: underline;
-							}
-							.el-icon-collection,
-							.el-icon-document-copy {
-								color: #409eff;
-							}
-						}
-					}
-					.chart-show-cont {
-              padding: 0 160px 0 120px;
-              position: relative;
-							min-height: 400px;
-              .chart-title {
-                font-size: 16px;
-                font-weight: normal;
-                text-align: center;
-                margin-bottom: 10px;
-              }
-              .chart-author {
-                font-size: 14px;
-                color: #333;
-                position: absolute;
-                bottom: 0;
-                right: 50px;
-              }
-              .chartWrapper {
-                position: relative;
-                .range-cont {
-                  position: absolute;
-                  top: 13%;
-                  .min-data-input {
-                    width: 60px;
-                    display: block;
-                  }
-                  &.left {
-                    left: -80px;
-                  }
-                  &.right {
-                    right: -65px;
-                  }
-                  &.rightTwo {
-                    right: -130px;
-                  }
-                }
-              }
-          }
-				}
-			}
-
-			.chart-list-cont {
-				color: #333;
-				.el-card .el-card__header,
-				.el-card__body {
-					padding: 10px;
-				}
-
-				.chartList-wrapper {
-					margin-top: 10px;
-					display: flex;
-					flex-wrap: wrap;
-					max-height: calc(100vh - 143px);
-					overflow: hidden;
-					overflow-y: auto;
-					.drag-cont {
-						width: 100%;
-						display: flex;
-						flex-wrap: wrap;
-					}
-					.dragShdow {
-						box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
-						opacity: 0.5;
-					}
-					.sheet-item {
-						position: relative;
-						.item-top {
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							font-size: 16px;
-							font-weight: 600;
-						}
-						.chart-img {
-							width: 100%;
-							height: 230px;
-							object-fit: contain !important;
-							cursor: pointer;
-						}
-						.item-bottom {
-							margin-top: 10px;
-							display: flex;
-							justify-content: space-between;
-							font-size: 12px;
-							color: #666;
-							.collected {
-								color: #f00;
-								cursor: pointer;
-							}
-							.join_txt {
-								color: #409eff;
-								cursor: pointer;
-							}
-						}
-					}
-				}
-				.nodata {
-					text-align: center;
-				}
-			}
-		}
-		
-		@media screen and (min-width: 1711px){
-			.min-data-input {
-				margin-top: 360px;
-			}
-		}
-		@media screen and (max-width: 1710px){
-			.min-data-input {
-				margin-top: 290px;
-			}
-		}
-	}
-}
+@import '~@/views/chartRelevance_manage/css/index.scss';
 </style>
 
 <style lang="scss">
-.comodity-chart-container {
-	.label-input .el-input__inner {
-		height: 25px;
-		line-height: 25px;
-		padding: 0 10px;
-	}
-
-	.range-cont .el-input__inner {
-		padding: 0 3px;
-	}
-
-	.el-tree__drop-indicator{
-		height:3px;
-		background-color:#409EFF;
-	}
-	.el-tree-node__content {
-		margin-bottom: 14px !important;
-	}
-	.el-tree-node__children {
-		.el-tree-node {
-			/* margin-bottom: 8px !important; */
-			margin-bottom: 0px !important;
-			padding-left: 18px;
-		}
-		.el-tree-node__content {
-			margin-bottom: 5px !important;
-			padding-left: 0 !important;
-		}
-	}
-	.expanded.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/down.png') !important;
-	}
-	.el-icon-caret-right:before {
-		content: url('../../assets/img/set_m/slide.png') !important;
-	}
-	.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
-		content: '' !important;
-	}
-	.el-tree-node__expand-icon.expanded {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	.el-tree-node.is-current > .el-tree-node__content {
-		background-color: #f0f4ff !important;
-	}
-	.el-tree-node__content {
-		padding-right: 10px !important;
-	}
-}
+@import '~@/views/chartRelevance_manage/css/pub.scss';
 </style>