@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" />
220 lines (215 loc) • 7.14 kB
JavaScript
'use strict';
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const blue_2 = require('./images/blue_2.svg.js');
const blue_1 = require('./images/blue_1.svg.js');
const elementPlusExpand = require('@ued_fpi/element-plus-expand');
const request = require('../../service/request.js');
const _hoisted_1 = { class: "dv-ipes-airQuality-management" };
const _hoisted_2 = { class: "mainBox" };
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 年度空气质量考核 ", -1);
const _hoisted_4 = { class: "main-container" };
const _hoisted_5 = { class: "main-left" };
const _hoisted_6 = /* @__PURE__ */ vue.createElementVNode("img", {
class: "img_one",
src: blue_2.default
}, null, -1);
const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("img", {
class: "img_two",
src: blue_1.default
}, null, -1);
const _hoisted_8 = { class: "legendBox" };
const _hoisted_9 = { class: "item" };
const _hoisted_10 = /* @__PURE__ */ vue.createElementVNode("span", { class: "name" }, "优良率", -1);
const _hoisted_11 = { class: "item" };
const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("span", { class: "name" }, "目标", -1);
const _hoisted_13 = { class: "value value2" };
const _hoisted_14 = { class: "tableList" };
const _hoisted_15 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title-box" }, [
/* @__PURE__ */ vue.createElementVNode("div", { class: "th" }, " 因子名 "),
/* @__PURE__ */ vue.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__ */ vue.defineComponent({
...__default__,
props: {
width: { default: "100%" },
height: { default: 96 }
},
setup(__props) {
const airQualityObj = vue.ref({
time: "",
aqiValue: null,
aqiColor: "",
aqiLevel: "",
mainPolluter: "",
yearRatio: "0",
goal: 0
});
async function getAqmsManage() {
try {
const res = await request.default({
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 = vue.ref([]);
async function getEnvCode() {
try {
const res = await request.default({
method: "get",
url: "/ipes-data-aggregation-server/api/v1/env-protection/aqi/year"
});
factorList.value = res.data;
} catch (error) {
console.log(error);
}
}
const kqzhChart = vue.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
}
});
}
vue.onMounted(() => {
getAqmsManage();
getEnvCode();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
_hoisted_3,
vue.createElementVNode("div", _hoisted_4, [
vue.createElementVNode("div", _hoisted_5, [
vue.createElementVNode("div", {
ref_key: "kqzhChart",
ref: kqzhChart,
class: "kqzhChart"
}, null, 512),
_hoisted_6,
_hoisted_7,
vue.createElementVNode("div", _hoisted_8, [
vue.createElementVNode("div", _hoisted_9, [
_hoisted_10,
vue.createElementVNode("span", {
class: "value",
style: vue.normalizeStyle({ color: airQualityObj.value.yearRatio ? "#00DD78" : "" })
}, vue.toDisplayString(airQualityObj.value.yearRatio || "--") + "%", 5)
]),
vue.createElementVNode("div", _hoisted_11, [
_hoisted_12,
vue.createElementVNode("span", _hoisted_13, vue.toDisplayString(airQualityObj.value.goal || "--") + "%", 1)
])
])
]),
vue.createElementVNode("div", _hoisted_14, [
_hoisted_15,
vue.createVNode(vue.unref(elementPlusExpand.FpiElRolling), {
class: "main",
direction: "y",
time: 15
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(factorList.value, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "list"
}, [
vue.createElementVNode("div", _hoisted_16, vue.toDisplayString(item.factorName), 1),
vue.createElementVNode("div", _hoisted_17, [
vue.createElementVNode("span", _hoisted_18, vue.toDisplayString(item.factorValue || "--"), 1),
vue.createElementVNode("span", _hoisted_19, "/ " + vue.toDisplayString(item.targetValue || "--"), 1)
])
]);
}), 128))
]),
_: 1
})
])
])
])
]);
};
}
});
exports.default = _sfc_main;