-
COD
-
8
-
mg/L
+
+
+
+
-
-
氨氮
-
12.5
-
mg/L
+
+
+
+
-
-
SS
-
20.7
-
mg/L
+
+
+
+
-
-
地块剩余调蓄容积
-
316
-
m³
+
+
+
+
+
@@ -103,29 +137,32 @@
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
-
+ img {
+ width: 60px;
+ height: 60px;
+ }
>div {
- width: 10%;
+ width: 11%;
height: 80%;
border: 1px solid rgb(197, 195, 195);
display: flex;
- flex-direction: column;
- background:#d8e8f7;
+ // flex-direction: column;
+ background:#3CB6CC;
// align-items: center;
- justify-content: center;
+ justify-content: space-between;
text-align: center;
padding: 10px;
border-radius: 10px;
font-size: 20px;
- line-height: 45px;
+ color: #fff;
}
}
}
}
}
.value {
- font-size: 38px;
- color: #1baeae;
+ font-size: 32px;
+ color: #02ffff;
font-weight: bold;
}
\ No newline at end of file
diff --git a/src/components/Ganalyse1.vue b/src/components/Ganalyse1.vue
index 6caf8ba..956c949 100644
--- a/src/components/Ganalyse1.vue
+++ b/src/components/Ganalyse1.vue
@@ -1,6 +1,19 @@
-
+
+
+
+
热岛消减率（计算公式：X=(T2-1-T2-2)/T2-1）
+
+
+
@@ -21,61 +34,49 @@ export default {
});
onMounted(async () => {
- getChartsZf2("echartDiv", '热岛消减率');
- // getChartsZfl("echartDivQ", '蒸发带走的潜热')
+ getChartsZf2("echartDiv", '每日热岛消减率');
+ getChartsGauge("echartGauge");
+ getChartsPie("echartPie");
});
- const getChartsZfl = (id, text) => {
+ const getChartsGauge = (id) => {
var dom = document.getElementById(id);
var op = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#999'
- }
- }
- },
legend: {
- data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+ orient: 'vertical',
+ left: '10%',
+ top: '20%'
},
- xAxis: [
+ radar: {
+ // center: ['45%', '70%'],
+ indicator: [
+ { name: '1月', max: 6500 },
+ { name: '2月', max: 16000 },
+ { name: '3月', max: 30000 },
+ { name: '4月', max: 38000 },
+ { name: '5月', max: 52000 },
+ { name: '6月', max: 25000 },
+ { name: '7月', max: 6500 },
+ { name: '8月', max: 16000 },
+ { name: '9月', max: 30000 },
+ { name: '10月', max: 38000 },
+ { name: '11月', max: 52000 },
+ { name: '12月', max: 25000 }
+ ]
+ },
+ series: [
{
- type: 'category',
+ type: 'radar',
data: [
- "00",
- "01",
- "02",
- "03",
- "04",
- "05",
- "06",
- "07",
- "08",
- "09",
- "10",
- "11",
- "12",
- "13",
- "14",
- "15",
- "16",
- "17",
- "18",
- "19",
- "20",
- "21",
- "22",
- "23",
- ],
- axisPointer: {
- type: 'shadow'
- }
+ {
+ value: [4200, 3000, 20000, 35000, 50000, 18000, 4200, 3000, 20000, 35000, 50000, 18000],
+ name: '系统A'
+ },
+ {
+ value: [4000, 1000, 10000, 25000, 20000, 14000, 2200, 1000, 10000, 25000, 40000, 20000],
+ name: '系统B'
+ }
+ ]
}
- ],
- yAxis: [
-
-
]
};
getEchart(dom, op)
@@ -95,6 +96,7 @@ export default {
bottom: '3%',
containLabel: true
},
+ legend: {},
xAxis: [
{
type: 'category',
@@ -193,8 +195,46 @@ export default {
};
getEchart(dom, op)
}
+ const getChartsPie = (id) => {
+ var dom = document.getElementById(id);
+ var op = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: '10%',
+ top: '20%'
+ },
+ series: [
+ {
+ name: '热岛消减率',
+ type: 'pie',
+ radius: '50%',
+ data: [
+ { value: 1048, name: '系统A' },
+ { value: 735, name: '系统B' },
+ { value: 580, name: '系统C' },
+ { value: 484, name: '系统D' },
+ { value: 300, name: '系统E' },
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ };
+ getEchart(dom, op)
+ }
const getEchart = (dom, op) => {
if (dom) {
+ // 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
+ // 手动移除该属性
+ dom.removeAttribute('_echarts_instance_')
var myChart = echarts.init(dom);
var option = op;
@@ -203,7 +243,8 @@ export default {
};
return {
...toRefs(state),
- getChartsZfl,
+ getChartsZf2,
+ getChartsGauge,
getEchart
};
},
@@ -215,13 +256,42 @@ export default {
width: 100%;
height: 100%;
display: flex;
- flex-direction: column;
justify-content: space-between;
padding: 10px;
-
+ .left {
+ width: 50%;
+ height: 100%;
+ font-size: 20px;
+ >div {
+ width: 100%;
+ height: 48%;
+ // border: 1px solid red;
+ .echartDiv100 {
+ width: 100%;
+ height: 100% !important;
+ margin: 0 auto;
+ // border: 1px solid red;
+ }
+ }
+ }
+ .right {
+ width: 50%;
+ height: 100%;
+ font-size: 20px;
+ }
+.gongshi {
+ width: 100%;
+ height: 100px;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ p {
+ line-height: 50px;
+ }
+}
.echartDiv100 {
width: 100%;
- height: 100%;
+ height: calc(100% - 100px);
margin: 0 auto;
// border: 1px solid red;
}
diff --git a/src/components/Ganalyse2.vue b/src/components/Ganalyse2.vue
index 829879d..99ad9d7 100644
--- a/src/components/Ganalyse2.vue
+++ b/src/components/Ganalyse2.vue
@@ -1,7 +1,22 @@
-
-
+
+
+
+
水质参数消减率（X3=(COD2-COD3)/COD2,其余水质类似）
+
+
+
+
+
@@ -19,12 +34,110 @@ export default {
},
setup() {
const state = reactive({
-
+
});
- onMounted(async () => {
+ onMounted(async () => {
+ getChartsBar("echartBar");
+ getChartsPie("echartPie");
getChartsZfl("echartDiv", '蒸发量');
getChartsZfl("echartDivQ", '蒸发带走的潜热')
- });
+ });
+ const getChartsBar = (id) => {
+ var dom = document.getElementById(id);
+ var op = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ title: {
+ text: '蒸发带走的潜热'
+ },
+ legend: {},
+ xAxis: {
+ type: 'value'
+
+ },
+ yAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+ },
+ series: [
+ {
+ name: '系统A',
+ data: [100, 200, 300, 200, 100, 300, 400, 200, 150, 600, 550, 340],
+ type: 'bar'
+ },
+ {
+ name: '系统B',
+ data: [200, 150, 600, 550, 100, 200, 300, 200, 100, 300, 400, 340],
+ type: 'bar'
+ },
+ {
+ name: '系统C',
+ data: [100, 200, 150, 600, 550, 200, 300, 200, 100, 300, 400, 340],
+ type: 'bar'
+ },
+ {
+ name: '系统D',
+ data: [400, 200, 150, 600, 100, 200, 300, 200, 100, 300, 550, 340],
+ type: 'bar'
+ },
+ {
+ name: '系统E',
+ data: [200, 100, 100, 200, 300, 400, 400, 200, 150, 600, 550, 340],
+ type: 'bar'
+ }
+ ]
+ };
+ getEchart(dom, op)
+ }
+ const getChartsPie = (id) => {
+ var dom = document.getElementById(id);
+ var op = {
+ title: {
+ text: '蒸发量'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ top: '5%',
+ left: 'center'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 1048, name: '系统A' },
+ { value: 735, name: '系统B' },
+ { value: 580, name: '系统C' },
+ { value: 484, name: '系统D' },
+ { value: 300, name: '系统E' }
+ ]
+ }
+ ]
+ };
+ getEchart(dom, op)
+ }
const getChartsZfl = (id, text) => {
var dom = document.getElementById(id);
var op = {
@@ -242,7 +355,8 @@ export default {
return {
...toRefs(state),
getChartsZfl,
- getEchart
+ getEchart,
+ getChartsBar
};
},
};
@@ -253,15 +367,45 @@ export default {
width: 100%;
height: 100%;
display: flex;
- flex-direction: column;
justify-content: space-between;
padding: 10px;
+ .left {
+ width: 50%;
+ height: 100%;
+ font-size: 20px;
+ >div {
+ width: 100%;
+ height: 48%;
+ // border: 1px solid red;
+ .echartDiv100 {
+ width: 100%;
+ height: 100% !important;
+ margin: 0 auto;
+ // border: 1px solid red;
+ }
+ }
+ }
+
+ .right {
+ width: 50%;
+ height: 100%;
+ font-size: 20px;
+ }
+
+ .gongshi {
+ width: 100%;
+ height: 100px;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ line-height: 50px;
+ }
+
.echartDiv100 {
width: 100%;
- height: 49%;
+ height: calc(50% - 50px);
margin: 0 auto;
// border: 1px solid red;
}
-}
-
+}
diff --git a/src/components/Gindex.vue b/src/components/Gindex.vue
index c0f38b1..9779bdc 100644
--- a/src/components/Gindex.vue
+++ b/src/components/Gindex.vue
@@ -6,45 +6,76 @@
-
-
径流系数
-
0.6
-
-
+
+
+
-
-
蒸腾量
-
32
-
%
+
+
+
+
-
-
COD
-
27
-
mg/L
+
+
+
+
-
-
氨氮
-
11
-
mg/L
+
+
+
+
-
-
Ss
-
6
-
mg/L
+
+
+
+
-
-
屋面温度 无绿化
-
23
-
℃
+
+
+
+
-
-
屋面温度 有绿化
-
19
-
℃
+
+
+
+
-
-
热岛消减率
-
21
-
%
+
+
+
+
@@ -103,29 +134,32 @@
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
-
>div {
width: 10%;
height: 80%;
border: 1px solid rgb(197, 195, 195);
display: flex;
- flex-direction: column;
- background:#d8e8f7;
+ background:#3CB6CC;
// align-items: center;
- justify-content: center;
+ justify-content: space-between;
text-align: center;
padding: 10px;
border-radius: 10px;
font-size: 20px;
- line-height: 45px;
+ // line-height: 45px;
+ color: #fff;
+ img {
+ width: 60px;
+ height: 60px;
+ }
}
}
}
}
}
.value {
- font-size: 38px;
- color: #1baeae;
+ font-size: 32px;
+ color: #02ffff;
font-weight: bold;
}
\ No newline at end of file
diff --git a/src/components/History.vue b/src/components/History.vue
index 37b0167..2bec40a 100644
--- a/src/components/History.vue
+++ b/src/components/History.vue
@@ -2,7 +2,7 @@
-
系统选择：
+
参数选择：
- 系统选择：
-
+ 参数选择：
+
@@ -81,37 +81,45 @@ export default {
{
id: "echart0",
title: "降水量-柱状图",
- legend: ["降水量", "数据2", "数据3"],
+ legend: [],
color: ["#6fdbce", "#f00", "#0000ff"],
}
],
fxOptions: [
{
value: "0",
- label: "降水量",
+ label: "径流系数",
},
{
value: "1",
- label: "系统A",
+ label: "蒸腾量",
},
{
value: "2",
- label: "系统B",
+ label: "COD",
},
{
value: "3",
- label: "系统C",
+ label: "氨氮",
},
{
value: "4",
- label: "系统D",
+ label: "SS",
},
{
value: "5",
- label: "系统E",
+ label: "屋面温度无绿化",
+ },
+ {
+ value: "6",
+ label: "屋面温度有绿化",
+ },
+ {
+ value: "7",
+ label: "热岛消减率",
},
],
- value1: "降水量",
+ value1: "0",
tableHeader: [
{
label: 1,
@@ -200,10 +208,19 @@ export default {
},
],
});
- onMounted(async () => {});
-
+ onMounted(async () => {
+ state.value1 = state.fxOptions[0];
+ console.log(123, state.value1)
+ state.listData[0].title = state.value1.label;
+ });
+ const changeValue = (data) => {
+ console.log('data', data);
+ console.log('selectItem', state.value1);
+ state.listData[0].title = state.value1.label;
+ }
return {
...toRefs(state),
+ changeValue
};
},
};
diff --git a/src/components/History2.vue b/src/components/History2.vue
index 9a79f30..702c6cb 100644
--- a/src/components/History2.vue
+++ b/src/components/History2.vue
@@ -2,13 +2,13 @@
- 系统选择：
-
+ 参数选择：
+
@@ -73,37 +73,37 @@ export default {
{
id: "echart0",
title: "降水量-柱状图",
- legend: ["降水量", "数据2"],
+ legend: [],
color: ["#6fdbce"],
},
],
fxOptions: [
{
value: "0",
- label: "降水量",
+ label: "区域面积",
},
{
value: "1",
- label: "系统A",
+ label: "液位",
},
{
value: "2",
- label: "系统B",
+ label: "渗透量",
},
{
value: "3",
- label: "系统C",
+ label: "COD",
},
{
value: "4",
- label: "系统D",
+ label: "氨氮",
},
{
value: "5",
- label: "系统E",
+ label: "SS",
},
],
- value1: "降水量",
+ value1: "0",
tableHeader: [
{
label: 1,
@@ -192,10 +192,19 @@ export default {
},
],
});
- onMounted(async () => {});
-
+ onMounted(async () => {
+ state.value1 = state.fxOptions[0];
+ console.log(123, state.value1)
+ state.listData[0].title = state.value1.label;
+ });
+ const changeValue = (data) => {
+ console.log('data', data);
+ console.log('selectItem', state.value1);
+ state.listData[0].title = state.value1.label;
+ }
return {
...toRefs(state),
+ changeValue
};
},
};
diff --git a/src/components/History3.vue b/src/components/History3.vue
index 78b7301..3edc490 100644
--- a/src/components/History3.vue
+++ b/src/components/History3.vue
@@ -2,13 +2,13 @@
- 系统选择：
-
+ 参数选择：
+
@@ -72,38 +72,54 @@ export default {
listData: [
{
id: "echart0",
- title: "降水量-柱状图",
- legend: ["降水量"],
+ title: "透水铺砖储水量-面积图",
+ legend: [],
color: ["#6fdbce"],
},
],
fxOptions: [
{
value: "0",
- label: "降水量",
+ label: "透水铺砖储水量",
},
{
value: "1",
- label: "系统A",
+ label: "透水铺砖表面温度",
},
{
value: "2",
- label: "系统B",
+ label: "热岛消减率",
},
{
value: "3",
- label: "系统C",
+ label: "孔隙率",
},
{
value: "4",
- label: "系统D",
+ label: "透水铺装面积",
},
{
value: "5",
- label: "系统E",
+ label: "入渗系统面积",
+ },
+ {
+ value: "6",
+ label: "透水系数",
+ },
+ {
+ value: "7",
+ label: "入渗系数",
+ },
+ {
+ value: "8",
+ label: "透水层厚度",
+ },
+ {
+ value: "9",
+ label: "渗透量",
},
],
- value1: "降水量",
+ value1: "",
tableHeader: [
{
label: 1,
@@ -192,10 +208,20 @@ export default {
},
],
});
- onMounted(async () => {});
+ onMounted(async () => {
+ state.value1 = state.fxOptions[0];
+ console.log(123, state.value1)
+ state.listData[0].title = state.value1.label;
+ });
+ const changeValue = (data) => {
+ console.log('data', data);
+ console.log('selectItem', state.value1);
+ state.listData[0].title = state.value1.label;
+ }
return {
...toRefs(state),
+ changeValue
};
},
};
diff --git a/src/components/History4.vue b/src/components/History4.vue
index 7bb985d..906f1f2 100644
--- a/src/components/History4.vue
+++ b/src/components/History4.vue
@@ -2,13 +2,13 @@
- 系统选择：
-
+ 参数选择：
+
@@ -74,38 +74,46 @@ export default {
listData: [
{
id: "echart0",
- title: "降水量-柱状图",
- legend: ["降水量"],
+ title: "",
+ legend: [],
color: ["#6fdbce"],
},
],
fxOptions: [
{
value: "0",
- label: "降水量",
+ label: "地块面积",
},
{
value: "1",
- label: "系统A",
+ label: "地块调蓄容积",
},
{
value: "2",
- label: "系统B",
+ label: "调蓄池液位",
},
{
value: "3",
- label: "系统C",
+ label: "溢流量",
},
{
value: "4",
- label: "系统D",
+ label: "COD",
},
{
value: "5",
- label: "系统E",
+ label: "氨氮",
+ },
+ {
+ value: "6",
+ label: "SS",
+ },
+ {
+ value: "7",
+ label: "地块剩余调蓄容积",
},
],
- value1: "降水量",
+ value1: "0",
tableHeader: [
{
label: 1,
@@ -194,10 +202,19 @@ export default {
},
],
});
- onMounted(async () => {});
-
+ onMounted(async () => {
+ state.value1 = state.fxOptions[0];
+ console.log(123, state.value1)
+ state.listData[0].title = state.value1.label;
+ });
+ const changeValue = (data) => {
+ console.log('data', data);
+ console.log('selectItem', state.value1);
+ state.listData[0].title = state.value1.label;
+ }
return {
...toRefs(state),
+ changeValue
};
},
};
diff --git a/src/components/History5.vue b/src/components/History5.vue
index 37b0167..e675859 100644
--- a/src/components/History5.vue
+++ b/src/components/History5.vue
@@ -2,13 +2,13 @@
- 系统选择：
-
+ 参数选择：
+
@@ -20,9 +20,7 @@
-
+
@@ -74,38 +72,38 @@ export default {
listData: [
{
id: "echart0",
- title: "降水量-柱状图",
- legend: ["降水量"],
+ title: "降雨量-柱状图",
+ legend: ["降雨量"],
color: ["#6fdbce"],
},
],
fxOptions: [
{
value: "0",
- label: "降水量",
+ label: "降雨量",
},
{
value: "1",
- label: "系统A",
+ label: "温度",
},
{
value: "2",
- label: "系统B",
+ label: "空气湿度",
},
{
value: "3",
- label: "系统C",
+ label: "蒸发量",
},
{
value: "4",
- label: "系统D",
+ label: "土壤湿度",
},
{
value: "5",
- label: "系统E",
+ label: "风速",
},
],
- value1: "降水量",
+ value1: "0",
tableHeader: [
{
label: 1,
@@ -194,10 +192,20 @@ export default {
},
],
});
- onMounted(async () => {});
+ onMounted(async () => {
+ state.value1 = state.fxOptions[0];
+ console.log(123, state.value1)
+ state.listData[0].title = state.value1.label;
+ });
+ const changeValue = (data) => {
+ console.log('data', data);
+ console.log('selectItem', state.value1);
+ state.listData[0].title = state.value1.label;
+ }
return {
...toRefs(state),
+ changeValue
};
},
};
diff --git a/src/components/Index.vue b/src/components/Index.vue
index 61df449..20df4c1 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -117,7 +117,7 @@ export default {
border: 1px solid rgb(197, 195, 195);
display: flex;
flex-direction: column;
- background:#d8e8f7;
+ background:#3CB6CC;
// align-items: center;
justify-content: center;
text-align: center;
@@ -126,6 +126,7 @@ export default {
font-size: 20px;
line-height: 40px;
margin: 10px 0;
+ color: #fff;
}
}
}
diff --git a/src/components/Report.vue b/src/components/Report.vue
index 3f3c010..9081f4c 100644
--- a/src/components/Report.vue
+++ b/src/components/Report.vue
@@ -46,29 +46,29 @@
-
-
-
-
-
- 未来7天预报
-
-
-
-
- {{ item.day }}{{ item.date }}
-
-
-
- 
-
-
- {{ item.high }}
- {{ item.low }}
-
+
+ 未来7天预报
+
+
+
+
+ {{ item.day }}{{ item.date }}
+
+
+
+
+
+
+ {{ item.high }}
+ {{ item.low }}
+
+
+
+
+
@@ -141,78 +141,269 @@ export default {
onMounted(async () => { getWeatherCharts() });
const getWeatherCharts = () => {
var dom = document.getElementById("echartDiv");
+ var weatherName = ["小雨","小雨","阴","小雨","多云","小雨","小雨"];
var op = {
- title: {
- text: '未来一周天气图'
- },
grid: {
- left: "3%", //画布左移位置
- right: '3%',
- top: "20%",
- width: "90%", //画布宽度
- height: "65%", //画布高度
+ left: '2%',
+ right: '2%',
+ bottom: '3%',
+ containLabel: true
},
tooltip: {
trigger: 'axis'
},
- legend: {},
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
+ legend: {
+ show: false
},
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 0,
+ end: 100
+ },
+ {
+ start: 0,
+ end: 100
+ }
+ ],
+ xAxis: [
+ // 日期
+ {
+ type: 'category',
+ boundaryGap: false,
+ position: 'top',
+ offset: 130,
+ zlevel: 100,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ formatter: [
+ '{a|{value}}'
+ ].join('\n'),
+ rich: {
+ a: {
+ // color: 'white',
+ fontSize: 18
+ }
+ }
+ },
+ nameTextStyle: {
+
+ },
+ data: ["25日","26日","27日","28日","29日","30日","31日"]
+ },
+ // 星期
+ {
+ type: 'category',
+ boundaryGap: false,
+ position: 'top',
+ offset: 110,
+ zlevel: 100,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ formatter: [
+ '{a|{value}}'
+ ].join('\n'),
+ rich: {
+ a: {
+ // color: 'white',
+ fontSize: 14
+ }
+ }
+ },
+ nameTextStyle: {
+ fontWeight: 'bold',
+ fontSize: 19
+ },
+ data: ["周一","周二","周三","周四","周五","周六","周日"]
+ },
+ // 天气图标
+ {
+ type: 'category',
+ boundaryGap: false,
+ position: 'top',
+ offset: 20,
+ zlevel: 100,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ formatter: function(value, index) {
+ return '{' + value + '| }\n{b|' + weatherName[value] + '}'
+ },
+ rich: {
+ 0: {
+ backgroundColor: {
+ // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
+ image: 'https://d.scggqx.com/forecast/img/小雨.png'
+ },
+ height: 40,
+ width: 40
+ },
+ 1: {
+ backgroundColor: {
+ // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
+ image: 'https://d.scggqx.com/forecast/img/小雨.png'
+ },
+ height: 40,
+ width: 40
+ },
+ 2: {
+ backgroundColor: {
+ // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
+ image: 'https://d.scggqx.com/forecast/img/阴.png'
+ },
+ height: 40,
+ width: 40
+ },
+ 3: {
+ backgroundColor: {
+ // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
+ image: 'https://d.scggqx.com/forecast/img/小雨.png'
+ },
+ height: 40,
+ width: 40
+ },
+ 4: {
+ backgroundColor: {
+ // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
+ image: 'https://d.scggqx.com/forecast/img/多云.png'
+ },
+ height: 40,
+ width: 40
+ },
+ 5: {
+ backgroundColor: {
+ // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
+ image: 'https://d.scggqx.com/forecast/img/小雨.png'
+ },
+ height: 40,
+ width: 40
+ },
+ 6: {
+ backgroundColor: {
+ // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
+ image: 'https://d.scggqx.com/forecast/img/小雨.png'
+ },
+ height: 40,
+ width: 40
+ },
+ b: {
+ // color: 'white',
+ fontSize: 12,
+ lineHeight: 30,
+ height: 20
+ }
+ }
+ },
+ nameTextStyle: {
+ fontWeight: 'bold',
+ fontSize: 19
+ },
+ // data: this.weatherdata.weather
+ //data: ["小雨","小雨","阴","小雨","多云","小雨","小雨"]
+ data: [0,1,2,3,4,5,6]
+ }
+ ],
yAxis: {
type: 'value',
+ show: false,
axisLabel: {
- formatter: '{value} °C'
+ formatter: '{value} °C',
+ color: 'white'
}
},
series: [
{
- name: '最高点',
+ name: '最高气温',
type: 'line',
- data: [10, 11, 13, 11, 12, 12, 9],
- markPoint: {
- data: [
- { type: 'max', name: 'Max' },
- { type: 'min', name: 'Min' }
- ]
+ data: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
+ symbol: 'emptyCircle',
+ symbolSize: 10,
+ showSymbol: true,
+ smooth: true,
+ itemStyle: {
+ normal: {
+ color: '#C95843'
+ }
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(255, 158, 68)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(255, 70, 131)'
+ }
+ ])
+ },
+ label: {
+ show: true,
+ position: 'top',
+ // color: 'white',
+ formatter: '{c} °C'
+ },
+ lineStyle: {
+ width: 1,
+ // color: 'white'
},
- markLine: {
- data: [{ type: 'average', name: 'Avg' }]
- }
},
{
- name: '最低点',
+ name: '最低气温',
type: 'line',
- data: [1, -2, 2, 5, 3, 2, 0],
- markPoint: {
- data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
+ data: ["13.4","12.8","13.5","12.5","12.4","13.2","13"],
+ symbol: 'emptyCircle',
+ symbolSize: 10,
+ showSymbol: true,
+ smooth: true,
+ itemStyle: {
+ normal: {
+ color: 'blue'
+ }
+ },
+ label: {
+ show: true,
+ position: 'bottom',
+ // color: 'white',
+ formatter: '{c} °C'
+ },
+ lineStyle: {
+ width: 1,
+ // color: 'white'
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(255, 158, 68)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(255, 70, 131)'
+ }
+ ])
},
- markLine: {
- data: [
- { type: 'average', name: 'Avg' },
- [
- {
- symbol: 'none',
- x: '90%',
- yAxis: 'max'
- },
- {
- symbol: 'circle',
- label: {
- position: 'start',
- formatter: 'Max'
- },
- type: 'max',
- name: '最高点'
- }
- ]
- ]
- }
}
]
- };
+ }
+
getEchart(dom, op)
}
const getEchart = (dom, op) => {
@@ -239,26 +430,28 @@ export default {
display: flex;
flex-direction: column;
padding: 10px;
-
+ justify-content: space-between;
// border-color: #5C8AB3;
.top-div {
width: 100%;
height: 35%;
- // border: 1px solid rgb(58, 152, 230);
+ //
display: flex;
justify-content: space-between;
- .left,
- .right {
- width: 49.8%;
- border: 1px solid rgb(58, 152, 230);
- padding: 20px;
+ .left {
+ width: 22%;
+
+ padding: 10px;
+ height: 100%;
+ box-shadow: 0 0 8px #3CB6CC inset;
+ border-radius: 5px;
}
h1 {
width: 100%;
text-align: center;
- font-size: 30px;
+ font-size: 26px;
}
.flex1 {
@@ -283,42 +476,47 @@ export default {
ul {
display: flex;
justify-content: space-between;
- margin-top: 15px;
-
+
+ flex-wrap: wrap;
li {
- padding: 10px;
- font-size: 22px;
- width: 16%;
+ padding: 5px;
+ font-size: 16px;
+ width: 33%;
text-align: center;
}
}
}
- .middle-div {
- width: 100%;
- height: 25%;
- // border: 1px solid rgb(58, 152, 230);
- font-size: 26px;
+ .right {
+ width: 77%;
+ box-shadow: 0 0 8px #3CB6CC inset;
+ border-radius: 5px;
+
padding: 20px;
h2 {
width: 100%;
text-align: center;
margin-bottom: 10px;
- font-size: 30px;
+ font-size: 26px;
}
-
+ .card {
+ height: calc(100% - 50px);
+ }
+ .flex
.one-day {
width: 13%;
- height: 120px;
+ height: 100%;
display: flex;
flex-direction: column;
- border: 1px solid rgb(58, 152, 230);
+ // box-shadow: 0 0 8px #3CB6CC inset;
+ border-radius: 5px;
justify-content: center;
align-items: center;
border-radius: 5px;
line-height: 40px;
-
+ background: #3CB6CC;
+ color: #fff;
.weather-icon {
display: inline-block;
height: 46px;
@@ -334,12 +532,13 @@ export default {
}
}
}
-
.bottom-div {
width: 100%;
- height: 40%;
- // border: 1px solid red;
-
+ height: 63%;
+ box-shadow: 0 0 8px #3CB6CC inset;
+ border-radius: 5px;
+ padding: 20px;
+
.echartDiv100 {
width: 100%;
height: 100%;
diff --git a/src/components/Sindex.vue b/src/components/Sindex.vue
index 0d30e43..f2f5431 100644
--- a/src/components/Sindex.vue
+++ b/src/components/Sindex.vue
@@ -6,62 +6,97 @@
-
-
透水铺砖储水量
-
200
-
m³
+
+
+
+
-
-
透水铺砖表面温度
-
16.5
-
℃
+
+
+
+
-
-
热岛消减率
-
19.6
-
%
+
+
+
-
-
孔隙率
-
10
-
%
+
+
+
+
+
-
透水铺装面积
-
500
-
㎡
+
+
-
入渗系统面积
-
437
-
㎡
+
+
-
透水系数
-
10
-
mm/min
+
+
-
入渗系数
-
1.3
-
mm/min
+
+
-
透水层厚度
-
300
-
mm
+
+
-
渗透量
-
362
-
m³
+
+
+
@@ -112,21 +147,23 @@
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
-
+
>div {
width: 24%;
height: 80%;
border: 1px solid rgb(197, 195, 195);
display: flex;
- flex-direction: column;
- background:#d8e8f7;
+ // flex-direction: column;
+ background:#3CB6CC;
// align-items: center;
- justify-content: center;
+ justify-content: space-around;
text-align: center;
padding: 10px;
border-radius: 10px;
font-size: 20px;
line-height: 45px;
+ color: #fff;
+
}
}
}
@@ -147,21 +184,25 @@
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
-
+ img {
+ height: 80px;
+ width: 80px;
+ }
>div {
width: 40%;
height: 30%;
border: 1px solid rgb(197, 195, 195);
display: flex;
flex-direction: column;
- background:#d8e8f7;
- // align-items: center;
+ background:#3CB6CC;
+ align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 10px;
font-size: 20px;
line-height: 45px;
+ color: #fff;
}
}
h2 {
@@ -173,8 +214,8 @@
}
}
.value {
- font-size: 38px;
- color: #1baeae;
+ font-size: 32px;
+ color: #0af1f1;
font-weight: bold;
}
\ No newline at end of file
diff --git a/src/components/Windex.vue b/src/components/Windex.vue
index d7b75ab..effaa35 100644
--- a/src/components/Windex.vue
+++ b/src/components/Windex.vue
@@ -6,36 +6,56 @@
+
-
降雨量
-
12
-
mm/s
+
+
-
温度
-
23
-
℃
+
+
-
空气湿度
-
22
-
%
+
+
-
蒸发量
-
9
-
mm
+
+
-
土壤湿度
-
56
-
%
+
+
-
风速
-
3
-
m/s
+
+
+
@@ -90,21 +110,24 @@
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
-
+ img {
+ height: 80px;
+ }
>div {
width: 40%;
height: 30%;
border: 1px solid rgb(197, 195, 195);
display: flex;
flex-direction: column;
- background:#d8e8f7;
- // align-items: center;
+ background:#3CB6CC;
+ align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
border-radius: 10px;
font-size: 20px;
line-height: 45px;
+ color: #fff;
}
}
}
@@ -112,7 +135,7 @@
}
.value {
font-size: 38px;
- color: #1baeae;
+ color: #02ffff;
font-weight: bold;
}
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a4499e2..e6fe4db 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -8,13 +8,14 @@
{{ item.name }}
-
-
{{ item.parms && item.parms[0].name }}
-
{{ item.parms && item.parms[0].value }}
+
+
{{ one.name }}
- {{ item.parms && item.parms[0].dw }}
+ {{ one.value }}
+ {{ one.dw }}
-
+
+
@@ -36,14 +37,22 @@ export default {
url: 'page',
parms: [{
name: '节水量',
- value: '4.00',
+ value: '4',
dw: 'm³'
+ },{
+ name: '节碳量',
+ value: '0.67',
+ dw: 'kg'
}]
}, {
name: '屋顶绿化系统',
url: 'green',
parms: [{
- name: '热岛消减率',
+ name: '径流系数',
+ value: '0.6',
+ dw: ''
+ },{
+ name: '热岛减率',
value: '21',
dw: '%'
}]
@@ -51,7 +60,11 @@ export default {
name: '生物滞留&净化系统',
url: 'biology',
parms: [{
- name: '液位',
+ name: '区域面积',
+ value: '75',
+ dw: '㎡'
+ },{
+ name: '滞留系统液位',
value: '323',
dw: 'mm'
}]
@@ -62,6 +75,10 @@ export default {
name: '热岛消减率',
value: '19.6',
dw: '%'
+ },{
+ name: '孔隙率',
+ value: '10',
+ dw: '%'
}]
}, {
name: '调蓄系统&逆流监测系统',
@@ -70,14 +87,22 @@ export default {
name: '溢流量',
value: '1.25',
dw: 'L/s'
- }]
+ },{
+ name: '氨氮',
+ value: '12.5',
+ dw: 'mg/L'
+ },]
}, {
name: '气象监测系统',
url: 'weather',
parms: [{
- name: '天气',
- value: '晴',
- dw: ''
+ name: '温度',
+ value: '23',
+ dw: '℃'
+ },{
+ name: '空气湿度',
+ value: '22',
+ dw: '%'
}]
}]
})
@@ -100,7 +125,7 @@ export default {
.home {
width: 100%;
height: 100%;
- background: url(../assets/index-bg1.jpg) left top no-repeat;
+ background: url(../assets/index-bg.jpg) left top no-repeat;
background-size: 100% 100%;
// border: 1px solid rgb(180, 20, 180);
display: flex;
@@ -169,7 +194,7 @@ export default {
justify-content: space-between;
box-shadow: 0 0 8px #99ACB0 inset;
cursor: pointer;
- color: #fff;
+ // color: #fff;
.one-card-left {
width: 80%;
padding: 10px;
@@ -219,18 +244,18 @@ export default {
background: linear-gradient(to right, #c3d4cb, #81CFA3);
}
.one-card-right {
- width: 20%;
- color: #043b8d;
+ width: 40%;
+ color: #3E9537;
+ padding: 10px;
.parm {
display: flex;
flex-direction: column;
- height: 100%;
- padding: 10px;
- align-items: center;
+ line-height: 30px;
+ align-items: start;
justify-content: space-around;
- .font28 {
- font-size: 28px;
- color: #0866f3;
+ .font24 {
+ font-size: 24px;
+ color: #00646C;
font-size: 800;
}
}
+