@ued_fpi/data-visual
Version:
<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />
216 lines (213 loc) • 6.97 kB
JavaScript
import { defineComponent, ref, onMounted, openBlock, createElementBlock, createElementVNode, normalizeStyle, toDisplayString, createVNode, unref, withCtx, Fragment, renderList } from 'vue';
import _imports_0 from './images/blue_2.svg.mjs';
import _imports_1 from './images/blue_1.svg.mjs';
import { FpiElRolling } from '@ued_fpi/element-plus-expand';
import requestControl from '../../service/request.mjs';
const _hoisted_1 = { class: "dv-ipes-airQuality-management" };
const _hoisted_2 = { class: "mainBox" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 年度空气质量考核 ", -1);
const _hoisted_4 = { class: "main-container" };
const _hoisted_5 = { class: "main-left" };
const _hoisted_6 = /* @__PURE__ */ createElementVNode("img", {
class: "img_one",
src: _imports_0
}, null, -1);
const _hoisted_7 = /* @__PURE__ */ createElementVNode("img", {
class: "img_two",
src: _imports_1
}, null, -1);
const _hoisted_8 = { class: "legendBox" };
const _hoisted_9 = { class: "item" };
const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", { class: "name" }, "优良率", -1);
const _hoisted_11 = { class: "item" };
const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", { class: "name" }, "目标", -1);
const _hoisted_13 = { class: "value value2" };
const _hoisted_14 = { class: "tableList" };
const _hoisted_15 = /* @__PURE__ */ createElementVNode("div", { class: "title-box" }, [
/* @__PURE__ */ createElementVNode("div", { class: "th" }, " 因子名 "),
/* @__PURE__ */ createElementVNode("div", { class: "th" }, " 均值/目标值 ")
], -1);
const _hoisted_16 = { class: "tr" };
const _hoisted_17 = { class: "tr" };
const _hoisted_18 = { class: "value1" };
const _hoisted_19 = { class: "value2" };
const __default__ = {
name: "DvIpesAirQualityStandard",
title: "空气质量达标"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
width: { default: "100%" },
height: { default: 96 }
},
setup(__props) {
const airQualityObj = ref({
time: "",
aqiValue: null,
aqiColor: "",
aqiLevel: "",
mainPolluter: "",
yearRatio: "0",
goal: 0
});
async function getAqmsManage() {
try {
const res = await requestControl({
method: "get",
url: "/ipes-data-aggregation-server/api/v1/env-protection/aqms-manage"
});
const {
aqiValue,
aqiColor,
aqiLevel,
mainPolluter,
yearRatio,
goal,
time
} = res.data;
airQualityObj.value = {
aqiValue,
aqiColor,
aqiLevel,
mainPolluter,
yearRatio,
goal,
time
};
drawChart([
["优良率", Number(yearRatio)],
["目标", Number(100 - Number(yearRatio))]
]);
} catch (error) {
console.log(error);
}
}
const factorList = ref([]);
async function getEnvCode() {
try {
const res = await requestControl({
method: "get",
url: "/ipes-data-aggregation-server/api/v1/env-protection/aqi/year"
});
factorList.value = res.data;
} catch (error) {
console.log(error);
}
}
const kqzhChart = ref(null);
function drawChart(data) {
const Highcharts = window.Highcharts;
Highcharts && Highcharts.chart(kqzhChart.value, {
credits: {
enabled: false
// 隐藏版权信息
},
chart: {
type: "pie",
options3d: {
enabled: true,
alpha: 64,
// 内旋转角度
beta: 0
// 外旋转角度
},
backgroundColor: "rgba(0,0,0,0)"
},
title: {
text: "",
style: {
fontSize: "14px",
color: "#fff"
// fontFamily: 'shzhjt',
},
align: "left"
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
size: "67px",
depth: 10,
// 饼图厚度
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [
{
name: "年度空气质量",
data,
colors: ["#00DD78", "#8FAFC7"]
}
],
legend: {
enabled: false
}
});
}
onMounted(() => {
getAqmsManage();
getEnvCode();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
_hoisted_3,
createElementVNode("div", _hoisted_4, [
createElementVNode("div", _hoisted_5, [
createElementVNode("div", {
ref_key: "kqzhChart",
ref: kqzhChart,
class: "kqzhChart"
}, null, 512),
_hoisted_6,
_hoisted_7,
createElementVNode("div", _hoisted_8, [
createElementVNode("div", _hoisted_9, [
_hoisted_10,
createElementVNode("span", {
class: "value",
style: normalizeStyle({ color: airQualityObj.value.yearRatio ? "#00DD78" : "" })
}, toDisplayString(airQualityObj.value.yearRatio || "--") + "%", 5)
]),
createElementVNode("div", _hoisted_11, [
_hoisted_12,
createElementVNode("span", _hoisted_13, toDisplayString(airQualityObj.value.goal || "--") + "%", 1)
])
])
]),
createElementVNode("div", _hoisted_14, [
_hoisted_15,
createVNode(unref(FpiElRolling), {
class: "main",
direction: "y",
time: 15
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(factorList.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "list"
}, [
createElementVNode("div", _hoisted_16, toDisplayString(item.factorName), 1),
createElementVNode("div", _hoisted_17, [
createElementVNode("span", _hoisted_18, toDisplayString(item.factorValue || "--"), 1),
createElementVNode("span", _hoisted_19, "/ " + toDisplayString(item.targetValue || "--"), 1)
])
]);
}), 128))
]),
_: 1
})
])
])
])
]);
};
}
});
export { _sfc_main as default };