eta_front/src/views/dataEntry_manage/addChart.vue

<template>
  <div class="addchart-container" 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">
        <el-button 
					type="primary" 
					@click="saveHandle"
					:disabled="chartInfo.ChartType === 5 && tableData.length !== 2"
				>保存</el-button>
        <el-button type="primary" plain @click="$router.back()">取消</el-button>
      </div>
			<div class="left-min">
				<el-form
					ref="diaForm"
					label-position="top"
					label-width="80px"
					:model="chartInfo"
					:rules="chartRules"
				>
					<el-form-item label="图表生成样式" prop="ChartType">
						<el-select
							v-model="chartInfo.ChartType"
							placeholder="请选择生成样式"
							style="width: 90%"
						>
							<el-option
								v-for="item in styleArr"
								:key="item.key"
								:label="item.label"
								:value="item.key"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="图表名称" prop="ChartName">
						<el-input
							v-model="chartInfo.ChartName"
							style="width: 90%"
							placeholder="必填项"
							clearable
						/>
					</el-form-item>
					<el-form-item label="图表分类" prop="classify">
						<el-cascader
							v-model="chartInfo.classify"
							:options="classifyOptions"
							:props="levelProps"
							style="width: 90%"
							placeholder="请选择所属分类"
						/>
					</el-form-item>
					<el-form-item label="图表单位" prop="Unit" v-if="chartInfo.ChartType===7">
						<el-input
							v-model="chartInfo.Unit"
							style="width: 90%"
							placeholder="请输入图表单位"
							clearable
							@change="changeUnit"
						/>
					</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">
						横坐标显示范围 
						<el-tooltip>
							<div slot="content">
								<p class="hint-message">配置横坐标显示的时间刻度</p>
								<p class="hint-message">1、若开始日期小于结束日期，则默认不跨年，允许勾选跨年</p>
								<p class="hint-message">2、若开始日期大于等于结束日期，则跨年，不允许取消勾选</p>
							</div>
							<img src="~@/assets/img/icons/question_mark_black.png" style="height: 16px;cursor: pointer;margin-left: 6px;" />
						</el-tooltip>
					</div>
					<el-date-picker
						style="width: 45%;"
						v-model="SeasonExtraConfig.XStartDate"
						value-format="MM-dd"
						popper-class="x-range-picker-date"
						format="MM-dd"
						placeholder="开始日期"
						@change="xAxisChange"
						:clearable="false"
					></el-date-picker>
					<el-date-picker
						style="width: 45%;"
						v-model="SeasonExtraConfig.XEndDate"
						value-format="MM-dd"
						popper-class="x-range-picker-date"
						format="MM-dd"
						placeholder="结束日期"
						@change="xAxisChange"
						:clearable="false"
					></el-date-picker>
					<!-- <el-date-picker
						style="width: 90%;"
						v-model="xAxisRange"
						type="daterange"
						value-format="MM-dd"
						format="MM-dd"
						popper-class="x-range-picker-date"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						@change="xAxisRangeChange"
						:clearable="false"
						></el-date-picker> -->
					<el-checkbox label="跨年" v-model="isSpanYear" :disabled="isSpanYearDisable"
					style="margin-top: 12px;" @change="changeIsSpanYear"></el-checkbox>
					<div class="legend-set-text" @click="openLegendEditDia">
						<span>图例名称设置</span>
						<img src="~@/assets/img/icons/edit-blue.png" />
					</div>
				</div>

				<div class="targetset-cont">
					<!-- 仅用于散点图配置 -->
					<div class="scatter-setting" v-if="chartInfo.ChartType === 5 && tableData.length">
						<div style="display: flex;margin-right: 15px;">
							<span style="margin-right: 3px">线条颜色：</span>
							<el-color-picker
								v-model="tableData[0].ChartColor"
								size="mini"
								show-alpha
								:predefine="predefineColors"
							></el-color-picker>
						</div>
						<el-checkbox v-model="tableData[0].IsOrder">逆序</el-checkbox>
					</div>
					
          <el-collapse v-model="activeNames" class="target-list" v-if="tableData.length&&![7,10].includes(chartInfo.ChartType)">
            <el-collapse-item v-for="(item,index) in tableData" :key="item.EdbInfoId" :disabled="[2,5].includes(chartInfo.ChartType)">
              <template slot="title">
                <span class="text_oneLine">{{item.EdbName}}</span>
								<i class="el-icon-delete del-icon" @click.stop="delTarget(item)"></i>
              </template>
              <ul class="setting-cont" v-if="sameOptionType.includes(chartInfo.ChartType)">

								<!-- 堆叠图 或组合图中的堆叠类型 非第一项隐藏配置 -->
								<template v-if="showYOptionsHandle(item,index)">
									<li>
										<el-checkbox v-model="item.IsOrder">逆序</el-checkbox>
									</li>
									<li>
										<el-radio-group v-model="item.IsAxis" size="mini">
											<el-radio-button :label="1">左轴</el-radio-button>
											<el-radio-button :label="0">右轴</el-radio-button>

											<!-- 指标有右轴时才可以选右2轴 不然没有右2这个概念的意义 -->
											<el-radio-button 
												v-if="[1,6].includes(chartInfo.ChartType)"
												:label="2" 
												:disabled="(tableData.findIndex(_ => _.IsAxis===0) === -1) 
												|| (tableData.findIndex(_ => _.IsAxis===0) === index 
														&& tableData.filter(_ => _.IsAxis===0).length === 1)"
											>右2轴</el-radio-button>
										</el-radio-group>
									</li>
								</template>
                <li style="min-width: 250px">
                  <el-radio
                    v-model="item.EdbInfoType"
                    :label="1"
                    @change="getPreviewSplineInfo"
                    >标准指标</el-radio
                  >
                  <div style="margin-top: 15px">
                    <el-radio
                      v-model="item.EdbInfoType"
                      :label="0"
                      style="margin-right: 10px"
                      @change="getPreviewSplineInfo"
                      >领先指标</el-radio
                    >
                    <template v-if="item.EdbInfoType === 0">
                      领先
                      <el-input
                        style="width: 60px"
                        size="mini"
                        type="number"
												min="0"
                        v-model="item.LeadValue"
                        @change="getPreviewSplineInfo"
                        @keyup.native="filterCode(item)"
                      ></el-input>
                      <el-select
                        v-model="item.LeadUnit"
                        placeholder=""
                        style="width: 60px"
                        size="mini"
                        @change="getPreviewSplineInfo"
                      >
                        <el-option
                          v-for="item in fre_options"
                          :key="item"
                          :label="item"
                          :value="item"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </div>
                </li>
                <li>
                  <div style="display: flex">
                    <span style="margin-right: 3px">线条颜色：</span>
                    <el-color-picker
                      v-model="item.ChartColor"
                      size="mini"
											show-alpha
                      :predefine="predefineColors"
                    ></el-color-picker>
                  </div>
									<div style="display: flex;margin-top: 12px" v-if="item.EdbInfoCategoryType === 1">
                    <span style="margin-right: 3px">预测值颜色：</span>
                    <el-color-picker
                      v-model="item.PredictChartColor"
                      size="mini"
											show-alpha
                      :predefine="predefineColors"
                    ></el-color-picker>
                  </div>
                  <div 
										style="margin-top: 12px" 
										v-if="chartInfo.ChartType === 1 
										|| (chartInfo.ChartType === 6 &&item.ChartStyle==='spline')"
									>
                    线条粗细：
                    <el-input
                      style="width: 60px"
                      size="mini"
                      type="number"
                      :min="1"
                      v-model="item.ChartWidth"
                    />
                  </div>
                </li>
                <li v-if="chartInfo.ChartType === 6">
                  <div style="display: flex">
                    <span style="margin-right: 3px">生成样式：</span>
                    <el-select
											v-model="item.ChartStyle"
											placeholder="请选择生成样式"
											style="width: 50%"
											class="edb-item-style"
										>
											<el-option
												v-for="item in chartItemStyleArr"
												:key="item.key"
												:label="item.label"
												:value="item.value"
											>
											</el-option>
										</el-select>
                  </div>
                </li>
              </ul>
							<div style="margin: 10px;text-align: center;color: #999;" v-else>暂无配置</div>
            </el-collapse-item>
          </el-collapse>

					<!-- 奇怪柱状图配置 -->
					<bar-option
						v-if="chartInfo.ChartType===7"
						ref="BarOptRef"
						:edblist="tableData"
						:datedata="barDateList"
						@getData="getBarPreviewData"
					/>

					<!-- 截面散点图 -->
					<sectional-scatter-option
						v-if="chartInfo.ChartType===10"
						ref="SectionScatterOptRef"
						@getData="getSectionScatterData"
					/>
        </div>
			</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" v-if="tableData.length">
				<div class="cont-top">
					<div class="top-left">
						<!-- 默认曲线图 -->
						<template v-if="sameOptionType.includes(chartInfo.ChartType)">
							<el-button
								type="primary"
								v-for="item in yearSelector"
								:key="item.value"
								size="medium"
								:plain="item.value !== year_select"
								class="year-btn"
								@click.native="changeYear(item)"
								>{{ item.name }}</el-button
							>
							<el-button type="text" class="btn-sty" @click="openDateDia">{{
								dateTip
							}}</el-button>
						</template>
						<!-- 季节性图选择年份区间 -->
						<!-- <date-picker
							v-else-if="chartInfo.ChartType === 2"
							v-model="season_year"
							type="month"
							value-type="format"
							range
							placeholder="年份日期选择"
							@change="seasonYearChange"
						/> -->
						<div v-else-if="chartInfo.ChartType === 2" @click="openDateDia" class="date-setting">
							{{ season_year && season_year.length>0 ? season_year[0]+'~'+season_year[1]:"年份日期选择" }}
						</div>
					</div>
				</div>
				<div class="cont-bottom">
					<div class="chart-show-cont" v-show="options.series">
						<div class="chartWrapper" id="chartWrapper">
							<h2 class="chart-title" v-show="chartInfo.ChartName">{{ chartInfo.ChartName }}</h2>
							<Chart :options="options" ref="chartRef" />
							<div class="range-cont left" v-if="leftIndex != -1">
								<el-input
									style="width: 60px; display: block"
									size="mini"
									type="number"
									placeholder="上限"
									v-model="tableData[leftIndex].MaxData"
								/>
								<el-input
									class="min-data-input"
									size="mini"
									type="number"
									placeholder="下限"
									v-model="tableData[leftIndex].MinData"
								/>
							</div>
							<div class="range-cont right" v-if="rightIndex != -1">
								<el-input
									style="width: 60px; display: block"
									size="mini"
									type="number"
									placeholder="上限"
									v-model="tableData[rightIndex].MaxData"
								/>
								<el-input
									class="min-data-input"
									size="mini"
									type="number"
									placeholder="下限"
									v-model="tableData[rightIndex].MinData"
								/>
							</div>
							<!-- 右2上下限设置 -->
							<div class="range-cont rightTwo" v-if="rightTwoIndex != -1">
								<el-input
									style="width: 60px; display: block"
									size="mini"
									type="number"
									placeholder="上限"
									v-model="tableData[rightTwoIndex].MaxData"
								/>
								<el-input
									class="min-data-input"
									size="mini"
									type="number"
									placeholder="下限"
									v-model="tableData[rightTwoIndex].MinData"
								/>
							</div>

							<!-- 后续新图专用上下限 和其他数据依赖不公用 柱形图 截面散点-->
							<template v-if="[7,10].includes(chartInfo.ChartType)">	
								<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" v-if="chartLimit.x_min||chartLimit.x_max">
									<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>
						<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"
						ref="tableRef"
						highlight-current-row
						border
					>
						<el-table-column
							v-for="item in tableColums"
							:key="item.label"
							:label="item.label"
							:width="item.widthsty"
							:min-width="item.minwidthsty"
							align="center"
						>
							<template slot-scope="scope">
								<div v-if="item.key === 'EdbName' && chartInfo.ChartType === 7">
									<!-- 奇怪柱状图用别名 -->
									<el-input 
										v-model="scope.row.EdbAliasName"
										placeholder="指标别名"
										class="target-other-name"
										clearable
									/>
								</div>
								<span v-else>{{ scope.row[item.key] }}</span>
							</template>
						</el-table-column>
						<el-table-column
							label="操作"
							key="Copy"
							align="center"
							width="140"
						>
							<template slot-scope="scope">
								<span @click="delTarget(scope.row)" class="deletesty">删除&nbsp;</span>
								<span v-permission="permissionBtn.chartLibPermission.chartLib_copyData"
									class="editsty" @click="copyCode(scope.row)">
									<i class="el-icon-document-copy" />&nbsp;复制数据</span
								><br>
								<span v-permission="permissionBtn.chartLibPermission.chartLib_viewData"
									class="editsty"
									@click="viewTarget(scope.row)"
								>查看数据</span>
							</template>
						</el-table-column>
						<div slot="empty">
							 <tableNoData text="暂无指标" size="mini"/>
						</div>
					</el-table>
				</div>
      </div>
			<div class="nodata" v-else>
				<tableNoData text="暂无信息"/>
			</div>
		</div>

		<!-- 日期端选择弹窗 -->
    <DateChooseDia
      :isDateDia="isDateDia"
      :dateForm="dateForm"
			:earliestDate="earliestDate"
      @cancel="isDateDia = false"
      @dateBack="dataChangeBack"
    />

		<!-- 季节性 图例设置 -->
		<LegendEditDia
      :isEditLegend="legendEditDiaShow"
			:legendList="SeasonExtraConfig.ChartLegend"
      @cancel="legendEditDiaShow = false"
      @saveLegend="saveLegend"
    />
  </div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import { chartSetMixin } from './mixins/chartPublic';
