添加土壤数据弹窗50%
This commit is contained in:
wgx
parent
2d9d8499a0
commit
0496c8057d
|
|
@ -80,7 +80,7 @@ export function login(data) {
|
|||
// 土壤数据
|
||||
export function getSoilSummry(data) {
|
||||
return requests({
|
||||
url: '/zh-applet-admin/appmana/statistic/airSoilIntegrate',
|
||||
url: '/zh-applet-admin/appmana/bigScreen/timesIntegrate',
|
||||
method: 'post',
|
||||
headers: { 'content-type': 'application/json; charset=UTF-8' },
|
||||
data: data? data : {}
|
||||
|
|
|
|||
|
|
@ -890,4 +890,11 @@
|
|||
left: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.tableRowClassName{
|
||||
background-color: #000a21 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0 !important; /* 隐藏滚动条 */
|
||||
}
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
<template>
|
||||
<!-- 土壤弹窗 -->
|
||||
<el-dialog
|
||||
width="45%"
|
||||
top="160px"
|
||||
width="75%"
|
||||
top="130px"
|
||||
:modal-append-to-body="false"
|
||||
:destroy-on-close="true"
|
||||
:visible.sync="trzddialogTableVisible"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<div class="xintc">
|
||||
<div class="tz_cov_chanye" style="height: 670px">
|
||||
<div class="tz_cov_chanye" style="height: 770px">
|
||||
<img
|
||||
src="@/assets/image/zhwl/guanbi.png"
|
||||
class="guanbiann"
|
||||
|
|
@ -19,30 +20,27 @@
|
|||
<span class="tz_cov_top_tit">土壤环境监测</span>
|
||||
</div>
|
||||
<el-row class="tz_cov_topyqjs">
|
||||
<el-col :span="10">
|
||||
<el-col :span="9">
|
||||
<div class="grid-content bg-purple ycboxlt4">
|
||||
<span class="tcxitit">实时监测信息</span>
|
||||
<div class="qxsjssjcTc" @click.stop="trzxshow($event)">
|
||||
<div class="qxsjssjc_left" style="margin-top:20px;">
|
||||
<el-col :span="24" class="tcgd2" style="padding: 0px" v-for="(item, index) in airDataListHome1"
|
||||
:key="index" :data-item="JSON.stringify(item)">
|
||||
<div class="jcsjtclist" style="overflow: hidden">
|
||||
<div class="qxsjssjcTc" >
|
||||
<div class="qxsjssjc_left">
|
||||
<el-col :span="24" :class="`showTitle ${index > 7?'showTitle2':''}`" style="padding: 0px;width: 146px;"
|
||||
v-for="(item, index) in tableHead" :key="index" :data-item="JSON.stringify(item)">
|
||||
<div class="jcsjtclist" style="overflow: hidden" @click="switchData(item)">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10">
|
||||
<img :src="urlimg+item.bsIcon" alt="" class="jcsjicon1"/>
|
||||
<el-col :span="7">
|
||||
<img :src="urlimg2+item.bsIcon" alt="" class="jcsjicon1"/>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-col :span="17">
|
||||
<span class="jcsjicon1_tit">{{ item.name }} </span>
|
||||
<button type="button" @click="startAnimate()" style="display: none"></button>
|
||||
<span class="jcsjicon1_num"
|
||||
v-if="item.value == '0' || item.value == '0.0'|| item.value == undefined">
|
||||
<span>0</span>
|
||||
<span class="jcsjicon1_dan">{{ item.unit }}</span>
|
||||
</span>
|
||||
<span class="jcsjicon1_num" v-else>
|
||||
<animate-number style="display:none;" ref="myNum1" from="0" :to="item.value"
|
||||
:key="item.value" duration="3000"></animate-number>
|
||||
<span>{{ item.value }}</span>
|
||||
<span class="jcsjicon1_num" >
|
||||
<span v-if="item.value == undefined || item.value == '0' || item.value == '0.0' ">0</span>
|
||||
<span v-else>
|
||||
<animate-number :ref="`animateNumber$index`" from="0" :to="item.value"
|
||||
:key="item.deployId" duration="3000"></animate-number>
|
||||
</span>
|
||||
<span class="jcsjicon1_dan">{{ item.unit }}</span>
|
||||
</span>
|
||||
</el-col>
|
||||
|
|
@ -50,85 +48,49 @@
|
|||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
|
||||
<div class="qxjcimg2">
|
||||
<img src="@/assets/image/zhwl/tcditr.png" class="tctrimg" alt="">
|
||||
<video width="720" height="376" autoplay="autoplay" muted="muted" loop="loop" class="tcdzimg">
|
||||
<video width="620" height="376" autoplay="autoplay" muted="muted" loop="loop" class="tcdzimg" >
|
||||
<source src="@/assets/image/zhwl/tcdidizuo.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
<div class="qxsjssjc_right" style="margin-top:20px;">
|
||||
<el-col :span="24" class="tcgd2" style="padding: 0px" v-for="(item, index) in airDataListHome2"
|
||||
:key="index" :data-item="JSON.stringify(item)">
|
||||
<div class="jcsjtclist" style="overflow: hidden">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10">
|
||||
<img :src="urlimg+item.bsIcon" alt="" class="jcsjicon1"/>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<span class="jcsjicon1_tit">{{ item.name }} </span>
|
||||
<button type="button" @click="startAnimate()" style="display: none"></button>
|
||||
<span class="jcsjicon1_num"
|
||||
v-if="item.value == '0' || item.value == '0.0'|| item.value == undefined">
|
||||
<span>0</span>
|
||||
<span class="jcsjicon1_dan">{{ item.unit }}</span>
|
||||
</span>
|
||||
<span class="jcsjicon1_num" v-else>
|
||||
<animate-number style="display:none;" ref="myNum1" from="0" :to="item.value"
|
||||
:key="item.value" duration="3000"></animate-number>
|
||||
<span>{{ item.value }}</span>
|
||||
<span class="jcsjicon1_dan">{{ item.unit }}</span>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-col :span="15">
|
||||
<span class="tcxitit">土壤环境监测历史记录</span>
|
||||
<div class="bianqianlist">
|
||||
<div :class="time==1?'xiaoshiHover':'xiaoshi'" @click="timeqieh('xiao')">小时</div>
|
||||
<div :class="time==2?'xiaoshiHover':'xiaoshi'" @click="timeqieh('ri')">日均</div>
|
||||
<div :class="time==3?'xiaoshiHover':'xiaoshi'" @click="timeqieh('yue')">月均</div>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
class="custom-date-picker"
|
||||
type="date"
|
||||
size="small"
|
||||
@blur="timetrpicker"
|
||||
style="float:left;margin-left:10px;"
|
||||
placeholder="选择日期">
|
||||
<el-radio-group v-model="postParam.summrayMode" @input="formParamChange(1)" size="small" fill="#1783C6">
|
||||
<el-radio-button label="dayhours">小时</el-radio-button>
|
||||
<el-radio-button label="monthDays">日均</el-radio-button>
|
||||
<el-radio-button label="yearMonth">月均</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker v-model="formParam.date" class="custom-date-picker" style="margin-left: 20px; width: 130px;" size="small"
|
||||
:type="postParam.summrayMode=='dayhours'?'date':postParam.summrayMode=='monthDays'?'month':'year'"
|
||||
:format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
|
||||
:value-format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
|
||||
@change="formParamChange" placeholder="选择日期"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
<div class="xiaoshiHover" @click="tanchuangshuj">查询</div>
|
||||
<!-- <div class="xiaoshiHover" @click="formParamChange">查询</div>-->
|
||||
<div class="zsfsList">
|
||||
展示方式：
|
||||
<el-radio-group v-model="radio1" @input="numtab" size="small" fill="#1783C6">
|
||||
<el-radio-button label="折线"></el-radio-button>
|
||||
<el-radio-button label="表格"></el-radio-button>
|
||||
<span>展示方式：</span>
|
||||
<el-radio-group v-model="echartOrTable" size="small" fill="#1783C6">
|
||||
<el-radio-button label="1">折线</el-radio-button>
|
||||
<el-radio-button label="0">表格</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="columnTrEchart" v-if="tabnum==true" style="width: 100%; height: 480px;"></div>
|
||||
<el-table
|
||||
v-else
|
||||
:data="formListVlaue"
|
||||
height="480"
|
||||
border
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="时间"
|
||||
width="360">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="'数值单位：' + unitValue">
|
||||
<div id="columnTrEchart" v-show="(echartOrTable=='1')" style="width: 100%; height: 480px;"></div>
|
||||
<el-table v-if="allData" v-show="!(echartOrTable=='1')" :data="allData.tableData" default-sort="{ prop: 'dates', order: 'descending' }"
|
||||
row-class-name="tableRowClassName" cell-class-name="tableRowClassName" header-row-class-name="tableRowClassName" header-cell-class-name="tableRowClassName"
|
||||
height="580" border size="mini">
|
||||
<el-table-column :prop="`dates`" label="日期" width="92" ></el-table-column>
|
||||
<el-table-column :prop="item2.survItem" :label="item2.name+'('+item2.unit+')'" v-for="(item2, index2) in allData.realTimeData"
|
||||
:key="item2.name">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="loader" v-if="lodshow==true">
|
||||
<div class="loader" v-show="false">
|
||||
<div class="loader-inner ball-grid-pulse">
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
|
@ -154,6 +116,7 @@
|
|||
import {
|
||||
getSoilSummry
|
||||
} from '@/api';
|
||||
import { _colors } from '@/utils/color.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -162,98 +125,169 @@ export default {
|
|||
components: {},
|
||||
data() {
|
||||
return {
|
||||
airDataListHome1: [],
|
||||
airDataListHome2: [],
|
||||
trzddialogTableVisible: true,
|
||||
itemValue: {},
|
||||
timeout8: null,
|
||||
timeout9: null,
|
||||
timeout18: null,
|
||||
deployType: 'soil',
|
||||
trListVlaue: true,
|
||||
formListVlaue: [],
|
||||
unitValue: true,
|
||||
lodshow: false,
|
||||
tabnum: true,
|
||||
radio1: '',
|
||||
value1: '',
|
||||
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
time: 1,
|
||||
urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
|
||||
deployType: 'soil',
|
||||
allData: null,
|
||||
tableHead: [],
|
||||
trzddialogTableVisible: true,
|
||||
tableListData: [],
|
||||
unitValue: true,
|
||||
echartOrTable: '1',
|
||||
formParam: {
|
||||
date: '',
|
||||
summrayMode: 'monthDays'
|
||||
},
|
||||
postParam: {
|
||||
deployIds: [this.soilDataId],
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
summrayMode: 'monthDays',
|
||||
},
|
||||
myChartObj: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('土壤弹窗显示拉!', this.soilDataId)
|
||||
this.deviceSummaryApi();
|
||||
},
|
||||
methods: {
|
||||
// 土壤弹窗
|
||||
trzxshow(e) {
|
||||
let that = this
|
||||
const lisst = e.target.closest(".tcgd2"); // 定位元素
|
||||
if (lisst) { // 是否是滚动组件的某一行/列
|
||||
let itemlist = lisst.dataset.item
|
||||
let value = JSON.parse(itemlist)
|
||||
this.deployId = value.deployId
|
||||
this.itemValue = value.item
|
||||
this.summrayMode = 'dayhours'
|
||||
this.deviceSummaryApi()
|
||||
}
|
||||
this.trzddialogTableVisible = true;
|
||||
that.lodshow = true
|
||||
this.timeout8 = setTimeout(() => {
|
||||
that.echrtTrCkick()
|
||||
}, 1500);
|
||||
this.timeout9 = setTimeout(() => {
|
||||
that.lodshow = false
|
||||
}, 2000);
|
||||
},
|
||||
startAnimate() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.myNum1.map(res => {
|
||||
res.start()
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 历史数据曲线
|
||||
deviceSummaryApi() {
|
||||
let obj = {
|
||||
deployId: this.deployId,
|
||||
startTime: this.startTime,
|
||||
survItem: this.itemValue,
|
||||
auths: this.auths,
|
||||
summrayMode: this.summrayMode,
|
||||
}
|
||||
getSoilSummry(obj).then(res => {
|
||||
let that = this
|
||||
this.trListVlaue = res.result
|
||||
this.dataListVlaue = res.result.dataList
|
||||
this.timeListVlaue = res.result.timeList
|
||||
this.formListVlaue = res.result.formList
|
||||
this.descriptionValue = res.result.itemInfo.description
|
||||
this.unitValue = res.result.itemInfo.unit
|
||||
let that = this
|
||||
this.tableHead = [];
|
||||
getSoilSummry(that.postParam).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.timeout18 = setTimeout(() => {
|
||||
that.lodshow = false
|
||||
that.$nextTick(() => {
|
||||
if (this.deployType == 'soil') {
|
||||
this.echrtTrCkick();
|
||||
}
|
||||
})
|
||||
}, 1000);
|
||||
this.allData = res.result
|
||||
if(this.allData){
|
||||
this.tableHead = res.result.realTimeData
|
||||
this.tableIndex = res.result.tableIndex
|
||||
}
|
||||
this.initEchartDom();
|
||||
}
|
||||
})
|
||||
},
|
||||
echrtTrCkick() {
|
||||
// 切换参数
|
||||
switchData(e) {
|
||||
let that = this
|
||||
console.log('切换参数switchData', e)
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.myNum1?.map(res => {
|
||||
// res.start()
|
||||
// })
|
||||
// })
|
||||
},
|
||||
initEchartDom() {
|
||||
console.log('initEchart')
|
||||
if(!this.allData) {
|
||||
console.error('数据未获取到')
|
||||
return ;
|
||||
}
|
||||
if(this.myChartObj){
|
||||
this.myChartObj.dispose();
|
||||
}
|
||||
this.myChartObj = this.$echarts.init(document.getElementById("columnTrEchart"));
|
||||
// 绘制图表
|
||||
let legendData = this.allData.realTimeData.map(item => item.name+'('+item.unit+')');
|
||||
let xAxisData = this.allData.tableIndex;
|
||||
let seriesData = this.allData.realTimeData.map((item,index) => {
|
||||
let subdata = this.allData.objResults[item.survItem]
|
||||
return {
|
||||
name: item.name+'('+item.unit+')',
|
||||
data: subdata,
|
||||
type: "line",
|
||||
symbol: "circle", //设定为实心点
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
//新版渐变色实现
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: _colors[index],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 223, 4, 0.1)",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
//线的颜色
|
||||
color: _colors[index],
|
||||
width: 1.5,
|
||||
},
|
||||
itemStyle: {
|
||||
color: _colors[index],
|
||||
},
|
||||
}
|
||||
|
||||
}) ;
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
icon: "rect",
|
||||
itemWidth: 7, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
itemGap: 15, // 设置间距
|
||||
top: "0",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#fff",
|
||||
// fontSize: 14,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
top: "14%",
|
||||
bottom: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
lineStyle: {
|
||||
color: "rgba(117, 168, 202, 0.9)",
|
||||
},
|
||||
axisLine: {
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: seriesData,
|
||||
};
|
||||
option && this.myChartObj.setOption(option);
|
||||
},
|
||||
timeqieh() {
|
||||
},
|
||||
timetrpicker() {
|
||||
},
|
||||
tanchuangshuj() {
|
||||
},
|
||||
numtab() {
|
||||
formParamChange(f) {
|
||||
console.log(this.formParam)
|
||||
if(f === 1){
|
||||
this.formParam.date = null;
|
||||
}
|
||||
if(this.formParam.date) {
|
||||
this.postParam.startTime = this.formParam.date
|
||||
this.postParam.endTime = null
|
||||
} else {
|
||||
this.postParam.startTime = null
|
||||
this.postParam.endTime = null
|
||||
}
|
||||
this.deviceSummaryApi();
|
||||
},
|
||||
tableClassName(){},
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
}
|
||||
|
|
@ -270,7 +304,7 @@ export default {
|
|||
margin: 0 auto;
|
||||
background: none;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
/* margin-left: 22%; */
|
||||
|
|
@ -285,10 +319,10 @@ export default {
|
|||
height: 42vw;
|
||||
/* background: url(../../assets/images/tccovbak.png) no-repeat;
|
||||
background-size: 100% 100%; */
|
||||
background: rgba(1, 17, 26, 0.7);
|
||||
background: rgba(1, 17, 26, 0.9);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #33739d;
|
||||
text-align: center;
|
||||
//text-align: center;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
|
||||
position: relative;
|
||||
|
|
@ -380,6 +414,7 @@ export default {
|
|||
.tz_cov_topyqjs {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.tz_cov_top {
|
||||
|
|
@ -407,9 +442,18 @@ export default {
|
|||
}
|
||||
|
||||
.qxsjssjc_left {
|
||||
width: 160px;
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
//width: 873px;
|
||||
/* float: left; */
|
||||
/* margin-left: 40px; */
|
||||
margin-top:70px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: 400px;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qxsjssjc_leftTc {
|
||||
|
|
@ -429,7 +473,7 @@ export default {
|
|||
}
|
||||
|
||||
.qxjcimg2 {
|
||||
width: 45%;
|
||||
width: 40%;
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
|
||||
|
|
@ -515,7 +559,7 @@ export default {
|
|||
position: absolute;
|
||||
left: -4%;
|
||||
bottom: -40px;
|
||||
z-index: 0;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.tcxitit {
|
||||
|
|
@ -577,14 +621,14 @@ export default {
|
|||
|
||||
.jcsjicon1 {
|
||||
width: 46px;
|
||||
margin-top: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.jcsjicon1_tit {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin-top: 14px;
|
||||
margin-top: 8px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -592,17 +636,20 @@ export default {
|
|||
}
|
||||
|
||||
.jcsjicon1_num {
|
||||
color: #4FBFF9;
|
||||
font-size: 18px;
|
||||
color: #e7f47b;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
font-family: "UnidreamLED";
|
||||
font-family: HYChangLiSongKeBen;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.jcsjicon1_dan {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 3%;
|
||||
margin-left: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -641,8 +688,8 @@ export default {
|
|||
}
|
||||
|
||||
.tctrimg {
|
||||
width: 20%;
|
||||
height: 400px;
|
||||
width: 16%;
|
||||
height: 450px;;
|
||||
position: absolute;
|
||||
left: 11%;
|
||||
top: 120px;
|
||||
|
|
@ -668,10 +715,6 @@ export default {
|
|||
}
|
||||
|
||||
|
||||
.tz_cov_topyqjs {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.tcccqhimg {
|
||||
width: 115px;
|
||||
|
|
@ -854,4 +897,8 @@ export default {
|
|||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.tableRowClassName{
|
||||
background-color: rgb(216, 19, 19);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -607,12 +607,21 @@
|
|||
<script>
|
||||
import ScaleBox from 'vue2-scale-box'
|
||||
import {
|
||||
displayInfo, stationInfo, fwlist, ntfmlist, getNewestData, getPollutionDict,
|
||||
getIndexSummry, getAllstationAndPestLight, survItemSummary, getSoilSummry
|
||||
displayInfo,
|
||||
fwlist,
|
||||
getAllstationAndPestLight,
|
||||
getIndexSummry,
|
||||
getNewestData,
|
||||
getPollutionDict,
|
||||
getSoilSummry,
|
||||
ntfmlist,
|
||||
stationInfo,
|
||||
survItemSummary
|
||||
} from '@/api';
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import hefentianqi from '@/pages/weather/weather.vue'
|
||||
import SoilDialog from '@/components/SoilDialog.vue'
|
||||
import {_colors} from '@/utils/color.js'
|
||||
|
||||
export default {
|
||||
name: 'mainHome',
|
||||
|
|
@ -1342,29 +1351,24 @@ export default {
|
|||
console.log('开始初始化echart：')
|
||||
let dataObj = [];
|
||||
let i = 0;
|
||||
let colors = [
|
||||
'#C41E3A', '#FF7F0E', '#FFD700', '#00A36C', '#98FB98',
|
||||
'#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4',
|
||||
'#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000',
|
||||
'#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321'];
|
||||
for (let key in data['datas']) {
|
||||
if (data['datas'][key] instanceof Array) {
|
||||
dataObj[i++] = {
|
||||
name: key,
|
||||
color: colors[i],
|
||||
color: _colors[i],
|
||||
value: data['datas'][key]
|
||||
}
|
||||
}
|
||||
}
|
||||
this.echartInit[domKey] = this.$echarts.init(divDom);
|
||||
let xAxisData = data['dateStr']
|
||||
let legendData = dataObj.map(item => item.name);
|
||||
let xAxisData = data['dateStr']
|
||||
let seriesData = dataObj.map(item => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.value,
|
||||
type: 'line',
|
||||
stack: '',
|
||||
data: item.value,
|
||||
// areaStyle: { color: item.color },
|
||||
lineStyle: {
|
||||
color: item.color // 设置线的颜色为红色
|
||||
|
|
|
|||
|
|
@ -237,7 +237,12 @@ export default {
|
|||
|
||||
<style >
|
||||
.el-input__inner{
|
||||
color:#00f6ff!important;
|
||||
color: #ffffff !important;
|
||||
background-color: #021f3a;
|
||||
}
|
||||
.el-radio-button__inner{
|
||||
color: #ffffff !important;
|
||||
background-color: #021f3a;
|
||||
}
|
||||
input:-webkit-autofill {
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
let _colors = [
|
||||
'#C41E3A', '#FF7F0E', '#FFD700', '#00A36C', '#98FB98',
|
||||
'#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4',
|
||||
'#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000',
|
||||
'#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321'];
|
||||
|
||||
export { _colors };
|
||||
Loading…
Reference in New Issue