16 changed files with 886 additions and 35 deletions
@ -0,0 +1,34 @@ |
|||
<template> |
|||
<div class="frame-container"> |
|||
<iframe |
|||
src="https://www.tall.wiki/kangfu/v1/?key=230659446" |
|||
frameborder="0" |
|||
></iframe> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Monitor', |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.frame-container { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 275rem; |
|||
height: 200rem; |
|||
box-sizing: content-box; |
|||
background: url('@/assets/images/border-s-2.png') no-repeat center center; |
|||
background-size: 100%; |
|||
padding: 5rem; |
|||
overflow: hidden; |
|||
} |
|||
iframe { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<div class="address-container"> |
|||
<img src="../../assets/images/icon-location.png" alt="" /> |
|||
我的位置：山西省 > 太原市 > 晋祠农场 |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Address', |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.address-container { |
|||
position: absolute; |
|||
left: 0rem; |
|||
top: 0rem; |
|||
box-shadow: 0 0 9rem #00d9ff inset; |
|||
padding: 8rem 16rem; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #fff; |
|||
font-size: 14rem; |
|||
} |
|||
.address-container img { |
|||
margin-right: 10rem; |
|||
} |
|||
</style> |
|||
@ -1,5 +1,62 @@ |
|||
<template>综合曲线</template> |
|||
<template> |
|||
<div id="complex-container"></div> |
|||
</template> |
|||
|
|||
<script setup></script> |
|||
<script setup> |
|||
import { nextTick } from 'vue'; |
|||
import { generateChartOption } from '@/utils/complexChart'; |
|||
|
|||
<style scoped></style> |
|||
let myChart = null; |
|||
let data = []; |
|||
let defaultSelectedLegend = { |
|||
'室内温度(℃)': true, |
|||
'室外温度(℃)': true, |
|||
'土壤温度(℃)': true, |
|||
'室内湿度(RH%)': true, |
|||
'室外湿度(RH%)': true, |
|||
'土壤湿度(RH%)': true, |
|||
'风速(m/s)': true, |
|||
'CO2(%)': true, |
|||
'光照(klux)': true, |
|||
}; |
|||
|
|||
async function getData() { |
|||
try { |
|||
const { data: rawData } = await useFetch('/api/datas'); |
|||
const { code, msg, data } = rawData.value; |
|||
if (code === 200) { |
|||
await nextTick(); |
|||
initChart(data); |
|||
} else { |
|||
throw new Error(msg); |
|||
} |
|||
} catch (error) { |
|||
console.error(error); |
|||
} |
|||
} |
|||
|
|||
// 初始化图表 |
|||
function initChart(data) { |
|||
const chartDom = document.getElementById('complex-container'); |
|||
myChart = echarts.init(chartDom); |
|||
render(data, defaultSelectedLegend); |
|||
|
|||
myChart.on('legendselectchanged', event => { |
|||
defaultSelectedLegend = event.selected; |
|||
render(data, event.selected); |
|||
}); |
|||
} |
|||
|
|||
function render(data, selected) { |
|||
const option = generateChartOption(data, selected); |
|||
option && myChart.setOption(option); |
|||
} |
|||
|
|||
getData(); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
#complex-container { |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,7 +1,21 @@ |
|||
<template> |
|||
<CommonMap></CommonMap> |
|||
<div class="main-container"> |
|||
<!-- 地图--> |
|||
<CommonMap></CommonMap> |
|||
<!-- 监控--> |
|||
<CommonMonitor></CommonMonitor> |
|||
|
|||
<!-- 地址--> |
|||
<DataCenterAddress></DataCenterAddress> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup></script> |
|||
|
|||
<style scoped></style> |
|||
<style scoped> |
|||
.main-container { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,9 +1,47 @@ |
|||
<template>产量对比</template> |
|||
<template> |
|||
<div id="yield-chart"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'YieldChart', |
|||
}; |
|||
<script setup> |
|||
import { onMounted } from 'vue'; |
|||
|
|||
onMounted(() => { |
|||
const chartDom = document.getElementById('yield-chart'); |
|||
const myChart = echarts.init(chartDom); |
|||
const option = initOptions(); |
|||
myChart.setOption(option); |
|||
}); |
|||
|
|||
function initOptions() { |
|||
const option = { |
|||
darkMode: true, |
|||
grid: { |
|||
top: 20, |
|||
bottom: 20, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: ['2017', '2018', '2019', '2020', '2021'], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [224, 218, 135, 147, 260], |
|||
type: 'line', |
|||
areaStyle: {}, |
|||
}, |
|||
], |
|||
}; |
|||
return option; |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
<style scoped> |
|||
#yield-chart { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,6 @@ |
|||
import type { IncomingMessage, ServerResponse } from 'http'; |
|||
import { datas } from '../mocks/datas'; |
|||
|
|||
export default async (req: IncomingMessage, res: ServerResponse) => { |
|||
return { code: 200, msg: 'ok', data: datas }; |
|||
}; |
|||
@ -0,0 +1,290 @@ |
|||
export const datas = [ |
|||
{ |
|||
time: '00:00', |
|||
roomT: 19, |
|||
roomH: 60, |
|||
outT: '-5', |
|||
outH: 60, |
|||
soilT: 6, |
|||
soilH: 40, |
|||
windSpeed: 0, |
|||
co2: '0.01 ', |
|||
light: 3, |
|||
}, |
|||
{ |
|||
time: '01:00', |
|||
roomT: 19, |
|||
roomH: 70, |
|||
outT: '-6', |
|||
outH: 70, |
|||
soilT: 7, |
|||
soilH: 50, |
|||
windSpeed: 2, |
|||
co2: '0.02 ', |
|||
light: 2, |
|||
}, |
|||
{ |
|||
time: '02:00', |
|||
roomT: 19, |
|||
roomH: 80, |
|||
outT: '-7', |
|||
outH: 80, |
|||
soilT: 7, |
|||
soilH: 60, |
|||
windSpeed: 3, |
|||
co2: '0.03 ', |
|||
light: 1, |
|||
}, |
|||
{ |
|||
time: '03:00', |
|||
roomT: 19, |
|||
roomH: 90, |
|||
outT: '-8', |
|||
outH: 90, |
|||
soilT: 7, |
|||
soilH: 70, |
|||
windSpeed: 7, |
|||
co2: '0.04 ', |
|||
light: 1, |
|||
}, |
|||
{ |
|||
time: '04:00', |
|||
roomT: 18, |
|||
roomH: 100, |
|||
outT: '-9', |
|||
outH: 100, |
|||
soilT: 5, |
|||
soilH: 80, |
|||
windSpeed: 9, |
|||
co2: '0.05 ', |
|||
light: 4, |
|||
}, |
|||
{ |
|||
time: '05:00', |
|||
roomT: 18, |
|||
roomH: 95, |
|||
outT: '-10', |
|||
outH: 95, |
|||
soilT: 5, |
|||
soilH: 75, |
|||
windSpeed: 14, |
|||
co2: '0.06 ', |
|||
light: 8, |
|||
}, |
|||
{ |
|||
time: '06:00', |
|||
roomT: 19, |
|||
roomH: 90, |
|||
outT: '-5', |
|||
outH: 90, |
|||
soilT: 7, |
|||
soilH: 70, |
|||
windSpeed: 12, |
|||
co2: '0.07 ', |
|||
light: 10, |
|||
}, |
|||
{ |
|||
time: '07:00', |
|||
roomT: 19, |
|||
roomH: 85, |
|||
outT: '-1', |
|||
outH: 85, |
|||
soilT: 7, |
|||
soilH: 65, |
|||
windSpeed: 15, |
|||
co2: '0.08 ', |
|||
light: 20, |
|||
}, |
|||
{ |
|||
time: '08:00', |
|||
roomT: 20, |
|||
roomH: 80, |
|||
outT: 0, |
|||
outH: 80, |
|||
soilT: 10, |
|||
soilH: 60, |
|||
windSpeed: 13, |
|||
co2: '0.09 ', |
|||
light: 26, |
|||
}, |
|||
{ |
|||
time: '09:00', |
|||
roomT: 20, |
|||
roomH: 75, |
|||
outT: 1, |
|||
outH: 75, |
|||
soilT: 12, |
|||
soilH: 55, |
|||
windSpeed: 14, |
|||
co2: '0.09 ', |
|||
light: 35, |
|||
}, |
|||
{ |
|||
time: '10:00', |
|||
roomT: 21, |
|||
roomH: 70, |
|||
outT: 2, |
|||
outH: 70, |
|||
soilT: 14, |
|||
soilH: 50, |
|||
windSpeed: 9, |
|||
co2: '0.12 ', |
|||
light: 45, |
|||
}, |
|||
{ |
|||
time: '11:00', |
|||
roomT: 21, |
|||
roomH: 65, |
|||
outT: 3, |
|||
outH: 65, |
|||
soilT: 16, |
|||
soilH: 45, |
|||
windSpeed: 5, |
|||
co2: '0.14 ', |
|||
light: 50, |
|||
}, |
|||
{ |
|||
time: '12:00', |
|||
roomT: 23, |
|||
roomH: 60, |
|||
outT: 4, |
|||
outH: 60, |
|||
soilT: 19, |
|||
soilH: 40, |
|||
windSpeed: 8, |
|||
co2: '0.16 ', |
|||
light: 55, |
|||
}, |
|||
{ |
|||
time: '13:00', |
|||
roomT: 24, |
|||
roomH: 55, |
|||
outT: 5, |
|||
outH: 55, |
|||
soilT: 22, |
|||
soilH: 35, |
|||
windSpeed: 7, |
|||
co2: '0.18 ', |
|||
light: 65, |
|||
}, |
|||
{ |
|||
time: '14:00', |
|||
roomT: 28, |
|||
roomH: 50, |
|||
outT: 6, |
|||
outH: 50, |
|||
soilT: 23, |
|||
soilH: 30, |
|||
windSpeed: 6, |
|||
co2: '0.20 ', |
|||
light: 80, |
|||
}, |
|||
{ |
|||
time: '15:00', |
|||
roomT: 28, |
|||
roomH: 45, |
|||
outT: 6, |
|||
outH: 45, |
|||
soilT: 23, |
|||
soilH: 25, |
|||
windSpeed: 4, |
|||
co2: '0.19 ', |
|||
light: 70, |
|||
}, |
|||
{ |
|||
time: '16:00', |
|||
roomT: 26, |
|||
roomH: 40, |
|||
outT: 7, |
|||
outH: 40, |
|||
soilT: 20, |
|||
soilH: 20, |
|||
windSpeed: 11, |
|||
co2: '0.18 ', |
|||
light: 65, |
|||
}, |
|||
{ |
|||
time: '17:00', |
|||
roomT: 25, |
|||
roomH: 45, |
|||
outT: 5, |
|||
outH: 45, |
|||
soilT: 17, |
|||
soilH: 25, |
|||
windSpeed: 8, |
|||
co2: '0.17 ', |
|||
light: 55, |
|||
}, |
|||
{ |
|||
time: '18:00', |
|||
roomT: 24, |
|||
roomH: 50, |
|||
outT: 5, |
|||
outH: 50, |
|||
soilT: 14, |
|||
soilH: 30, |
|||
windSpeed: 5, |
|||
co2: '0.16 ', |
|||
light: 40, |
|||
}, |
|||
{ |
|||
time: '19:00', |
|||
roomT: 23, |
|||
roomH: 55, |
|||
outT: 1, |
|||
outH: 55, |
|||
soilT: 11, |
|||
soilH: 35, |
|||
windSpeed: 1, |
|||
co2: '0.15 ', |
|||
light: 35, |
|||
}, |
|||
{ |
|||
time: '20:00', |
|||
roomT: 22, |
|||
roomH: 60, |
|||
outT: 0, |
|||
outH: 60, |
|||
soilT: 8, |
|||
soilH: 40, |
|||
windSpeed: 5, |
|||
co2: '0.14 ', |
|||
light: 25, |
|||
}, |
|||
{ |
|||
time: '21:00', |
|||
roomT: 21, |
|||
roomH: 65, |
|||
outT: 0, |
|||
outH: 65, |
|||
soilT: 7, |
|||
soilH: 45, |
|||
windSpeed: 4, |
|||
co2: '0.13 ', |
|||
light: 6, |
|||
}, |
|||
{ |
|||
time: '22:00', |
|||
roomT: 20, |
|||
roomH: 70, |
|||
outT: '-3', |
|||
outH: 70, |
|||
soilT: 6, |
|||
soilH: 50, |
|||
windSpeed: 6, |
|||
co2: '0.12 ', |
|||
light: 5, |
|||
}, |
|||
{ |
|||
time: '23:00', |
|||
roomT: 20, |
|||
roomH: 75, |
|||
outT: '-4', |
|||
outH: 75, |
|||
soilT: 5, |
|||
soilH: 55, |
|||
windSpeed: 7, |
|||
co2: '0.11 ', |
|||
light: 4, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,177 @@ |
|||
/* eslint-disable max-len,object-curly-newline */ |
|||
import max from 'lodash/max'; |
|||
import { |
|||
colors, |
|||
generateDefaultSeries, |
|||
itemColor, |
|||
legendData, |
|||
yAxisData, |
|||
} from './complexConfig'; |
|||
|
|||
/** |
|||
* 生成chart所需参数 |
|||
* @param {Object[]} data 服务端返回数据 |
|||
* @returns {{environmentTemperature: *[], corrosionXIN: *[], corrosionGANG: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], saltT: *[], saltR: *[], environmentHumidity: *[]}} |
|||
*/ |
|||
function generateParams(data) { |
|||
const result = { |
|||
time: [], |
|||
roomT: [], |
|||
roomH: [], |
|||
outT: [], |
|||
outH: [], |
|||
soilT: [], |
|||
soilH: [], |
|||
windSpeed: [], |
|||
co2: [], |
|||
light: [], |
|||
}; |
|||
data.forEach(item => { |
|||
result.time.push(item.time); |
|||
result.roomT.push(+item.roomT); |
|||
result.roomH.push(+item.roomH); |
|||
result.outT.push(+item.outT); |
|||
result.outH.push(+item.outH); |
|||
result.soilT.push(+item.soilT); |
|||
result.soilH.push(+item.soilH); |
|||
result.windSpeed.push(+item.windSpeed); |
|||
result.co2.push(+item.co2); |
|||
result.light.push(+item.light); |
|||
}); |
|||
return result; |
|||
} |
|||
|
|||
/** |
|||
* 计算Y轴的显示 |
|||
* @param {string} yName Y轴的name |
|||
* @param {Object} selectedLegend legends |
|||
* @returns {boolean} |
|||
*/ |
|||
export function computeYAxisShow(yName, selectedLegend) { |
|||
// eslint-disable-next-line guard-for-in,no-restricted-syntax
|
|||
for (const key in selectedLegend) { |
|||
if (key.includes(yName) && selectedLegend[key]) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
/** |
|||
* 生产y轴内容 |
|||
* @param {Object} selectedLegend |
|||
* @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]} |
|||
*/ |
|||
export function generateYAxis(selectedLegend) { |
|||
let leftIndex = 0; |
|||
let rightIndex = 0; |
|||
yAxisData.forEach(item => { |
|||
item.show = computeYAxisShow(item.name, selectedLegend); |
|||
if (item.show) { |
|||
if (item.position === 'left') { |
|||
item.offset = 40 * leftIndex; |
|||
leftIndex += 1; |
|||
} else { |
|||
item.offset = 40 * rightIndex; |
|||
rightIndex += 1; |
|||
} |
|||
} |
|||
}); |
|||
return yAxisData; |
|||
} |
|||
|
|||
/** |
|||
* 生成series数据 |
|||
* @param {Object} data |
|||
* @param {Object[]} yAxis |
|||
* @returns {({data: ([]|number|string|*), name: string, type: string}|{data: ([]|number|BufferSource|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: [], name: string, type: string, yAxisIndex: number})[]|*[]} |
|||
*/ |
|||
function generateSeries(data, yAxis) { |
|||
const seriesArr = generateDefaultSeries(data); |
|||
const showArr = seriesArr.filter(item => |
|||
yAxis.find(y => y.name === item.name), |
|||
); |
|||
const hideArr = seriesArr.filter( |
|||
item => !yAxis.find(y => y.name === item.name), |
|||
); |
|||
const result = [...showArr, ...hideArr]; |
|||
result.forEach(item => { |
|||
item.itemStyle = { color: itemColor[item.name] }; |
|||
if (item.name.includes('温度')) { |
|||
item.yAxisIndex = 0; |
|||
} else if (item.name.includes('湿度')) { |
|||
item.yAxisIndex = 1; |
|||
} else if (item.name.includes('风速')) { |
|||
item.yAxisIndex = 2; |
|||
} else if (item.name.includes('CO2')) { |
|||
item.yAxisIndex = 3; |
|||
} else if (item.name.includes('光照')) { |
|||
item.yAxisIndex = 4; |
|||
} |
|||
}); |
|||
return result || []; |
|||
} |
|||
|
|||
/** |
|||
* 计算图表grid left right值 |
|||
* @param {Object[]} yAxis |
|||
* @returns {{left: number, right: number}} |
|||
*/ |
|||
function generateGrid(yAxis) { |
|||
const left = []; |
|||
const right = []; |
|||
yAxis.forEach(item => { |
|||
if (item.show) { |
|||
if (item.position === 'left') { |
|||
left.push(item.offset || 0); |
|||
} else { |
|||
right.push(item.offset || 0); |
|||
} |
|||
} |
|||
}); |
|||
return { |
|||
left: max(left) + 40, |
|||
right: max(right) + 40, |
|||
bottom: 20, |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* 生成chart参数 |
|||
* @param {Object[]} rawData 返回段返回的data数据 |
|||
* @param {Object} selected 选中的legend |
|||
* @returns {{yAxis: ({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: [string,string,string,string,string,string,string,string,string], grid: {left: number, right: number}, legend: {data: [string,string,string,string,string,string,string,string,string], type: string, selected}, series: (({data: ([]|number|string|*), name: string, type: string}|{data: ([]|number|BufferSource|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: [], name: string, type: string, yAxisIndex: number})[]|*[]), tooltip: {axisPointer: {type: string, snap: boolean}, trigger: string}, dataZoom: [{type: string},{type: string}]}} |
|||
*/ |
|||
export function generateChartOption(rawData, selected) { |
|||
const data = generateParams(rawData); |
|||
const yAxis = generateYAxis(selected); |
|||
const series = generateSeries(data, yAxis); |
|||
const grid = generateGrid(yAxis); |
|||
const option = { |
|||
color: colors, |
|||
darkMode: true, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
snap: true, |
|||
}, |
|||
}, |
|||
grid, |
|||
legend: { |
|||
type: 'scroll', |
|||
selected, |
|||
data: legendData, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisTick: { alignWithLabel: true }, |
|||
data: data.time, |
|||
}, |
|||
], |
|||
yAxis, |
|||
series, |
|||
}; |
|||
return option; |
|||
} |
|||
@ -0,0 +1,202 @@ |
|||
/* eslint-disable max-len */ |
|||
export const colors = [ |
|||
'#EAB308', |
|||
'#F97316', |
|||
'#EC4899', |
|||
'#F43F5E', |
|||
'#D946EF', |
|||
'#06B6D4', |
|||
'#B45309', |
|||
'#1E40AF', |
|||
'#166534', |
|||
]; |
|||
|
|||
export const itemColor = { |
|||
'室内温度(℃)': colors[5], |
|||
'室外温度(℃)': colors[6], |
|||
'土壤温度(℃)': colors[7], |
|||
'室内湿度(RH%)': colors[8], |
|||
'室外湿度(RH%)': colors[0], |
|||
'土壤湿度(RH%)': colors[1], |
|||
'风速(m/s)': colors[2], |
|||
'CO2(%)': colors[3], |
|||
'光照(klux)': colors[4], |
|||
}; |
|||
|
|||
export const legendData = [ |
|||
{ |
|||
name: '室外湿度(RH%)', |
|||
itemStyle: { color: colors[0] }, |
|||
listStyle: { color: colors[0] }, |
|||
}, |
|||
{ |
|||
name: '土壤湿度(RH%)', |
|||
itemStyle: { color: colors[1] }, |
|||
listStyle: { color: colors[1] }, |
|||
}, |
|||
{ |
|||
name: '风速(m/s)', |
|||
itemStyle: { color: colors[2] }, |
|||
listStyle: { color: colors[2] }, |
|||
}, |
|||
{ |
|||
name: 'CO2(%)', |
|||
itemStyle: { color: colors[3] }, |
|||
listStyle: { color: colors[3] }, |
|||
}, |
|||
{ |
|||
name: '光照(klux)', |
|||
itemStyle: { color: colors[4] }, |
|||
listStyle: { color: colors[4] }, |
|||
}, |
|||
{ |
|||
name: '室内温度(℃)', |
|||
itemStyle: { color: colors[5] }, |
|||
listStyle: { color: colors[5] }, |
|||
}, |
|||
{ |
|||
name: '室外温度(℃)', |
|||
itemStyle: { color: colors[6] }, |
|||
listStyle: { color: colors[6] }, |
|||
}, |
|||
{ |
|||
name: '土壤温度(℃)', |
|||
itemStyle: { color: colors[7] }, |
|||
listStyle: { color: colors[7] }, |
|||
}, |
|||
{ |
|||
name: '室内湿度(RH%)', |
|||
itemStyle: { color: colors[8] }, |
|||
listStyle: { color: colors[8] }, |
|||
}, |
|||
]; |
|||
|
|||
// y轴定义
|
|||
export const yAxisData = [ |
|||
{ |
|||
type: 'value', |
|||
name: '温度', |
|||
offset: 0, |
|||
position: 'left', |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { color: colors[7] }, |
|||
}, |
|||
axisLabel: { formatter: '{value}' }, |
|||
axisPointer: { show: false }, |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
name: '湿度', |
|||
offset: 70, |
|||
position: 'left', |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { color: colors[1] }, |
|||
}, |
|||
axisLabel: { formatter: '{value}' }, |
|||
axisPointer: { show: false }, |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
name: '风速', |
|||
offset: 0, |
|||
position: 'right', |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { color: colors[2] }, |
|||
}, |
|||
axisLabel: { formatter: '{value}' }, |
|||
axisPointer: { show: false }, |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
name: 'CO2', |
|||
position: 'right', |
|||
show: false, |
|||
offset: 80, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { color: colors[3] }, |
|||
}, |
|||
axisLabel: { formatter: '{value}' }, |
|||
axisPointer: { show: false }, |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
name: '光照', |
|||
show: false, |
|||
position: 'right', |
|||
offset: 160, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { color: colors[4] }, |
|||
}, |
|||
axisLabel: { formatter: '{value}' }, |
|||
axisPointer: { show: false }, |
|||
}, |
|||
]; |
|||
|
|||
/** |
|||
* 生成默认数据 |
|||
* @param {Object} data |
|||
* @returns {[{data: (number|[]|string|*), name: string, type: string},{data: (number|[]|BufferSource|string|*), name: string, type: string, yAxisIndex: number},{data: ([]|string|*), name: string, type: string, yAxisIndex: number},{data: ([]|string|*), name: string, type: string, yAxisIndex: number},{data: [], name: string, type: string, yAxisIndex: number},null,null,null]} |
|||
*/ |
|||
export function generateDefaultSeries(data) { |
|||
return [ |
|||
{ |
|||
name: '室内温度(℃)', |
|||
type: 'line', |
|||
yAxisIndex: 0, |
|||
data: data.roomT, |
|||
}, |
|||
{ |
|||
name: '室外温度(℃)', |
|||
type: 'line', |
|||
yAxisIndex: 0, |
|||
data: data.outT, |
|||
}, |
|||
{ |
|||
name: '土壤温度(℃)', |
|||
type: 'line', |
|||
yAxisIndex: 0, |
|||
data: data.soilT, |
|||
}, |
|||
{ |
|||
name: '室内湿度(RH%)', |
|||
type: 'line', |
|||
yAxisIndex: 0, |
|||
data: data.roomH, |
|||
}, |
|||
{ |
|||
name: 'CO2(%)', |
|||
type: 'line', |
|||
yAxisIndex: 1, |
|||
data: data.co2, |
|||
}, |
|||
{ |
|||
name: '风速(m/s)', |
|||
type: 'line', |
|||
yAxisIndex: 1, |
|||
data: data.windSpeed, |
|||
}, |
|||
{ |
|||
name: '光照(klux)', |
|||
type: 'line', |
|||
yAxisIndex: 2, |
|||
data: data.light, |
|||
}, |
|||
{ |
|||
name: '室外湿度(RH%)', |
|||
type: 'line', |
|||
yAxisIndex: 3, |
|||
data: data.outH, |
|||
}, |
|||
{ |
|||
name: '土壤湿度(RH%)', |
|||
type: 'line', |
|||
yAxisIndex: 4, |
|||
data: data.soilH, |
|||
}, |
|||
]; |
|||
} |
|||
Loading…
Reference in new issue