iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
312 lines (308 loc) • 15.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = {
name: 'IepDialPlate',
props: {},
data: function data() {
return {
chart: null
};
},
methods: {},
render: function render() {
var h = arguments[0];
var radius = 168.888;
var progress = radius * Math.PI;
var scale = progress / 100;
var number = 50 * scale;
return h(
"div",
{ "class": "iep-dial-plate" },
[h(
"svg",
{
attrs: { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", width: "386.006", height: "220.002", viewBox: "0 0 386.006 220.002" }
},
[h("defs", [h(
"radialGradient",
{
attrs: { id: "radial-gradient", cx: "0.489", cy: "0.437", r: "0.774", gradientTransform: "matrix(0.997, 0.075, -0.094, 1.248, 0.042, -0.145)", gradientUnits: "objectBoundingBox" }
},
[h("stop", {
attrs: { offset: "0", "stop-color": "#f1f6fe" }
}), h("stop", {
attrs: { offset: "1", "stop-color": "#fff" }
})]
), h(
"linearGradient",
{
attrs: { id: "linear-gradient", x1: "0.025", y1: "0.96", x2: "0.589", y2: "0.08", gradientUnits: "objectBoundingBox" }
},
[h("stop", {
attrs: { offset: "0", "stop-color": "#2fcfff" }
}), h("stop", {
attrs: { offset: "1", "stop-color": "#3664ff" }
})]
), h(
"filter",
{
attrs: { id: "\u8054\u5408_236", x: "0", y: "0", width: "386.006", height: "220.002", filterUnits: "userSpaceOnUse" }
},
[h("feOffset", {
attrs: { dy: "3", input: "SourceAlpha" }
}), h("feGaussianBlur", {
attrs: { stdDeviation: "6", result: "blur" }
}), h("feFlood", {
attrs: { "flood-color": "#3664ff", "flood-opacity": "0.404" }
}), h("feComposite", {
attrs: { operator: "in", in2: "blur" }
}), h("feComposite", {
attrs: { "in": "SourceGraphic" }
})]
), h(
"radialGradient",
{
attrs: { id: "radial-gradient-2", cx: "0.552", cy: "0.626", r: "0.5", gradientUnits: "objectBoundingBox" }
},
[h("stop", {
attrs: { offset: "0", "stop-color": "#c7eeff" }
}), h("stop", {
attrs: { offset: "1", "stop-color": "#fff" }
})]
), h(
"filter",
{
attrs: { id: "\u692D\u5706_1662", x: "11.998", y: "174", width: "30", height: "30", filterUnits: "userSpaceOnUse" }
},
[h("feOffset", {
attrs: { input: "SourceAlpha" }
}), h("feGaussianBlur", {
attrs: { stdDeviation: "3", result: "blur-2" }
}), h("feFlood", {
attrs: { "flood-color": "#3664ff" }
}), h("feComposite", {
attrs: { operator: "in", in2: "blur-2" }
}), h("feComposite", {
attrs: { "in": "SourceGraphic" }
})]
)]), h(
"g",
{
attrs: { id: "\u4EEA\u8868\u76D8", transform: "translate(-801.002 -360)" }
},
[h("path", {
attrs: { id: "\u8DEF\u5F84_25282", "data-name": "\u8DEF\u5F84 25282", d: "M220,0A110,110,0,0,1,110,110,110,110,0,0,1,0,0", transform: "translate(1105 552.5) rotate(180)", fill: "url(#radial-gradient)" }
}), h(
"text",
{
attrs: { id: "_0", "data-name": "0", transform: "translate(864 553)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei", opacity: "0.359" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["0"]
)]
), h(
"text",
{
attrs: { id: "\u5F31", transform: "translate(819 462)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["\u5F31"]
)]
), h(
"text",
{
attrs: { id: "\u8F83\u5F31", transform: "translate(928 373)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["\u8F83\u5F31"]
)]
), h(
"text",
{
attrs: { id: "\u4E2D", transform: "translate(1056 377)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["\u4E2D"]
)]
), h(
"text",
{
attrs: { id: "\u8F83\u5F3A", transform: "translate(1142 450)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["\u8F83\u5F3A"]
)]
), h(
"text",
{
attrs: { id: "\u5F3A", transform: "translate(1174 527)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["\u5F3A"]
)]
), h(
"text",
{
attrs: { id: "_100", "data-name": "100", transform: "translate(1100 553)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei", opacity: "0.359" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["100"]
)]
), h(
"text",
{
attrs: { id: "_50", "data-name": "50", transform: "translate(987 429)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei", opacity: "0.359" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["50"]
)]
), h(
"text",
{
attrs: { id: "_70", "data-name": "70", transform: "translate(1062 458)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei", opacity: "0.359" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["70"]
)]
), h(
"text",
{
attrs: { id: "_90", "data-name": "90", transform: "translate(1104 518)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei", opacity: "0.359" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["90"]
)]
), h(
"text",
{
attrs: { id: "_30", "data-name": "30", transform: "translate(912 454)", fill: "#062946", "font-size": "12", "font-family": "MicrosoftYaHei, Microsoft YaHei", opacity: "0.359" }
},
[h(
"tspan",
{
attrs: { x: "0", y: "0" }
},
["30"]
)]
), h("path", {
attrs: { id: "\u51CF\u53BB_341", "data-name": "\u51CF\u53BB 341", d: "M21271,5367h-8a163.1,163.1,0,0,0-3.291-32.649,161.13,161.13,0,0,0-24.375-57.927,162.462,162.462,0,0,0-71.277-58.691,161.19,161.19,0,0,0-30.41-9.439,163.6,163.6,0,0,0-65.3,0,161.125,161.125,0,0,0-57.926,24.375,162.447,162.447,0,0,0-58.693,71.274,161.031,161.031,0,0,0-9.436,30.409A163.051,163.051,0,0,0,20939,5367h-8a171.283,171.283,0,0,1,3.453-34.261,169.133,169.133,0,0,1,25.582-60.788,170.49,170.49,0,0,1,74.795-61.593,169.123,169.123,0,0,1,31.91-9.906,171.641,171.641,0,0,1,68.521,0,169.076,169.076,0,0,1,60.787,25.58,170.5,170.5,0,0,1,61.592,74.8,168.983,168.983,0,0,1,9.908,31.911A171.191,171.191,0,0,1,21271,5367Z", transform: "translate(-20106.996 -4816.999)", fill: "#f2f5f6" }
}), h(
"g",
{
attrs: { transform: "matrix(1, 0, 0, 1, 801, 360)", filter: "url(#\u8054\u5408_236)" }
},
[h("circle", {
attrs: {
cx: "196",
cy: "190",
r: radius,
fill: "none",
stroke: "url(#linear-gradient)",
"stroke-width": "18",
"stroke-dasharray": number + " " + progress,
"stroke-dashoffset": "-" + progress,
"stroke-linecap": "round"
}
})]
), h(
"g",
{
attrs: { transform: "matrix(1, 0, 0, 1, 801, 360)", filter: "url(#\u692D\u5706_1662)" }
},
[h("circle", {
attrs: { cx: "6", cy: "6", r: "6", transform: "translate(21 183)", fill: "url(#radial-gradient-2)" }
})]
), h("rect", {
attrs: { id: "\u77E9\u5F62_12898", "data-name": "\u77E9\u5F62 12898", width: "3", height: "19", transform: "matrix(0.819, -0.574, 0.574, 0.819, 889.834, 408.691)", fill: "#fff" }
}), h("rect", {
attrs: { id: "\u77E9\u5F62_12899", "data-name": "\u77E9\u5F62 12899", width: "3", height: "19", transform: "translate(992.807 374.124)", fill: "#fff" }
}), h("rect", {
attrs: { id: "\u77E9\u5F62_12900", "data-name": "\u77E9\u5F62 12900", width: "3", height: "9", transform: "matrix(0.819, 0.574, -0.574, 0.819, 1093.543, 411)", fill: "#fff" }
}), h("rect", {
attrs: { id: "\u77E9\u5F62_12901", "data-name": "\u77E9\u5F62 12901", width: "3", height: "9", transform: "matrix(0.309, 0.951, -0.951, 0.309, 1156.008, 496)", fill: "#fff" }
}), h("path", {
attrs: { id: "\u8DEF\u5F84_25268", "data-name": "\u8DEF\u5F84 25268", d: "M151.674,299.7l-.2-8,1.072-.03.255,8Zm-8.213-.016-1.13-.036.287-7.995,1.071.034Zm17.543-.5-.683-7.971,1.066-.1.742,7.965Zm-26.87-.053-1.123-.1.774-7.963,1.064.1Zm36.15-1.029-1.171-7.914,1.06-.161,1.23,7.9Zm-45.426-.09-1.117-.174,1.262-7.9,1.058.165Zm54.626-1.562-1.657-7.826,1.045-.225,1.716,7.814Zm-63.818-.127-1.1-.242,1.747-7.807,1.044.229Zm72.9-2.091-2.139-7.709,1.031-.29,2.2,7.693Zm-81.967-.164-1.087-.311,2.228-7.684,1.029.294Zm90.892-2.613-2.612-7.561,1.009-.353,2.669,7.542Zm-99.805-.2-1.065-.377,2.7-7.531,1.009.357Zm108.54-3.125-3.076-7.385.986-.415,3.131,7.362ZM88.96,287.894l-1.039-.442,3.161-7.349.984.419Zm125.775-3.623-3.526-7.181.959-.475,3.58,7.154ZM80.464,284l-1.011-.506,3.609-7.14.957.479Zm142.529-4.108-3.963-6.95.928-.533,4.014,6.92Zm-150.769-.3-.977-.567,4.042-6.9.925.537Zm158.74-4.574-4.383-6.693.893-.59,4.432,6.66Zm-166.692-.334-.94-.626,4.459-6.642.891.593Zm174.348-5.022-4.785-6.411.855-.643,4.832,6.376ZM56.637,269.3l-.9-.683,4.858-6.356.853.647Zm189.3-5.451-5.168-6.106.814-.695,5.213,6.068Zm-196.587-.394-.857-.736,5.237-6.047.812.7Zm203.531-5.858-5.532-5.779.771-.743,5.575,5.738Zm-210.45-.421-.81-.787,5.6-5.716.768.746Zm217-6.243-5.875-5.43.724-.789,5.915,5.386Zm-223.521-.447-.76-.835,5.936-5.363.72.792Zm229.65-6.6-6.2-5.061.674-.832L266.267,243ZM29.8,243.406l-.708-.88,6.253-4.99.671.834Zm241.437-6.943-6.494-4.672.622-.871,6.529,4.623Zm-247.094-.494-.653-.922,6.547-4.6.618.874Zm252.315-7.255-6.769-4.264.567-.908,6.8,4.214Zm-257.5-.515-.595-.961,6.817-4.186.564.91Zm262.24-7.541-7.018-3.839.51-.941,7.047,3.787Zm-266.943-.534-.535-1,7.062-3.759.506.943Zm271.173-7.8-7.242-3.4.451-.97L285.9,211.3Zm-275.37-.551-.472-1.026,7.281-3.315.447.972Zm279.077-8.028L281.7,200.8l.39-1,7.46,2.889Zm-282.75-.566-.408-1.055,7.472-2.858.386,1ZM292.3,194.951l-7.607-2.478.327-1.018,7.625,2.421ZM3.252,194.373,2.911,193.3l7.635-2.39.323,1.02Zm291.67-8.394-7.746-2,.264-1.038,7.76,1.944ZM.67,185.39l-.274-1.1,7.768-1.912.26,1.038Zm296.309-8.528-7.855-1.518.2-1.051,7.866,1.46Zm-298.329-.6-.206-1.111,7.871-1.428.195,1.052Zm299.819-8.629-7.933-1.031.134-1.063,7.941.972Zm-301.272-.6-.137-1.121,7.945-.941.13,1.062Zm302.192-8.695-7.982-.543.069-1.068,7.985.485Zm-303.074-.606-.068-1.128,7.987-.453L4.3,157.22ZM299.74,149l-8-.058,0-1.073h8ZM-4,148.395v-.523H4Z", transform: "translate(1141.871 697.372) rotate(180)", fill: "#283445", opacity: "0.304" }
}), h(
"g",
{
attrs: { id: "\u7EC4_35498", "data-name": "\u7EC4 35498", transform: "translate(0 27)", opacity: "0.3" }
},
[h("path", {
attrs: { id: "\u76F4\u7EBF_461", "data-name": "\u76F4\u7EBF 461", d: "M18,.5H0v-1H18Z", transform: "translate(842 522)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_466", "data-name": "\u76F4\u7EBF 466", d: "M18,.5H0v-1H18Z", transform: "matrix(0.819, 0.574, -0.574, 0.819, 869.627, 434.838)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_471", "data-name": "\u76F4\u7EBF 471", d: "M0,.5v-1H18v1Z", transform: "matrix(-0.819, 0.574, -0.574, -0.819, 1120.873, 438.838)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_467", "data-name": "\u76F4\u7EBF 467", d: "M11,14.994-.4.306.4-.306l11.4,14.688Z", transform: "translate(901.5 401.5)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_470", "data-name": "\u76F4\u7EBF 470", d: "M0,.5v-1H18v1Z", transform: "matrix(-0.602, 0.799, -0.799, -0.602, 1090.076, 405)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_469", "data-name": "\u76F4\u7EBF 469", d: "M18,.5H0v-1H18Z", transform: "matrix(0.309, 0.951, -0.951, 0.309, 950.697, 377)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_473", "data-name": "\u76F4\u7EBF 473", d: "M18,.5H0v-1H18Z", transform: "matrix(-0.391, 0.921, -0.921, -0.391, 1049.994, 381.715)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_468", "data-name": "\u76F4\u7EBF 468", d: "M18,.5H0v-1H18Z", transform: "matrix(0.951, 0.309, -0.309, 0.951, 849.381, 476.219)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_472", "data-name": "\u76F4\u7EBF 472", d: "M0,.5v-1H18v1Z", transform: "matrix(-0.966, 0.259, -0.259, -0.966, 1140.387, 480.671)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_463", "data-name": "\u76F4\u7EBF 463", d: "M.5,18h-1V0h1Z", transform: "translate(996 371)", fill: "#65789b" }
}), h("path", {
attrs: { id: "\u76F4\u7EBF_462", "data-name": "\u76F4\u7EBF 462", d: "M18,.5H0v-1H18Z", transform: "translate(1128 522)", fill: "#65789b" }
})]
), h(
"g",
{
attrs: { id: "plane" }
},
[h("circle", {
attrs: { cx: "15", cy: "15", r: "15", transform: "translate(810 538)", fill: "#3765f9" }
})]
)]
)]
)]
);
}
};