zhny-dsjdp.git - Gitblit

			@@ -13,7 +13,16 @@
			<i class="el-icon-back"></i> 返回
			</span>
			</div>
			<div class="title">{{currentDetails.farmName}}</div>
			<div class="title">
			<el-select class="equipment-plot-select" v-model="plotName" placeholder="选择地块">
			<el-option
			v-for="(item, index) in plotList"
			:key="index"
			:label="item.name"
			:value="item.id"
			></el-option>
			</el-select>
			</div>
			</div>

			<div class="current-body">
			@@ -70,7 +79,7 @@
			<div class="bottom">
			<div class="l">
			<i class="el-icon-time"></i>
			<span class="old-btn">历史数据</span>
			<span class="old-btn" @click="historyData">历史数据</span>
			</div>

			<div class="r">48天前更新</div>
			@@ -82,9 +91,15 @@
			</div>
			</div>

			<div class="echarts-box">
			<div class="echarts-box" v-show="echartsBosShow">
			<div class="box">
			<img class="close" src="/img/icon/echarts-close.png" alt />
			<img
			@click="echartsBosShow = false"
			class="close"
			src="/img/icon/echarts-close.png"
			alt
			/>
			<div id="EchartsBox"></div>
			</div>
			</div>
			</div>
			@@ -95,7 +110,22 @@
			export default {
			data () {
			return {
			currentDetails: {}
			plotName: '非凡渔业专业合作社',
			plotList: [{
			name: '1号',
			id: 1
			}, {
			name: '2号',
			id: 2
			}, {
			name: '3号',
			id: 3
			}, {
			name: '4号',
			id: 4
			}],
			currentDetails: {},
			echartsBosShow: false
			}
			},
			created () {
			@@ -105,8 +135,137 @@

			},
			methods: {
			prev () {
			this.$router.go(-1)
			},

			getParams () {
			this.currentDetails = this.$route.query
			},

			initLine (dom, yName, x, y) {
			const that = this
			const chartDom = document.getElementById(dom)
			const myChart = this.$echarts.init(chartDom)

			const option = {
			tooltip: {},
			grid: {
			top: '30px',
			left: '28px',
			right: '28px',
			bottom: '0px',
			containLabel: true
			},
			xAxis: [
			{

			type: 'category',
			boundaryGap: false,
			axisLine: {
			show: true,
			lineStyle: {
			color: '#697B89'
			}
			},
			axisLabel: {
			// 坐标轴刻度标签的相关设置
			lineHeight: 18,
			textStyle: {
			color: '#A9D1D7',
			margin: 8
			},
			formatter: function (value) {
			var ret = ''// 拼接加\n返回的类目项
			var maxLength = 5// 每项显示文字个数
			value = value.replace(/\s*/g, '')
			var valLength = value.length// X轴类目项的文字个数

			var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
			// 如果类目项的文字大于5,
			if (rowN > 1) {
			for (var i = 0; i < rowN; i++) {
			var temp = ''// 每次截取的字符串
			var start = i * maxLength// 开始截取的位置
			var end = start + maxLength// 结束截取的位置
			// 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
			temp = value.substring(start, end) + '\n'
			ret += temp // 凭借最终的字符串
			}
			return ret
			} else {
			return value
			}
			}
			},
			axisTick: { show: false },
			data: x
			}
			],
			yAxis: [
			{
			name: yName,
			nameTextStyle: {
			color: '#A9D1D7'
			},
			type: 'value',
			min: 0,
			splitLine: {
			show: false
			},
			axisLine: {
			show: true,
			lineStyle: {
			color: '#697B89'
			}
			},
			axisLabel: {
			margin: 8,
			textStyle: {
			color: '#A9D1D7'
			}
			},
			axisTick: { show: false }
			}
			],
			series: [
			{
			type: 'line',
			smooth: true, // 是否平滑曲线显示
			symbolSize: 0,
			lineStyle: {
			normal: {
			color: '#5ABF78' // 线条颜色
			}
			},
			areaStyle: {
			// 区域填充样式
			normal: {
			// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
			color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: 'rgba(90, 191, 120, 0.5000)'
			}, {
			offset: 1,
			color: 'rgba(90, 191, 120, 0)'
			}]),

			shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
			shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
			}
			},
			data: y
			}
			]
			}

			option && myChart.setOption(option)
			},

			historyData () {
			this.initLine('EchartsBox', '单位：℃', ['03-14 16:00', '03-15 16:00', '03-16 16:00', '03-17 16:00', '03-18 16:00', '03-19 16:00'], [20, 24, 23, 25, 30, 18])

			this.echartsBosShow = true
			}
			}
			}
			@@ -153,13 +312,16 @@
			}

			.title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 200px;
			width: calc(100% - 200px);
			font-size: 28px;
			font-weight: bold;
			color: #08f4ff;
			@@ -392,6 +554,13 @@
			top: 20px;
			right: 20px;
			width: 28px;
			cursor: pointer;
			}

			#EchartsBox {
			margin-top: 48px;
			width: 914px;
			height: 280px;
			}
			}
			}

	src/styles/element-ui.scss	24 ●●●●● patch \| view \| raw \| blame \| history
	src/views/equipment/index.vue	181 ●●●●● patch \| view \| raw \| blame \| history

			@@ -38,4 +38,28 @@
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 99;
			}

			.equipment-plot-select {

			.el-input {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.el-input__suffix {
			display: flex;
			align-items: center;
			justify-content: center;
			}
			}

			input {
			color: rgba(255, 255, 255, 1);
			font-size: 28px !important;
			font-weight: bold;
			background: transparent !important;
			border: none !important;
			}
			}