wangqiujuan0808
/
hsgy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页数据value字体

dev_zt
cc 2023-11-01 12:28:44 +00:00
parent 11f3a8db3c
commit e268654151
13 changed files with 346 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
src/components/BarEchart1.vue Normal file
View File

@ -0,0 +1,264 @@
<template>
<div class="echart-div">
<div class="top-title">
<div class="title">{{echartData.title}}</div>
</div>
<div class="echart" :id="echartData.id">
</div>
</div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import moment from "moment";
import { useStore } from "vuex";
import * as echarts from "echarts";
import bus from '../utils/bus.js'
export default {
name: "LineEchart",
props: {
echartData: Object
},
setup(props) {
const store = useStore();
let myChart = null;
let data = {};
const state = reactive({
});
onMounted(() => {
bus.on('foo', e => {
console.log(e)
getEchart();
})
getEchart();
});
const getEchart = () => {
if (store.state.selectDate === 1) {
data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
],
Values: [
2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 8.3, 5, 4, 5, 6, 7,
],
type: ["bar"],
};
} else if (store.state.selectDate === 2) {
data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
],
Values: [
2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7
],
type: ["bar"],
};
} else if (store.state.selectDate === 0) {
var data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"00",
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
],
Values: [
2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
2.3, 5.3, 8.3, 5, 4, 5, 6, 7,
],
type: ["bar"],
};
}
let dom = document.getElementById(props.echartData.id);
if (dom) {
myChart = echarts.init(dom);
loadlineChart(myChart, data);
}
};
const loadlineChart = (myChart, data) => {
console.log(data);
var option = {
grid: {
left: "8%", //画布左移位置
top: "10",
width: "90%", //画布宽度
height: "75%", //画布高度
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
axisLabel: {
margin: 10, //X轴标签与轴线之间的距离
interval: 0, //X轴0强制显示所有标签，1，隔一个显示
rotate: -60,
textStyle: {
color: "#303133", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
axisLine: {
lineStyle: {
color: "#dfe4ed", //X轴线颜色
},
},
axisTick: {
show: false, //X轴刻度线隐藏
},
data: data.xData,
},
yAxis: {
type: "value",
axisLabel: {
interval: 0, //X轴0强制显示所有标签，1，隔一个显示
textStyle: {
color: "#303133", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
axisTick: {
show: false, //X轴刻度线隐藏
},
axisLine: {
lineStyle: {
color: "#dfe4ed", //y轴线颜色
},
},
// 网格线
splitLine: {
show: true,
lineStyle: {
color: ["#dfe4ed"],
width: 1,
type: "dotted",
},
},
},
series: [
{
name: data.legend[0],
data: data.Values,
type: data.type[0],
symbolSize: 8,
barWidth: "10",
barGap: "20%",
itemStyle: {
normal: {
color: data.color[0],
lineStyle: {
color: data.color[0],
},
},
},
}
],
};
myChart.setOption(option);
};
return {
...toRefs(state),
getEchart,
loadlineChart
};
},
};
</script>
<style lang="scss" scoped>
.echart-div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.top-title {
height: 10%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.title {
border-left: 3px solid #5dcbed;
padding-left: 10px;
}
}
.echart {
height: 85%;
width: 100%;
#myChart {
width: 100%;
height: 100%;
}
}
}
</style>

17
src/components/Bindex.vue
View File

@ -8,32 +8,32 @@
<div class="one-card-content">
<div>
<p>生物滞留区域面积</p>
<font class="font30">75</font>
<font class="value">75</font>
<font>㎡</font>
</div>
<div>
<p>滞留系统液位</p>
<font class="font30">323</font>
<font class="value">323</font>
<font>mm</font>
</div>
<div>
<p>渗透量</p>
<font class="font30">1356</font>
<font class="value">1356</font>
<font>m³</font>
</div>
<div>
<p>COD</p>
<font class="font30">19</font>
<font class="value">19</font>
<font>mg/L</font>
</div>
<div>
<p>氨氮</p>
<font class="font30">8</font>
<font class="value">8</font>
<font>mg/L</font>
</div>
<div>
<p>SS</p>
<font class="font30">9</font>
<font class="value">9</font>
<font>mg/L</font>
</div>
</div>
@ -110,4 +110,9 @@
}
}
}
.value {
font-size: 38px;
color: #1baeae;
font-weight: bold;
}
</style>

