页面布局

src/App.vue

@@ -110,6 +110,7 @@ iframe {
   font-size: 14px;
   color: #C54322;
   cursor: pointer;
+  &:hover{color:#C54322}
 }
 .disty {
   font-size: 14px;

src/routes/modules/oldRoutes.js

@@ -323,6 +323,22 @@ export default [
         name: "外部链接配置",
         hidden: true,
       },
+      {
+        path: "chartThemeIndex",
+        component: () => import("@/views/system_manage/chartTheme/index.vue"),
+        name: "图表配置",
+        hidden:false,
+      },
+      {
+        path: "chartThemeSet",
+        component: () => import("@/views/system_manage/chartTheme/themeSetting.vue"),
+        name: "主题配置",
+        hidden:true,
+        meta: {
+          pathFrom: "chartThemeIndex",
+          pathName: "图表配置"
+        },
+      },
     ],
   },
   // 外部链接

src/utils/defaultOptions.js

@@ -2,6 +2,7 @@ export const defaultOpts = {
 	//图表配置
 	chart: {
 
+		spacing: [2,10,2,10]
 	},
 	title: {
 		enabled: false
@@ -80,7 +81,7 @@ export const defaultOpts = {
 	legend: {
 		enabled: true,
 		verticalAlign: 'top',
-		margin:20,
+		margin:5,
 		// layout: 'vertical'
 	},
 	//滚动条

src/views/dataEntry_manage/addChart.vue

@@ -17,6 +17,7 @@
         <el-button type="primary" plain @click="$router.back()">取消</el-button>
       </div>
 			<div class="left-min">
+
 				<el-form
 					ref="diaForm"
 					label-position="top"
@@ -24,7 +25,7 @@
 					:model="chartInfo"
 					:rules="chartRules"
 				>
-					<el-form-item label="图表生成样式" prop="ChartType">
+					<el-form-item label="生成图表类型" prop="ChartType">
 						<el-select
 							v-model="chartInfo.ChartType"
 							placeholder="请选择生成样式"
@@ -39,6 +40,60 @@
 							</el-option>
 						</el-select>
 					</el-form-item>
+
+					<el-form-item label="图表主题" prop="Theme">
+						<el-select
+							v-model="chartInfo.Theme"
+							placeholder="请选择图表主题"
+							style="width: 90%"
+						>
+							<el-option
+								v-for="item in chartThemeArr"
+								:key="item.key"
+								:label="item.label"
+								:value="item.key"
+							>
+							</el-option>
+						</el-select>
+					</el-form-item>
+
+					<el-form-item label="">
+						<div class="search-cont" v-if="chartInfo.ChartType!==10">
+							<div>
+								<label>选择指标：</label>
+								<el-radio-group v-model="edbFromType">
+									<el-radio :label="0" style="margin-right: 15px">ETA指标</el-radio>
+									<el-radio :label="1">ETA预测指标</el-radio>
+								</el-radio-group>
+							</div>
+							<el-select
+								v-model="search_txt"
+								v-loadMore="searchLoad"
+								ref="searchRef"
+								:filterable="!search_txt"
+								remote
+								clearable
+								placeholder="指标ID/指标名称"
+								style="width:90%;margin-top: 10px;display: block;"
+								:remote-method="searchHandle"
+								@click.native="inputFocusHandle"
+								@change="selectTarget($event && searchOptions.find(_ => _.EdbInfoId === $event))"
+							>
+								<i slot="prefix" class="el-input__icon el-icon-search"></i>
+								<el-option
+									v-for="item in searchOptions"
+									:key="item.EdbInfoId"
+									:label="chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
+									:value="item.EdbInfoId"
+								>
+									<edbDetailPopover :info="item">
+										<div slot="reference">{{chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName }}</div>
+									</edbDetailPopover>
+								</el-option>
+							</el-select>
+						</div>
+					</el-form-item>
+
 					<el-form-item label="图表名称" prop="ChartName">
 						<el-input
 							v-model="chartInfo.ChartName"
@@ -82,41 +137,6 @@
 					</el-form-item>
 				</el-form>
 
-				<div class="search-cont" v-if="chartInfo.ChartType!==10">
-					<div>
-						<label>选择指标：</label>
-						<el-radio-group v-model="edbFromType">
-							<el-radio :label="0" style="margin-right: 15px">ETA指标</el-radio>
-							<el-radio :label="1">ETA预测指标</el-radio>
-						</el-radio-group>
-					</div>
-					<el-select
-						v-model="search_txt"
-						v-loadMore="searchLoad"
-						ref="searchRef"
-						:filterable="!search_txt"
-						remote
-						clearable
-						placeholder="指标ID/指标名称"
-						style="width:90%;margin-top: 10px;display: block;"
-						:remote-method="searchHandle"
-						@click.native="inputFocusHandle"
-						@change="selectTarget($event && searchOptions.find(_ => _.EdbInfoId === $event))"
-					>
-						<i slot="prefix" class="el-input__icon el-icon-search"></i>
-						<el-option
-							v-for="item in searchOptions"
-							:key="item.EdbInfoId"
-							:label="chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
-							:value="item.EdbInfoId"
-						>
-							<edbDetailPopover :info="item">
-								<div slot="reference">{{chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName }}</div>
-							</edbDetailPopover>
-						</el-option>
-					</el-select>
-				</div>
-
 				<div class="xaxis-range-cont" v-if="chartInfo.ChartType===2 && tableData && tableData.length>0">
 					<!-- 仅用于季节性图配置 -->
 					<div style="margin-bottom: 12px;" class="xaxis-range-tip">
@@ -320,7 +340,15 @@
 						@getData="getSectionScatterData"
 						@modifySeriesName="IsNameDefault = false"
 					/>
+
+
+					<!-- 标识区 标记线 图表说明 -->
+					<markersSection
+						v-if="tableData.length"
+						:chartType="chartInfo.ChartType"
+					/>
         </div>
+
 			</div>
       <span
         class="move-btn resize"
@@ -462,20 +490,39 @@
 								</div>
 							</template>
 						</div>
+
+						<div class="chart-bottom-info">
+
+							<div class="chart-source">
+								<span>数据来源:{{chartInfo.SourcesFrom}}</span>
+								<el-switch
+									v-model="chartInfo.SourcesFromDisabled"
+									:active-value="1"
+									:inactive-value="0"
+									style="margin:0 15px;"
+								/>
+								<span class="editsty">编辑</span>
+							</div>
+
+							<!-- 公历农历切换 只用于季节性图 -->
+							<el-radio-group
+								v-model="calendar_type"
+								class="calendar-cont"
+								v-if="chartInfo.ChartType === 2"
+								@change="getPreviewSplineInfo"
+							>
+								<el-radio-button label="公历" />
+								<el-radio-button label="农历" />
+							</el-radio-group>
+
+							<!-- 图表说明 -->
+							<div class="chart-instruction" v-text="chartInfo.Instructions"></div>
+						</div>
+
+
 						<span class="chart-author"
 							>作者:{{ chartInfo.SysUserRealName || roleName }}</span
 						>
-
-						<!-- 公历农历切换 只用于季节性图 -->
-						<el-radio-group
-							v-model="calendar_type"
-							class="calendar-cont"
-							v-if="chartInfo.ChartType === 2"
-							@change="getPreviewSplineInfo"
-						>
-							<el-radio-button label="公历" />
-							<el-radio-button label="农历" />
-						</el-radio-group>
 					</div>
 					<el-table
 						:data="tableData"
@@ -492,7 +539,7 @@
 							align="center"
 						>
 							<template slot-scope="scope">
-								<div v-if="item.key === 'EdbName' && chartInfo.ChartType === 7">
+								<div v-if="item.key === 'EdbName' && [1,4,6].includes(chartInfo.ChartType)">
 									<!-- 奇怪柱状图用别名 -->
 									<el-input 
 										v-model="scope.row.EdbAliasName"
@@ -562,8 +609,9 @@ import DateChooseDia from './components/DateChooseDia';
 import barOption from './components/barOptionSection.vue';
 import sectionalScatterOption from './components/sectionalScatterOption.vue';
 import LegendEditDia from './components/LegendEditDia.vue';
+import markersSection from './components/markersSection.vue';
 export default {
-  components: { Chart,DateChooseDia,barOption,sectionalScatterOption,LegendEditDia},
+  components: { Chart,DateChooseDia,barOption,sectionalScatterOption,LegendEditDia,markersSection},
 	directives: {
     drag(el, bindings) {
       el.onmousedown = function (e) {
@@ -696,7 +744,6 @@ export default {
 								EndDate: this.year_select === 5 ? this.select_date[1] : '',
 							} 
 						: typePrams
-					// console.log(params);
 					dataBaseInterface.chartAdd(params).then(res => {
 						if(res.Ret !== 200) return;
 							this.setChartImage(res.Data);
@@ -818,7 +865,6 @@ export default {
 			overflow-y: auto;
 			.search-cont {
 				color: #606266;
-				margin-top: 20px;
 			}
 			.xaxis-range-cont{
 				color: #606266;
@@ -994,11 +1040,6 @@ export default {
 				.highcharts-axis-title {
 					display: block;
 				}
-				.calendar-cont {
-					display: block;
-					margin: 10px auto 0;
-					text-align: center;
-				}
 				/* =================== */
 				.chart-show-cont {
 					min-height: 300px;
@@ -1067,6 +1108,26 @@ export default {
       color: #666;
 			padding: 100px 0;
     }
+
+		.chart-bottom-info {
+			margin-top: 10px;
+			display: flex;
+			gap: 0 20px;
+			.chart-source {
+				width: 30%;
+			}
+
+			.calendar-cont {
+				display: block;
+				margin: 0 auto;
+				text-align: center;
+				flex-shrink: 0;
+			}
+
+			.chart-instruction {
+				flex: 1;
+			}
+		}
 		@media screen and (min-width: 1711px){
 			.min-data-input {
 				margin-top: 310px;

src/views/dataEntry_manage/components/addMarkerDialog.vue

@@ -0,0 +1,252 @@
+<template>
+  <el-dialog
+		:visible.sync="isShow"
+		:close-on-click-modal="false"
+    :append-to-body="true"
+		@close="cancelHandle"
+		custom-class="marker-edit-dialog"
+		center
+		width="650px"
+		v-dialogDrag
+    top="8vh"
+    :title="form.title"
+  >
+    <div class="main">
+      <el-form
+        label-position="left"
+        label-width="120px"
+        ref="formRef"
+        :model="markerForm"
+        :rules="formRules"
+      >
+          <el-form-item label="选择坐标轴" prop="axis">
+            <el-select 
+              v-model="markerForm.axis"
+              placeholder="请选择日期坐标轴"
+              style="width:200px;"
+            >
+              <el-option label="左轴" :value="1" v-if="canSelectYaxis"/>
+              <el-option label="横轴" :value="3" v-if="canSelectXaxis"/>
+              <el-option label="右轴" :value="0" v-if="canSelectRightYaxis"/>
+              <el-option label="右2轴" :value="2" v-if="canSelectRightTwoYaxis"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="标记线所在刻度" prop="value">
+            
+            <!-- 时间轴1,2,4,6的y轴数字 x轴日期  -->
+            <template v-if="[1,2,4,6].includes(chartInfo.ChartType)">
+              <el-date-picker
+                v-if="markerForm.axis===3"
+                v-model="markerForm.value"
+                type="date"
+                style="width: 200px;"
+                placeholder="选择日期"
+                :clearable="false"
+                value-format="yyyy-MM-dd"
+                prefix-icon="none"
+              ></el-date-picker>
+
+              <el-input
+                v-else
+                v-model="markerForm.value"
+                style="width: 200px;"
+                type="number"
+                placeholder="请输入数字"
+                clearable
+              />
+
+            </template>
+
+            <!-- 柱形图，散点，截面散点只可选数字 -->
+            <template v-else-if="[5,7,10].includes(chartInfo.ChartType)">
+              <el-input
+                v-model="markerForm.value"
+                style="width: 200px;"
+                type="number"
+                placeholder="请输入数字"
+                clearable
+              />
+            </template>
+          </el-form-item>
+          <el-form-item label="线型" prop="dashStyle">
+            <el-select 
+              v-model="markerForm.dashStyle"
+              style="width:200px;"
+            >
+              <el-option 
+                v-for="item in dashOptions" 
+                :key="item.value" 
+                :label="item.label" 
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="颜色" prop="color">
+            <el-color-picker
+              v-model="markerForm.color"
+              show-alpha
+              :predefine="predefineColors"
+            />
+          </el-form-item>
+          <el-form-item label="粗细" prop="lineWidth">
+            <el-input
+              v-model="markerForm.lineWidth"
+              style="width: 100px"
+              type="number"
+              :min="1"
+            />
+          </el-form-item>
+          <el-form-item :label="`标记${form.markerType==='line'?'线':'区'}说明`" prop="text">
+            <el-input
+              v-model="markerForm.text"
+              style="width: 200px"
+              placeholder="请输入内容"
+            />
+          </el-form-item>
+          <el-form-item label="文本位置" prop="textPostion">
+            <el-select 
+              v-model="markerForm.textPostion"
+              style="width:200px;"
+            >
+              <el-option 
+                v-for="item in verticalPositions" 
+                :key="item.value" 
+                :label="item.label" 
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="文本颜色" prop="textColor">
+            <el-color-picker
+              v-model="markerForm.textColor"
+              show-alpha
+              :predefine="predefineColors"
+            />
+          </el-form-item>
+          <el-form-item label="文本字号" prop="textFontSize">
+            <el-input
+              v-model="markerForm.textFontSize"
+              style="width: 100px"
+              type="number"
+              :min="1"
+            />
+          </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="bottom">
+      <el-button @click="saveMarker" type="primary" style="margin-right:5%">保存</el-button>
+      <el-button @click="cancelHandle">取消</el-button>
+    </div>
+
+  </el-dialog>
+</template>
+<script>
+import { defaultOpts } from '@/utils/defaultOptions';
+import { verticalPositions } from '@/views/system_manage/chartTheme/common/config';
+export default {
+  props: {
+    isShow: {
+      type: Boolean
+    },
+
+    form: {
+      type: Object  //markerType：’line‘标示线 'area'标识区 
+    },
+
+    axisInfo: {  //轴信息
+      type: Object
+    },
+
+    chartInfo: {
+      type:Object
+    }
+
+  },
+  watch: {
+    isShow(nval) {
+      if(!nval) return
+    }
+  },
+  computed: {
+     /* 是否可选左轴
+      季节图 柱形图 散点图 截面散点固定左轴*/
+    canSelectYaxis() {
+      let isHave = false;
+      if([2,5,7,10].includes(this.chartInfo.ChartType)){
+        isHave=true
+      }else {
+        if(this.axisInfo.leftIndex!=-1) isHave=true
+      }
+      return isHave
+    },
+    /* 是否可选x轴 柱形图不可选*/
+    canSelectXaxis() {
+      return this.chartInfo.ChartType!==7
+    },
+    /* 是否可选右轴 曲线 组合 堆积柱*/
+    canSelectRightYaxis() {
+      return [1,4,6].includes(this.chartInfo.ChartType) && this.axisInfo.rightIndex!=-1
+    },
+    /* 是否可选右2轴 曲线 组合*/
+    canSelectRightTwoYaxis() {
+      return [1,6].includes(this.chartInfo.ChartType) && this.axisInfo.rightTwoIndex!=-1
+    },
+  },
+  data() {
+    return {
+      predefineColors: defaultOpts.colors.slice(0, 2), //定义颜色蓝，红 默认颜色,
+      verticalPositions,
+      markerForm: {
+        axis:1,
+        value: '',
+        lineWidth: 1,
+        dashStyle: 'Solid',
+        color: defaultOpts.colors[0],
+        text: '',
+        textPostion: 'top',
+        textColor: defaultOpts.colors[0],
+        textFontSize: 12
+      },
+
+      formRules: {
+        value:[
+					{ required: true, message: '标识刻度不能为空', trigger: 'blur' },
+				],
+      },
+
+      dashOptions: [
+        { label: '实线',value: 'Solid' },
+        { label: '长虚线点',value: 'LongDashDot' },
+        { label: '短虚线点',value: 'ShortDashDot' },
+      ],
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+
+    async saveMarker() {
+      await this.$refs.formRef.validate()
+
+      this.$emit('save')
+    },
+   
+    cancelHandle() {
+      this.$emit('update:isShow',false)
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+.main {
+  padding-left: 20%;
+}
+.bottom {
+  
+  margin: 30px 0;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/dataEntry_manage/components/markersSection.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="chart-markers-section">
+    <!-- 标示线 -->
+    <div class="section-item">
+      <ul class="marker-list">
+        <li class="marker-item" v-for="(item,index) in markerLinesArr" :key="index">
+          <span>{{item.axisName}}: {{item.value}}</span>
+          <div>
+            <i class="el-icon-view icon"/>
+            <i class="el-icon-edit icon" style="margin:0 6px"/>
+            <i class="el-icon-delete icon" @click="markerLinesArr.splice(index,1)"/>
+          </div>
+        </li>
+      </ul>
+
+      <div
+        class="add-cont"
+        @click="openMarkerDiaHandle('line')"
+      >
+        <img
+          src="~@/assets/img/set_m/add_ico.png"
+          alt=""
+          style="width: 16px; height: 16px; margin-right: 10px"
+        />
+        <span>添加标识线</span>
+      </div>
+
+    </div>
+
+    <!-- 标识区 -->
+    <div class="section-item">
+      <ul class="marker-list">
+        <li class="marker-item" v-for="(item,index) in markerAreasArr" :key="index">
+          <span>{{item.axisName}}: {{item.value}}</span>
+          <div>
+            <i class="el-icon-view icon"/>
+            <i class="el-icon-edit icon" style="margin:0 6px"/>
+            <i class="el-icon-delete icon" @click="markerAreasArr.splice(index,1)"/>
+          </div>
+        </li>
+      </ul>
+      <div
+        class="add-cont"
+        @click="openMarkerDiaHandle('area')"
+      >
+        <img
+          src="~@/assets/img/set_m/add_ico.png"
+          alt=""
+          style="width: 16px; height: 16px; margin-right: 10px"
+        />
+        <span>添加标识区</span>
+      </div>
+
+    </div>
+
+    <!-- 图表说明 -->
+    <div class="section-item">
+      <div class="induction-item" v-if="chartInstruction.text">
+        <div v-text="chartInstruction.text" class="text_oneLine text"></div>
+         <div>
+            <i class="el-icon-view icon"/>
+            <i class="el-icon-edit icon" style="margin:0 6px"/>
+            <i class="el-icon-delete icon" @click="chartInstruction.text=''"/>
+          </div>
+      </div>
+
+      <div
+        class="add-cont"
+        v-if="!chartInstruction.text"
+        @click="addChartInductionHandle"
+      >
+        <img
+          src="~@/assets/img/set_m/add_ico.png"
+          alt=""
+          style="width: 16px; height: 16px; margin-right: 10px"
+        />
+        <span>添加图表说明</span>
+      </div>
+
+    </div>
+
+    
+    <!-- 标识线标识区弹窗 -->
+    <addMarkerDialog
+      :isShow.sync="isOpenMarkerDialog"
+      :form="markerForm"
+      :chartInfo="$parent.chartInfo"
+      :axisInfo="{
+        leftIndex: $parent.leftIndex,
+        rightIndex: $parent.rightIndex,
+        rightTwoIndex: $parent.rightTwoIndex
+      }"
+    />
+
+    <!-- 图表说明弹窗 -->
+    <m-dialog
+      :title="'添加图表说明'" 
+      :show.sync="chartinductionDiaForm.show" 
+      width="650px"
+    >
+      <div style="padding-left: 20%">
+        <el-form
+          :model="chartinductionDiaForm"
+          label-width="80px"
+          label-position="left"
+        >
+          <el-form-item label="图表说明">
+            <el-input
+              v-model="chartinductionDiaForm.text"
+              placeholder="请输入内容"
+            />
+          </el-form-item>
+          <el-form-item label="颜色">
+            <el-color-picker
+              v-model="chartinductionDiaForm.color"
+              show-alpha
+            />
+          </el-form-item>
+          <el-form-item label="字号">
+            <el-input
+              v-model="chartinductionDiaForm.fontSize"
+              style="width: 100px"
+              type="number"
+              :min="1"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" style="margin-top: 20px;">
+        <el-button @click="saveSeries" type="primary">保存</el-button>
+        <el-button @click="chartinductionDiaForm.show=false">取消</el-button>
+      </div>
+    </m-dialog>
+
+  </div>  
+</template>
+<script>
+import addMarkerDialog from './addMarkerDialog.vue'
+import mDialog from '@/components/mDialog.vue'
+export default {
+  components: { addMarkerDialog,mDialog },
+  data() {
+    return {
+      markerLinesArr: [
+        {
+          axis:1,
+          axisName: '左轴',
+          value: '50',
+          lineWidth: 1,
+          dashStyle: 'Solid',
+          color: '',
+          text: '',
+          textPostion: 'top',
+          textColor: '',
+          textFontSize: 12
+        }
+      ],
+      markerAreasArr: [
+        {
+          axis:1,
+          axisName: '左轴',
+          value: '50至100',
+          lineWidth: 1,
+          dashStyle: 'Solid',
+          color: '',
+          text: '',
+          textPostion: 'top',
+          textColor: '',
+          textFontSize: 12
+        }
+      ],
+      chartInstruction:{
+        text: '图表说明的货物带回去无地黄丸酒店',
+        color: '#f00',
+        fontSize: 12
+      } ,
+
+      /* 标识线区弹窗 */
+      isOpenMarkerDialog: false,
+      markerForm: {
+        markerType: 'line'
+      },
+
+      /* 图表说明弹窗 */
+      chartinductionDiaForm: {
+        show: false,
+        text: '图表说明的货物带回去无地黄丸酒店',
+        color: '#f00',
+        fontSize: 12
+      }
+    }
+  },
+  methods:{
+    /* 打开弹窗 */
+    openMarkerDiaHandle(markerType) {
+      this.isOpenMarkerDialog = true
+      this.markerForm = {
+        markerType,
+        title: `添加标识${markerType==='line'?'线':'区'}`
+      }
+    },
+
+    addChartInductionHandle() {
+      const { text,color,fontSize } = this.chartInstruction;
+      this.chartinductionDiaForm = {
+        show: true,
+        text,
+        color,
+        fontSize
+      }
+    },
+
+    initData() {
+
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+.chart-markers-section {
+  .section-item {
+    margin-top: 30px;
+    .marker-list {
+      margin-bottom: 15px;
+      border: 1px solid #DCDFE6;
+      background: #F0F2F5;
+      .marker-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 15px;
+      }
+    }
+    .icon {font-size: 16px;cursor: pointer;}
+    .el-icon-delete{
+      color: #f00;
+    }
+    .induction-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15px;
+      .text {
+        width: 160px;
+      }
+    }
+    .add-cont {
+      color: #409eff;
+      font-size: 16px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>

src/views/dataEntry_manage/css/chartfit.scss

@@ -267,6 +267,7 @@ $font-normal:14px;
 							font-size: 16px;
 							font-weight: normal;
 							text-align: center;
+							margin-bottom: 10px;
 						}
 						.chart-author {
 							font-size: 14px;

src/views/dataEntry_manage/editChart.vue

@@ -32,7 +32,7 @@
 					:model="chartInfo"
 					:rules="chartRules"
 				>
-					<el-form-item label="图表生成样式" prop="ChartType">
+					<el-form-item label="生成图表类型" prop="ChartType">
 						<el-select
 							v-model="chartInfo.ChartType"
 							placeholder="请选择生成样式"
@@ -48,6 +48,60 @@
 							</el-option>
 						</el-select>
 					</el-form-item>
+
+					<el-form-item label="图表主题" prop="Theme">
+						<el-select
+							v-model="chartInfo.Theme"
+							placeholder="请选择图表主题"
+							style="width: 90%"
+						>
+							<el-option
+								v-for="item in chartThemeArr"
+								:key="item.key"
+								:label="item.label"
+								:value="item.key"
+							>
+							</el-option>
+						</el-select>
+					</el-form-item>
+
+					<el-form-item label="">
+						<div class="search-cont" v-if="chartInfo.ChartType!==10">
+							<div>
+								<label>选择指标：</label>
+								<el-radio-group v-model="edbFromType">
+									<el-radio :label="0" style="margin-right: 15px">ETA指标</el-radio>
+									<el-radio :label="1">ETA预测指标</el-radio>
+								</el-radio-group>
+							</div>
+							<el-select
+								v-model="search_txt"
+								v-loadMore="searchLoad"
+								ref="searchRef"
+								:filterable="!search_txt"
+								remote
+								clearable
+								placeholder="指标ID/指标名称"
+								style="width:90%;margin-top: 10px;display: block;"
+								:remote-method="searchHandle"
+								@click.native="inputFocusHandle"
+								@change="selectTarget($event && searchOptions.find(_ => _.EdbInfoId === $event))"
+							>
+								<i slot="prefix" class="el-input__icon el-icon-search"></i>
+								<el-option
+									v-for="item in searchOptions"
+									:key="item.EdbInfoId"
+									:label="chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
+									:value="item.EdbInfoId"
+								>
+									<edbDetailPopover :info="item">
+										<div slot="reference">{{chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName }}</div>
+									</edbDetailPopover>
+								</el-option>
+							</el-select>
+						</div>
+					</el-form-item>
+
 					<el-form-item label="图表名称" prop="ChartName">
 						<el-input
 							v-model="chartInfo.ChartName"
@@ -91,41 +145,6 @@
 					</el-form-item>
 				</el-form>
 
-				<div class="search-cont" v-if="chartInfo.ChartType!==10">
-					<div>
-						<label>选择指标：</label>
-						<el-radio-group v-model="edbFromType">
-							<el-radio :label="0" style="margin-right: 15px">ETA指标</el-radio>
-							<el-radio :label="1">ETA预测指标</el-radio>
-						</el-radio-group>
-					</div>
-					<el-select
-						v-model="search_txt"
-						v-loadMore="searchLoad"
-						ref="searchRef"
-						:filterable="!search_txt"
-						remote
-						clearable
-						placeholder="指标ID/指标名称"
-						style="width:90%;margin-top: 10px;display: block;"
-						:remote-method="searchHandle"
-						@click.native="inputFocusHandle"
-						@change="selectTarget($event && searchOptions.find(_ => _.EdbInfoId === $event))"
-					>
-						<i slot="prefix" class="el-input__icon el-icon-search"></i>
-						<el-option
-							v-for="item in searchOptions"
-							:key="item.EdbInfoId"
-							:label="chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
-							:value="item.EdbInfoId"
-						>
-							<edbDetailPopover :info="item">
-								<div slot="reference">{{chart_lang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName }}</div>
-							</edbDetailPopover>
-						</el-option>
-					</el-select>
-				</div>
-
 				<div class="xaxis-range-cont" v-if="chartInfo.ChartType===2 && tableData && tableData.length>0">
 					<!-- 仅用于季节性图配置 -->
 					<div style="margin-bottom: 12px;" class="xaxis-range-tip">
@@ -901,7 +920,6 @@ export default {
 			overflow-y: auto;
 			.search-cont {
 				color: #606266;
-				margin-top: 10px;
 			}
 			.xaxis-range-cont{
 				color: #606266;

src/views/dataEntry_manage/mixins/addOreditMixin.js

@@ -12,7 +12,11 @@ export default {
 				ChartType: 1,
 				Source:1,
 				Unit: '',
-				ChartName: ''
+				ChartName: '',
+				Theme: '',
+				SourcesFrom: 'wind,ths',
+				SourcesFromDisabled: 1,
+				Instructions: '图标说明是的货物以带回去五个一给我倭寇的贫困我的卡我极为强劲的的我吉庆街得我'
 			},
 			chartRules: {
 				ChartType:[
@@ -65,6 +69,8 @@ export default {
 			isSpanYear:false,
 			isSpanYearDisable:false,
 			legendEditDiaShow:false,
+
+			chartThemeArr: []
 		}
 	},
 	computed: {
@@ -143,7 +149,7 @@ export default {
 			if(!item) return
 
 			/* 正常图获取指标数据 柱形图不获取 */
-			if(this.chartInfo.ChartType !== 7) {
+			if(this.chartInfo.ChartType === 7) return this.setBarEdbList(item);
 				// let params = this.sameOptionType.includes(this.chartInfo.ChartType) 
 				// 	? {
 				// 		EdbInfoId: item.EdbInfoId,
@@ -210,9 +216,6 @@ export default {
 							this.$message.warning('录入指标已存在');
 						}
 				})
-			}else {
-				this.setBarEdbList(item);
-			}
 
 		},
 

src/views/system_manage/chartTheme/common/config.js

@@ -0,0 +1,82 @@
+// 一些常量
+// import { defaultOpts,seasonOptions,scatterColorsOptions } from '@/utils/defaultOptions';
+//可选图表类型
+export const chartTypeOpts = [
+  { label: '曲线图', value: 1 },
+  { label: '季节性图', value: 2 },
+  { label: '堆积柱状图', value: 3 },
+  { label: '散点图', value: 4 },
+  { label: '柱形图', value: 5 },
+  { label: '截面散点图', value: 6 },
+  { label: '统计分析', value: 7 },
+  { label: '商品价格曲线', value: 8 },
+]
+
+//可选线条样式
+export const lineStylesOpts = [
+  { label: '',value: 'Solid' },
+  { label: '',value: 'LongDash' },
+  { label: '',value: 'ShortDash' },
+  { label: '',value: 'Dash' },
+  { label: '',value: 'Dot' },
+  { label: '',value: 'DashDot' },
+]
+
+//垂直位置 上中下
+export const verticalPositions = [
+  { label: '顶部',value: 'top' },
+  { label: '居中',value: 'middle' },
+  { label: '底部',value: 'bottom' },
+]
+
+
+/* 尽可能options字段和图表字段直接对应但又不可能完全对应 */
+/* 可配置options
+ */
+export const chartCanSetOptions = {
+    lineOptionsSet: {
+      colors: [],
+      dashStyle: 'line',
+      color: '',
+      lineWidth: 2,
+      isSpline: 1
+    },
+    legendOptionsSet: {
+      verticalAlign: 'top',
+      itemStyle: {
+        color: '#333',
+        fontSize: '12px',
+        cursor: "pointer",
+        fontWeight: "bold"
+      }
+    },
+    titleOptionsSet: {
+      align: 'center',
+      style: {
+        fontSize: '16px'
+      }
+    },
+    markerOptionsSet: {
+      color: '',
+      fontSize: 12
+    },
+    xAxisOptionsSet: {
+      labels: {
+        style: {
+          color: '#666',
+          fontSize: '11px'
+        }
+      }
+    },
+    yAxisOptionsSet: {
+      labels: {
+        style: {
+          color: '#666',
+          fontSize: '11px'
+        }
+      }
+    },
+    drawOptionSet: {
+      backgroundColor: 'transparent'
+    }
+}

src/views/system_manage/chartTheme/components/optionsSection.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <ul class="list in configOptions">
+      <li v-for="key in Object.keys(chartCanSetOptions)" :key="key">
+        <label>{{labelMap.get(key)}}</label>
+        
+        <!-- 图例设置 -->
+        <template v-if="key==='legendOptionsSet'">
+          <ul class="option-list">
+            <li class="option-item">
+              <label>位置</label>
+              <el-select v-model="chartCanSetOptions[key].verticalAlign">
+                <el-option 
+                  v-for="item in lengendPositions" 
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </li>
+          </ul>
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import { chartCanSetOptions,verticalPositions } from '../common/config'
+export default {
+  data() {
+    return {
+      chartCanSetOptions,
+      lengendPositions: verticalPositions.filter(_ => _.value!=='middle'),
+      labelMap: new Map([
+        ['lineOptionsSet','线条设置'],
+        ['legendOptionsSet','图例设置'],
+        ['titleOptionsSet','标题设置'],
+        ['markerOptionsSet','标记文字设置(来源，标识)'],
+        ['xAxisOptionsSet','横轴设置'],
+        ['yAxisOptionsSet','纵轴设置'],
+        ['drawOptionSet','绘图区设置'],
+      ]),
+      configOptions: []
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+
+  },
+}
+</script>
+<style scoped lang='scss'>
+
+</style>

src/views/system_manage/chartTheme/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="chartTheme-page">
+    <div class="header">
+      <div class="select-item">
+        <span style="margin-right: 20px;">主题设置</span>
+        <div class="select-item">
+          <label>图表类型</label>
+          <el-select v-model="formData.chartType" style="margin-left: 15px;">
+            <el-option
+              v-for="item in chartTypeOpts"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+      <div class="select-item">
+        <label>ETA图库默认主题</label>
+        <el-select v-model="formData.theme" style="margin-left: 10px;">
+          <el-option
+            v-for="item in themeOpts"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          />
+        </el-select>
+      </div>
+    </div>
+
+    <!-- 主题列表 -->
+    <div class="main">
+      <ul class="list-wrap">
+        <li 
+          v-for="(item,index) in themeOpts" 
+          :key="index" 
+          class="theme-item"
+        >  
+          <header class="item-top">
+            <label>{{item.label}}</label>
+            <div>
+              <el-button type="text" @click="editThemeHandle(item)">编辑</el-button>
+              <el-button type="text" class="deletesty" @click="delThemeHandle(index)" v-if="item.id!==0">删除</el-button>
+            </div>
+          </header>
+          <el-card>
+            <div slot="header" class="item-top">
+              <span class="text_oneLine">标题</span>
+            </div>
+            <img
+              :src="item.ChartImage"
+              alt=""
+              class="chart-img"
+            />
+          </el-card>
+        </li>
+        <li class="add-item" @click="addThemeHandle">
+            <el-button type="text" icon="el-icon-plus">添加自定义主题</el-button>
+        </li>
+      </ul>
+
+      <div class="bottom">
+        <el-button type="primary">保存</el-button>
+      </div>
+
+    </div>
+
+
+   <!-- 弹窗 -->
+    <m-dialog 
+      :title="`${addThemeForm.id?'编辑':'添加'}自定义主题`" 
+      :show.sync="isOpenThemeDia" 
+      width="650px"
+    >
+      <div style="padding:30px 60px">
+        <div>
+          <label class="el-form-item__label">主题名称</label>
+          <el-input 
+            v-model="addThemeForm.themeName" 
+            placeholder="请输入主题名称"
+          />
+        </div>
+      </div>
+      <div slot="footer" style="margin: 20px 0;">
+        <el-button
+        @click="isOpenThemeDia=false"
+        style="width: 132px; height: 40px"
+        >取消</el-button>
+        <el-button
+          @click="saveThemeHandle"
+          type="primary"
+          style="width: 132px; height: 40px"
+          >保存</el-button>
+      </div>
+    </m-dialog>
+
+  </div>
+</template>
+<script>
+import { chartTypeOpts } from "./common/config";
+import mDialog from '@/components/mDialog.vue';
+export default {
+  components: { mDialog },
+  data() {
+    return {
+      chartTypeOpts,
+      formData: {
+        chartType: chartTypeOpts[0].value,
+        theme: 0
+      },
+
+      themeOpts: [
+        { label: 'ETA主题',id: 0,ChartImage:'' },
+        { label: 'ETA主题1',id: 1,ChartImage:'' },
+        { label: 'ETA主题2',id: 2,ChartImage:'' },
+        { label: 'ETA主题3',id: 3,ChartImage:'' },
+        { label: 'ETA主题4',id: 4,ChartImage:'' },
+      ],
+
+      isOpenThemeDia: false,
+      addThemeForm: {
+        themeId: 0,
+        themeName: '',
+      }
+    };
+  },
+  mounted() {},
+  methods: {
+    // 添加主题
+    addThemeHandle() {
+      this.isOpenThemeDia = true;
+      this.addThemeForm= {
+        themeId: 0,
+        themeName: '',
+      }
+    },
+
+    async delThemeHandle(index) {
+      await this.$confirm('删除后，所有采用该主题的图表，将采用ETA主题，是否确定删除？',
+       '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+      })
+
+      this.themeOpts.splice(index,1)
+    },
+
+    editThemeHandle({id}) {
+      this.$router.push({
+        path: '/chartThemeSet',
+        query: {
+          type: this.formData.chartType,
+          id
+        }
+      })
+    },
+
+    saveThemeHandle() {
+      if(!this.addThemeForm.themeName) return this.$message.warning('主题名称不能为空')
+      
+      this.isOpenThemeDia = false;
+      this.themeOpts.push({
+        label: this.addThemeForm.themeName,id: new Date().getTime(),ChartImage:''
+      })
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+* {
+  box-sizing: border-box;
+}
+.chartTheme-page {
+  min-height: calc(100vh - 120px);
+  .select-item {
+    display: flex;
+    align-items: center;
+  }
+  .header,.main {
+    padding: 20px 30px;
+    background: #fff;
+    position: relative;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px;
+  }
+  .list-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 30px;
+    gap: 15px 30px;
+    .theme-item {
+      min-width: 260px;
+      position: relative;
+      .item-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 14px;
+      }
+      .chart-img {
+        width: 100%;
+        height: 230px;
+        object-fit: contain !important;
+        cursor: pointer;
+      }
+    }
+    .add-item {
+      background: #F5F7F9;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 260px;
+      height: 310px;
+      margin-top: 40px;
+      cursor: pointer;
+      .el-icon-plus {
+        font-size: 20px;
+      }
+    }
+  }
+  .bottom {
+    margin: 40px 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>
+<style lang="scss">
+.chartTheme-page {
+  .el-card__header {
+    padding: 10px 20px;
+  }
+}
+</style>

src/views/system_manage/chartTheme/themeSetting.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="themeSet-page">
+    <div class="header">
+      <div>
+        <el-select v-model="formData.chartType">
+          <el-option
+            v-for="item in chartTypeOpts"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+
+        <el-select v-model="formData.theme" style="margin-left: 10px;">
+          <el-option
+            v-for="item in themeOpts"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          />
+        </el-select>
+      </div>
+    </div> 
+    
+    <!-- 配置区 -->
+    <optionsSection/>
+  </div>
+</template>
+<script>
+import { chartTypeOpts } from "./common/config";
+import optionsSection from './components/optionsSection.vue'
+export default {
+  components: { optionsSection },
+  data() {
+    return {
+      formData: {
+        chartType: Number(this.$route.query.type),
+        theme: Number(this.$route.query.id)
+      },
+      chartTypeOpts,
+       themeOpts: [
+        { label: 'ETA主题',id: 0,ChartImage:'' },
+        { label: 'ETA主题1',id: 1,ChartImage:'' },
+        { label: 'ETA主题2',id: 2,ChartImage:'' },
+        { label: 'ETA主题3',id: 3,ChartImage:'' },
+        { label: 'ETA主题4',id: 4,ChartImage:'' },
+      ],
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+
+  },
+}
+</script>
+<style scoped lang='scss'>
+* {
+  box-sizing: border-box;
+}
+.themeSet-page {
+  min-height: calc(100vh - 120px);
+  padding: 20px 30px;
+  background: #fff;
+  position: relative;
+  border: 1px solid #ececec;
+  border-radius: 4px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+  .header,.main {
+    
+  }
+}
+</style>

src/views/system_manage/operateAuthManage.vue

@@ -418,6 +418,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/theme-vars.scss";
 .container {
   min-height: calc(100vh - 160px);
   padding: 20px 30px;
@@ -440,15 +441,15 @@ export default {
         min-width: 120px;
         padding: 12px 0;
         text-align: center;
-        color: #409EFF;
-        border: 1px solid #B3D8FF;
-        background: #ECF5FF;
+        color: $theme-color;
+        border: 1px solid $theme-color;
+        background: #e6eefb;
         border-radius: 4px;
         cursor: pointer;
         &.act {
           color: #fff;
-          border: 1px solid #409EFF;
-          background: #409EFF;
+          border: 1px solid $theme-color;
+          background: $theme-color;
         }
       }
     }