From d8f42b4615121e2607f7f7e2ba2e93194cefd965 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 16 Jul 2022 10:20:41 +0800
Subject: [PATCH] 设备
---
src/views/equipment/index.vue | 181 +++++++++++++++++++++++++++++++++++++++++++-
src/styles/element-ui.scss | 24 ++++++
2 files changed, 199 insertions(+), 6 deletions(-)
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index a5febae..05abcc4 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/src/views/equipment/index.vue b/src/views/equipment/index.vue
index 91cfd60..01e4647 100644
--- a/src/views/equipment/index.vue
+++ b/src/views/equipment/index.vue
@@ -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;
}
}
}
--
Gitblit v1.9.3