21
src/components/Cindex.vue
View File

@ -8,42 +8,42 @@
<div class="one-card-content">
<div>
<p>地块面积</p>
<font class="font30">730</font>
<font class="value">730</font>
<font>㎡</font>
</div>
<div>
<p>地块调蓄容积</p>
<font class="font30">500</font>
<font class="value">500</font>
<font>m³</font>
</div>
<div>
<p>调蓄池液位</p>
<font class="font30">3.6</font>
<font class="value">3.6</font>
<font>m</font>
</div>
<div>
<p>溢流量</p>
<font class="font30"> 1.25</font>
<font class="value"> 1.25</font>
<font>L/s</font>
</div>
<div>
<p>COD</p>
<font class="font30">8</font>
<font class="value">8</font>
<font>mg/L</font>
</div>
<div>
<p>氨氮</p>
<font class="font30">12.5</font>
<font class="value">12.5</font>
<font>mg/L</font>
</div>
<div>
<p>SS</p>
<font class="font30">20.7</font>
<font class="value">20.7</font>
<font>mg/L</font>
</div>
<div>
<p>地块剩余调蓄容积</p>
<font class="font30">316</font>
<font class="value">316</font>
<font>m³</font>
</div>
</div>
@ -122,4 +122,9 @@
}
}
}
.value {
font-size: 38px;
color: #1baeae;
font-weight: bold;
}
</style>

21
src/components/Gindex.vue
View File

@ -8,42 +8,42 @@
<div class="one-card-content">
<div>
<p>径流系数</p>
<font class="font30">0.6</font>
<font class="value">0.6</font>
<font>-</font>
</div>
<div>
<p>蒸腾量</p>
<font class="font30">32</font>
<font class="value">32</font>
<font>%</font>
</div>
<div>
<p>COD</p>
<font class="font30">27</font>
<font class="value">27</font>
<font>mg/L</font>
</div>
<div>
<p>氨氮</p>
<font class="font30">11</font>
<font class="value">11</font>
<font>mg/L</font>
</div>
<div>
<p>Ss</p>
<font class="font30">6</font>
<font class="value">6</font>
<font>mg/L</font>
</div>
<div>
<p>屋面温度 无绿化</p>
<font class="font30">23</font>
<font class="value">23</font>
<font>℃</font>
</div>
<div>
<p>屋面温度 有绿化</p>
<font class="font30">19</font>
<font class="value">19</font>
<font>℃</font>
</div>
<div>
<p>热岛减率</p>
<font class="font30">21</font>
<font class="value">21</font>
<font>%</font>
</div>
</div>
@ -122,4 +122,9 @@
}
}
}
.value {
font-size: 38px;
color: #1baeae;
font-weight: bold;
}
</style>

5
src/components/Hindex.vue
View File

@ -171,4 +171,9 @@
}
}
}
.value {
font-size: 38px;
color: #1baeae;
font-weight: bold;
}
</style>

6
src/components/History1.vue
View File

@ -78,6 +78,12 @@ export default {
legend: ["降水量"],
color: ["#6fdbce"],
},
{
id: "echart1",
title: "降水量-柱状图",
legend: ["降水量"],
color: ["#6fdbce"],
}
],
fxOptions: [
{

25
src/components/Sindex.vue
View File

@ -8,22 +8,22 @@
<div class="one-card-content">
<div>
<p>透水铺砖储水量</p>
<font class="font30">200</font>
<font class="value">200</font>
<font>m³</font>
</div>
<div>
<p>透水铺砖表面温度</p>
<font class="font30">16.5</font>
<font class="value">16.5</font>
<font>℃</font>
</div>
<div>
<p>热岛消减率</p>
<font class="font30">19.6</font>
<font class="value">19.6</font>
<font>%</font>
</div>
<div>
<p>孔隙率</p>
<font class="font30">10</font>
<font class="value">10</font>
<font>%</font>
</div>
</div>
@ -34,32 +34,32 @@
<div class="one-card-content">
<div>
<p>透水铺装面积</p>
<font class="font30">500</font>
<font class="value">500</font>
<font>㎡</font>
</div>
<div>
<p>入渗系统面积</p>
<font class="font30">437</font>
<font class="value">437</font>
<font>㎡</font>
</div>
<div>
<p>透水系数</p>
<font class="font30">10</font>
<font class="value">10</font>
<font>mm/min</font>
</div>
<div>
<p>入渗系数</p>
<font class="font30">1.3</font>
<font class="value">1.3</font>
<font>mm/min</font>
</div>
<div>
<p>透水层厚度</p>
<font class="font30">300</font>
<font class="value">300</font>
<font>mm</font>
</div>
<div>
<p>渗透量</p>
<font class="font30">362</font>
<font class="value">362</font>
<font>m³</font>
</div>
</div>
@ -172,4 +172,9 @@
}
}
}
.value {
font-size: 38px;
color: #1baeae;
font-weight: bold;
}
</style>

