@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" />
164 lines (161 loc) • 7.78 kB
JavaScript
import { defineComponent, ref, onMounted, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, createBlock, unref, withCtx } from 'vue';
import { FpiElRolling } from '@ued_fpi/element-plus-expand';
import requestControl from '../../service/request.mjs';
import { setIntervalData } from '../../utils/hooks.mjs';
const _hoisted_1 = { class: "dv-ipes-enterprise-protection-code" };
const _hoisted_2 = { class: "dv-ipes-env-code-list" };
const _hoisted_3 = { class: "flex" };
const _hoisted_4 = {
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
fill: "none",
version: "1.1",
width: "50",
height: "50",
viewBox: "0 0 30 30"
};
const _hoisted_5 = /* @__PURE__ */ createElementVNode("defs", null, [
/* @__PURE__ */ createElementVNode("clipPath", { id: "master_svg0_809_2528" }, [
/* @__PURE__ */ createElementVNode("rect", {
x: "0",
y: "0",
width: "40",
height: "40",
rx: "2"
})
])
], -1);
const _hoisted_6 = { "clip-path": "url(#master_svg0_809_2528)" };
const _hoisted_7 = /* @__PURE__ */ createElementVNode("rect", {
x: "0",
y: "0",
width: "40",
height: "40",
rx: "2"
}, null, -1);
const _hoisted_8 = ["fill"];
const _hoisted_9 = { class: "dv-ipes-value" };
const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", { class: "unit" }, "家", -1);
const _hoisted_11 = { class: "dv-ipes-rate-num" };
const _hoisted_12 = { class: "dv-ipes-env-list" };
const _hoisted_13 = /* @__PURE__ */ createElementVNode("div", { class: "dv-ipes-env-list-header dv-ipes-flex-bw-c" }, [
/* @__PURE__ */ createElementVNode("div", { class: "dv-ipes-th" }, " 重点问题企业 "),
/* @__PURE__ */ createElementVNode("div", { class: "dv-ipes-th" }, " 问题数 ")
], -1);
const _hoisted_14 = { class: "dv-ipes-tr dv-ipes-body-name" };
const _hoisted_15 = ["title", "onClick"];
const _hoisted_16 = { class: "dv-ipes-tr dv-ipes-value" };
const _hoisted_17 = {
key: 1,
class: "dv-ipes-no-data"
};
const __default__ = {
name: "DvIpesEnterpriseProtectionCode",
title: "环保码统计"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
emits: ["clickCompany"],
setup(__props, { emit: $emit }) {
const codeData = ref([
{ ruleColorName: "红码", inColor: "#F84439", num: 0, rate: "0" },
{ ruleColorName: "黄码", inColor: "#FDBD00", num: 0, rate: "0" },
{ ruleColorName: "绿码", inColor: "#15F3A3", num: 0, rate: "0" }
]);
const codeList = ref([]);
function onClickCompany(item) {
$emit("clickCompany", item);
}
async function getData() {
try {
const { data } = await requestControl({
method: "get",
url: "/ipes-company-epcode-server/web/api/v1/thirdcode/getInfo"
});
let total = 0;
data.colors.forEach((item) => {
total += item.num;
});
codeData.value = codeData.value.map((item) => {
const obj = data.colors.find((e) => e.ruleColorName === item.ruleColorName);
const rate = total === 0 ? 0 : `${+(obj.num / total * 100).toFixed(1)}%`;
return Object.assign(item, obj, {
rate
});
});
codeList.value = data?.companys || [];
} catch (error) {
console.log(error);
}
}
onMounted(() => {
getData();
});
setIntervalData(getData, 5 * 60 * 1e3);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(codeData.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "dv-ipes-code-wrap"
}, [
(openBlock(), createElementBlock("svg", _hoisted_4, [
_hoisted_5,
createElementVNode("g", _hoisted_6, [
_hoisted_7,
createElementVNode("g", null, [
createElementVNode("path", {
d: "M25.6667,27.999755859375L25.6667,25.666455859375L28,25.666455859375L28,27.999755859375L25.6667,27.999755859375ZM21,27.999755859375L21,25.666455859375L23.3333,25.666455859375L23.3333,27.999755859375L21,27.999755859375ZM16.6667,27.999755859375L16.6667,16.666455859375L23.3333,16.666455859375L23.3333,18.999755859375L19,18.999755859375L19,27.999755859375L16.6667,27.999755859375ZM4,27.999755859375L4,16.666455859375L15.3333,16.666455859375L15.3333,27.999755859375L4,27.999755859375ZM6.33333,25.666455859375L13,25.666455859375L13,18.999755859375L6.33333,18.999755859375L6.33333,25.666455859375ZM8.5,23.499755859375L8.5,21.166455859375L10.83333,21.166455859375L10.83333,23.499755859375L8.5,23.499755859375ZM21.3333,23.333055859375L21.3333,18.999755859375L28,18.999755859375L28,23.333055859375L21.3333,23.333055859375ZM25.6667,18.999755859375L25.6667,16.666455859375L28,16.666455859375L28,18.999755859375L25.6667,18.999755859375ZM16.6667,15.333055859375L16.6667,3.999755859375L28,3.999755859375L28,15.333055859375L16.6667,15.333055859375ZM19,12.999755859375L25.6667,12.999755859375L25.6667,6.333085859375L19,6.333085859375L19,12.999755859375ZM4,15.333055859375L4,3.999755859375L15.3333,3.999755859375L15.3333,15.333055859375L4,15.333055859375ZM6.33333,12.999755859375L13,12.999755859375L13,6.333085859375L6.33333,6.333085859375L6.33333,12.999755859375ZM21.1667,10.833085859375L21.1667,8.499755859375L23.5,8.499755859375L23.5,10.833085859375L21.1667,10.833085859375ZM8.5,10.833085859375L8.5,8.499755859375L10.83333,8.499755859375L10.83333,10.833085859375L8.5,10.833085859375Z",
fill: item.inColor,
"fill-opacity": "1"
}, null, 8, _hoisted_8)
])
])
])),
createElementVNode("div", _hoisted_9, [
createElementVNode("span", {
class: "num",
style: normalizeStyle({ color: item.inColor })
}, toDisplayString(item.num), 5),
_hoisted_10
]),
createElementVNode("div", _hoisted_11, toDisplayString(item.rate), 1)
]);
}), 128))
])
]),
createElementVNode("div", _hoisted_12, [
_hoisted_13,
codeList.value && codeList.value.length > 0 ? (openBlock(), createBlock(unref(FpiElRolling), {
key: 0,
class: "dv-ipes-env-list-con",
direction: "y",
time: 200
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(codeList.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "dv-ipes-flex-bw-c dv-ipes-body-item"
}, [
createElementVNode("div", _hoisted_14, [
createElementVNode("span", {
href: "javascript:void(0);",
title: item.companyName,
onClick: ($event) => onClickCompany(item)
}, toDisplayString(item.companyName), 9, _hoisted_15)
]),
createElementVNode("div", _hoisted_16, toDisplayString(item.num), 1)
]);
}), 128))
]),
_: 1
})) : (openBlock(), createElementBlock("div", _hoisted_17, " 暂无数据 "))
])
]);
};
}
});
export { _sfc_main as default };