|
@@ -54,6 +54,7 @@
|
|
|
</div>
|
|
|
</van-tab>
|
|
|
</van-tabs>
|
|
|
+ <van-loading class="temp-loading" v-if="showLoading"> </van-loading>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -85,6 +86,7 @@ export default defineComponent({
|
|
|
id: 0,
|
|
|
name: "CO₂",
|
|
|
funcid: "CO2",
|
|
|
+ unit: "ppm",
|
|
|
text: [
|
|
|
"CO₂,一种无色无味气体",
|
|
|
"CO₂的标准为1000ppm",
|
|
@@ -103,6 +105,7 @@ export default defineComponent({
|
|
|
{
|
|
|
id: 1,
|
|
|
name: "PM2.5",
|
|
|
+ unit: "ug/m³",
|
|
|
funcid: "PM2d5",
|
|
|
options: null,
|
|
|
text: [
|
|
@@ -119,6 +122,7 @@ export default defineComponent({
|
|
|
{
|
|
|
id: 2,
|
|
|
name: "甲醛",
|
|
|
+ unit: "mg/㎡",
|
|
|
options: null,
|
|
|
funcid: "HCHO",
|
|
|
text: [
|
|
@@ -135,6 +139,7 @@ export default defineComponent({
|
|
|
{
|
|
|
id: 3,
|
|
|
name: "温湿度",
|
|
|
+ unit: "%",
|
|
|
funcid: "Tdb,RH",
|
|
|
options: null,
|
|
|
text: [
|
|
@@ -159,6 +164,7 @@ export default defineComponent({
|
|
|
const activeItem: any = [];
|
|
|
const proxyData = reactive({
|
|
|
active: "",
|
|
|
+ showLoading: false,
|
|
|
activeItem: activeItem,
|
|
|
titleList: titleList,
|
|
|
query: props.query ? props.query : query,
|
|
@@ -167,17 +173,19 @@ export default defineComponent({
|
|
|
* 加载loading
|
|
|
*/
|
|
|
loadingStart() {
|
|
|
- Toast.loading({
|
|
|
- duration: 0, // 持续展示 toast
|
|
|
- forbidClick: true,
|
|
|
- message: "加载中...",
|
|
|
- });
|
|
|
+ // Toast.loading({
|
|
|
+ // duration: 0, // 持续展示 toast
|
|
|
+ // forbidClick: true,
|
|
|
+ // message: "加载中...",
|
|
|
+ // });
|
|
|
+ proxyData.showLoading = true;
|
|
|
},
|
|
|
/**
|
|
|
* 结束
|
|
|
*/
|
|
|
loadinngEnd() {
|
|
|
- Toast.clear();
|
|
|
+ // Toast.clear();
|
|
|
+ proxyData.showLoading = false;
|
|
|
},
|
|
|
/**
|
|
|
* 设置当前选中的tab
|
|
@@ -204,8 +212,10 @@ export default defineComponent({
|
|
|
// 查询echarts图表
|
|
|
queryAllData() {
|
|
|
if (proxyData.activeItem.funcid) {
|
|
|
+ // debugger;
|
|
|
let funcid = proxyData.activeItem.funcid;
|
|
|
proxyData.loadingStart();
|
|
|
+ // proxyData.showLoading = true;
|
|
|
if (funcid === "Tdb,RH") {
|
|
|
// 两条线的 时候
|
|
|
proxyData.formatTowOptions(funcid);
|
|
@@ -247,6 +257,7 @@ export default defineComponent({
|
|
|
})
|
|
|
.catch((error: any) => {
|
|
|
proxyData.loadinngEnd();
|
|
|
+ // proxyData.showLoading = false;
|
|
|
});
|
|
|
},
|
|
|
/**
|
|
@@ -318,6 +329,7 @@ export default defineComponent({
|
|
|
proxyData.activeItem.options = null;
|
|
|
let { chartData, chartMax } = await proxyData.getData(funcid);
|
|
|
proxyData.loadinngEnd();
|
|
|
+ // proxyData.showLoading = false;
|
|
|
let seriesData: any = chartData.map((item: any) => {
|
|
|
return item.sales;
|
|
|
});
|
|
@@ -331,9 +343,10 @@ export default defineComponent({
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
},
|
|
|
+
|
|
|
grid: {
|
|
|
- top: 20,
|
|
|
- left: 5,
|
|
|
+ top: 25,
|
|
|
+ left: 10,
|
|
|
right: 20,
|
|
|
bottom: 20,
|
|
|
containLabel: true,
|
|
@@ -358,7 +371,19 @@ export default defineComponent({
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
+ name: `单位:(${proxyData.activeItem.unit})`,
|
|
|
type: "value",
|
|
|
+ nameGap: 12, // y轴name与横纵坐标轴线的间距
|
|
|
+ // nameLocation: "left", // y轴name处于y轴的什么位置
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#9FA9BC",
|
|
|
+ padding:
|
|
|
+ proxyData.activeItem.name == "PM2.5"
|
|
|
+ ? [0, 25, 0, 55]
|
|
|
+ : [0, 25, 0, 25],
|
|
|
+ // margin : [5, 0, 0, -20],
|
|
|
+ },
|
|
|
+
|
|
|
// max: chartMax,
|
|
|
axisTick: {
|
|
|
show: false,
|
|
@@ -383,7 +408,7 @@ export default defineComponent({
|
|
|
series: [
|
|
|
{
|
|
|
markLine:
|
|
|
- max && chartMax && max >= chartMax
|
|
|
+ max && chartMax && max >= chartMax
|
|
|
? {
|
|
|
symbol: "none",
|
|
|
data: [
|
|
@@ -412,7 +437,7 @@ export default defineComponent({
|
|
|
},
|
|
|
}
|
|
|
: {},
|
|
|
- name: "CO₂",
|
|
|
+ name: proxyData.activeItem.name,
|
|
|
type: "line",
|
|
|
smooth: true,
|
|
|
symbol: "circle",
|
|
@@ -518,13 +543,13 @@ export default defineComponent({
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
- name: "℃",
|
|
|
+ name: "单位:℃",
|
|
|
type: "value",
|
|
|
nameGap: 12, // y轴name与横纵坐标轴线的间距
|
|
|
// nameLocation: "left", // y轴name处于y轴的什么位置
|
|
|
nameTextStyle: {
|
|
|
color: "#9FA9BC",
|
|
|
- padding : [0, 25, 0, 0],
|
|
|
+ padding: [0, 25, 0, 15],
|
|
|
// margin : [5, 0, 0, -20],
|
|
|
},
|
|
|
axisTick: {
|
|
@@ -547,11 +572,11 @@ export default defineComponent({
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: "% ",
|
|
|
+ name: "单位:%",
|
|
|
nameGap: 12, // y轴name与横纵坐标轴线的间距
|
|
|
nameTextStyle: {
|
|
|
color: "#9FA9BC",
|
|
|
- padding : [0, 0, 0, 40],
|
|
|
+ padding: [0, 0, 0, 10],
|
|
|
},
|
|
|
type: "value",
|
|
|
axisTick: {
|