import addOrEditMixn from './mixins/addOreditMixin';
import Chart from './components/chart';
import DateChooseDia from './components/DateChooseDia';
import barOption from './components/barOptionSection.vue';
import sectionalScatterOption from './components/sectionalScatterOption.vue';
import LegendEditDia from './components/LegendEditDia.vue';
export default {
  components: { Chart,DateChooseDia,barOption,sectionalScatterOption,LegendEditDia},
	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;
      };
    },
  },
	watch: {
		tableData: {
      handler(newval, oldval) {
				if(newval.length) {
					if([7,10].includes(this.chartInfo.ChartType)) {
						// 奇怪柱形图
						this.chartInfo.ChartType === 7 && this.barDateList.length && this.$refs.BarOptRef.getBarData();
				
					}else {
						//拼接标题
						this.chartInfo.ChartName =  this.sameOptionType.includes(this.chartInfo.ChartType) ? newval.map((item,index) => index === newval.length-1 ? item.EdbName : `${item.EdbName}和`).join('') : `${newval[0].EdbName}季节性`;
	
						this.setAddChartDefault();
						this.setChartOptionHandle(newval);
					}
					
					// 设置起始日期和最新日期
					this.setExtremumDate()

				}else {
					this.chartInfo.ChartName = '';
				}
      },
      deep: true,
    }
	},
	computed: {
		roleName() {
			return localStorage.getItem('userName');
		}
	},
	mixins: [chartSetMixin,addOrEditMixn],
  data() {
    return {
			isSlideLeft: false,
			search_txt: '',

			calendar_type: '公历',//默认公历
			season_year:'',//季节图时间段
			activeNames:'',

			needWatch: true

    };
  },
  methods: {
		/* 保存 */
		saveHandle() {
			if(!this.tableData.length) return this.$message.warning('暂未选择指标');
			console.log(this.chartInfo)
			this.$refs.diaForm.validate((valid) => {
				if(valid) {
					// 季节图只允许添加一个指标
					if(this.chartInfo.ChartType === 2 && this.tableData.length > 1) return this.$message.warning('您选择的图表样式为季节性图表，只支持单指标画图');

					if(this.chartInfo.ChartType === 7 && !this.$refs.BarOptRef.dateList.length)  return this.$message.warning('请添加日期');

					if(this.chartInfo.ChartType === 10 && !this.$refs.SectionScatterOptRef.seriesArr[0].edbs)  return this.$message.warning('请添加系列指标');

					if(this.chartInfo.ChartType === 2){
						if(!(this.SeasonExtraConfig.XStartDate && this.SeasonExtraConfig.XEndDate)){
							return this.$message.warning('横坐标显示范围不能为空');
						}
					}
					
					let db_arr = this.tableData.map(item => ({
							ChartColor: item.ChartColor,
							PredictChartColor: item.PredictChartColor,
							ChartStyle: item.ChartStyle,
							ChartWidth: Number(item.ChartWidth),
							EdbInfoId: item.EdbInfoId,
							EdbInfoType: item.EdbInfoType,
							IsAxis: item.IsAxis,
							IsOrder: item.IsOrder,
							LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
							LeadValue: item.EdbInfoType ? 0 : Number(item.LeadValue),
							MaxData: Number(item.MaxData),
							MinData: Number(item.MinData)
						})
					)

					let public_param = {
						ChartClassifyId: this.chartInfo.classify.length ? this.chartInfo.classify[this.chartInfo.classify.length - 1] : 0,
						ChartName: this.chartInfo.ChartName,
						ChartType: this.chartInfo.ChartType,
						ChartEdbInfoList: db_arr,
					}

					//提交参数
					const typePrams = this.getSaveParamsByChartType(public_param);

					let params = this.sameOptionType.includes(this.chartInfo.ChartType) 
						? {
								...public_param,
								DateType: this.year_select,
								StartYear: this.count_year || 0,
								StartDate:
										[5,6].includes(this.year_select)
											? this.select_date[0]
											: '',
								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);
					})
				}
			})
		},

		 /* 设置图表封面图片 */
    setChartImage(data) {
      let svg = this.$refs.chartRef.chart.getSVG({
        chart: {
          width: 340,
          height: 230,
        }
      });
      let form = new FormData();
      form.append('Img', svg);
      this.setImageHandle(form,data);
    },
    async setImageHandle(form,{ UniqueCode,ChartInfoId }) {
      let { Data } = await dataBaseInterface.uploadImgSvg(form);
      // let { Data } = await dataBaseInterface.uploadImg(form);
      await dataBaseInterface.setChartImage({
        ChartInfoId: ChartInfoId,
        ImageUrl: Data.ResourceUrl,
      });

			this.$message.success('添加成功');
			this.$router.replace({
				path: '/chartsetting',
				query: {
					code: UniqueCode,
					id: ChartInfoId
				}
			})

    },
	},
  mounted() {
		this.getMenu();
		window.addEventListener('resize', this.reloadRightWid);
	},
	destroyed() {
		window.removeEventListener('resize', this.reloadRightWid);
	}
};
</script>
<style lang="scss">
.addchart-container {
	$font-small: 12px; $font-normal: 14px;

  display: flex;
	*{ box-sizing: border-box; }
	.el-form--label-top .el-form-item__label {
		padding: 0;
	}
	.el-form-item {
		margin-bottom: 8px;
	}
	.el-input-number .el-input__inner {
		padding: 0 34px 0 4px;
	}
	.target-other-name .el-input__inner {
		padding: 0 30px 0 5px !important;
		height: 40px !important;
		line-height: 40px !important;
	}
	.el-color-picker--mini .el-color-picker__trigger {
		width: 60px;
		height: 25px;
		padding: 0;
	}
	.el-color-picker--mini .el-color-picker__mask {
		width: 60px;
		height: 25px;
	}

	.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: 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 - 113px);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    .left-top {
      padding: 15px 20px;
      border: 1px solid #ececec;
      box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
    }
		.left-min {
			padding: 30px 20px;
			max-height: calc(100vh - 194px);
			overflow-y: auto;
			.search-cont {
				color: #606266;
				margin-top: 20px;
			}
			.xaxis-range-cont{
				color: #606266;
				margin-top: 20px;
				.xaxis-range-tip{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.hint-message{
						font-size: 15px;
						line-height: 22px;
					}
				}
				.legend-set-text{
					font-size: 15px;
					color: #1B7BDE;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-top: 20px;
					cursor: pointer;
					img{
						height: 16px;
						margin-left: 5px;
					}
				}
			}
			.targetset-cont {
				padding: 30px 0 20px;
				.el-input__inner {
					height: 27px;
					line-height: 27px;
					padding: 0 4px;
				}
				.el-collapse-item.is-disabled .el-collapse-item__header {
					color: #333;
				}
				.target-list {
					border: 1px solid #DCDFE6;
					.del-icon {
						position: absolute;
						right: 10px;
						font-size: 16px;
						color: #f00;
						cursor: pointer;
					}
					.setting-cont {
						padding: 20px 20px 0;
						li {
							padding-bottom: 20px;
							margin-bottom: 20px;
							border-bottom: 1px solid #DCDFE6;
							&:last-child {
								padding-bottom: 0;
								margin-bottom: 0;
								border-bottom: none;
							}
						}
					}
				}
				.el-collapse-item__header {
					background-color: #F0F2F5;
					margin-bottom: 0;
					border-bottom: 1px solid #DCDFE6;
					padding: 0 30px;
					.el-collapse-item__arrow {
						position: absolute;
						left: 8px;
					}
				}

				.scatter-setting {
					display: flex;
					margin-bottom: 20px;
				}
			}
		}
		.move-btn {
			height: 100%;
			width: 4px;
			position: absolute;
			right: 0px;
			top: 0;
			&:hover {
				cursor: col-resize;
			}
		}
  }
	.right-cont {
		width: 80%;
    .mx-datepicker {
      width: 220px !important;
    }
		 /* =================== */
		.chart-min-cont {
			background: #fff;
			border: 1px solid #ececec;
			height: calc(100vh - 118px);
			overflow: auto;
			/* overflow: hidden; */
			border-radius: 4px;
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
			.cont-top {
				padding: 12px 30px;
				border-bottom: 1px solid #ececec;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
				.top-left {
					.year-btn {
						margin-right: 5px;
						margin-bottom: 5px;
					}
					.btn-sty {
						border: 1px solid #409eff;
					}
					.date-setting{
						border: 1px solid #DCDFE6;
						border-radius: 4px;
						cursor: pointer;
						color: #333333;
						line-height: 16px;
					}
				}
				.top-right {
					font-size: 16px;
					.join_txt {
						color: #409eff;
						cursor: pointer;
						&:hover {
							text-decoration: underline;
						}
					}
					.collected {
						color: #f00;
						cursor: pointer;
						&:hover {
							text-decoration: underline;
						}
					}
					.span-item {
						color: #409eff;
						cursor: pointer;
						&:hover {
							text-decoration: underline;
						}
						.el-icon-collection,
						.el-icon-document-copy {
							color: #409eff;
						}
					}
				}
			}
			.cont-bottom {
				padding: 20px 30px;
				/* height: calc(100vh - 250px);
				overflow: auto; */
				.el-input__inner {
					height: 27px;
					line-height: 27px;
					padding: 0 4px;
				}
				.el-input-number .el-input__inner {
					padding: 0 34px 0 4px;
				}
				.highcharts-range-selector-group {
					display: none;
					.highcharts-input-group {
						display: none;
					}
				}
				.highcharts-axis-title {
					display: block;
				}
				.calendar-cont {
					display: block;
					margin: 10px auto 0;
					text-align: center;
				}
				/* =================== */
				.chart-show-cont {
					min-height: 300px;
					padding: 0 150px 60px 120px;
					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;
					}
					.chartWrapper {
						position: relative;
						.range-cont {
							position: absolute;
							top: 15%;
							.min-data-input {
								width: 60px;
								display: block;
							}
							&.left {
								left: -80px;
							}
							&.right {
								right: -65px;
							}
							&.rightTwo {
								right: -130px;
							}
							&.bottom {
								width: 100%;
								display: flex;
								justify-content: space-between;
								top: auto;
								right: 0;
								bottom: -3%;
								.left {
									width: 60px;
									display: block;
									flex-shrink: 0;
								}
							}
						}
					}
				}
				.options-cont {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}
			}

		}
    .nodata {
      height: calc(100vh - 120px);
			background-color: #fff;
      text-align: center;
      font-size: 16px;
      color: #666;
			padding: 100px 0;
    }
		@media screen and (min-width: 1711px){
			.min-data-input {
				margin-top: 310px;
			}
			.btn-sty {
				padding: 10px;
			}
			.year-btn,.btn-sty {
				font-size: $font-normal;
			}
			.date-setting{
				width: 210px;
				height: 40px;
				padding: 12px;
				font-size: $font-normal;
			}
		}

		@media screen and (max-width: 1710px){
			.min-data-input {
				margin-top: 230px;
			}
			.year-btn {
				font-size: $font-small;
				margin-left: 5px;
				margin-right: 5px;
				margin-bottom: 5px;
				padding: 6px 12px;
			}
			.btn-sty {
				font-size: $font-small;
				margin-left: 5px;
				padding: 6px;
				border: 1px solid #409eff;
			}
			.date-setting{
				width: 180px;
				height: 36px;
				padding: 10px;
				font-size: $font-small;
			}
		}
	}
}
</style>
<style lang="scss">
.edb-item-style .el-input__icon {
	line-height: 27px;
}
/*他不要下拉选择框 QAQ */
.x-range-picker-date {
	display: none;
}
</style>