17
src/components/Windex.vue
View File

@ -8,32 +8,32 @@
<div class="one-card-content">
<div>
<p>降雨量</p>
<font class="font30">12</font>
<font class="value">12</font>
<font>mm/s</font>
</div>
<div>
<p>温度</p>
<font class="font30">23</font>
<font class="value">23</font>
<font>℃</font>
</div>
<div>
<p>空气湿度</p>
<font class="font30">22</font>
<font class="value">22</font>
<font>%</font>
</div>
<div>
<p>蒸发量</p>
<font class="font30">9</font>
<font class="value">9</font>
<font>mm</font>
</div>
<div>
<p>土壤湿度</p>
<font class="font30">56</font>
<font class="value">56</font>
<font>%</font>
</div>
<div>
<p>风速</p>
<font class="font30">3</font>
<font class="value">3</font>
<font>m/s</font>
</div>
</div>
@ -110,4 +110,9 @@
}
}
}
.value {
font-size: 38px;
color: #1baeae;
font-weight: bold;
}
</style>

2
src/views/Biology.vue
View File

@ -17,7 +17,7 @@ import Menus from "@/components/Menus.vue";
import Bindex from "@/components/Bindex.vue";
import Zhibiao from "@/components/Zhibiao2.vue";
import Analyse from "@/components/Ganalyse2.vue";
import History from "@/components/History.vue";
import History from "@/components/History2.vue";
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
export default {
name: 'weather',

4
src/views/Chuxu.vue
View File

@ -15,9 +15,9 @@
<script>
import Menus from "@/components/Menus.vue";
import Cindex from "@/components/Cindex.vue";
import Zhibiao from "@/components/Zhibiao.vue";
import Zhibiao from "@/components/Zhibiao4.vue";
import Ganalyse from "@/components/Ganalyse4.vue";
import History from "@/components/History.vue";
import History from "@/components/History4.vue";
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
export default {
name: 'weather',

2
src/views/Green.vue
View File

@ -17,7 +17,7 @@ import Menus from "@/components/Menus.vue";
import Gindex from "@/components/Gindex.vue";
import Zhibiao from "@/components/Zhibiao1.vue";
import Ganalyse from "@/components/Ganalyse1.vue";
import History from "@/components/History.vue";
import History from "@/components/History1.vue";
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
export default {
name: 'weather',

4
src/views/Shentou.vue
View File

@ -15,9 +15,9 @@
<script>
import Menus from "@/components/Menus.vue";
import Sindex from "@/components/Sindex.vue";
import Zhibiao from "@/components/Zhibiao.vue";
import Zhibiao from "@/components/Zhibiao3.vue";
import Analyse from "@/components/Ganalyse3.vue";
import History from "@/components/History.vue";
import History from "@/components/History3.vue";
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
export default {
name: 'weather',

2
src/views/Weather.vue
View File

@ -17,7 +17,7 @@ import Menus from "@/components/Menus.vue";
import Windex from "@/components/Windex.vue";
import Report from "@/components/Report.vue";
import Analyse from "@/components/Ganalyse5.vue";
import History from "@/components/History.vue";
import History from "@/components/History5.vue";
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
export default {
name: 'weather',