local p = {}
local getArgs = require('Module:Arguments').getArgs
-- 辅助函数：将数值转换为CSS像素值
local function px(value)
return tostring(value) .. 'px'
end
-- 计算步骤值
local function getStepValue(val)
if val == '∞' or val == '∞*' then return 6
elseif val == 'A' or val == 'A*' then return 5
elseif val == 'B' or val == 'B*' then return 4
elseif val == 'C' or val == 'C*' then return 3
elseif val == 'D' or val == 'D*' then return 2
elseif val == 'E' or val == 'E*' then return 1
else return 0 end
end
-- 主函数
function p.main(frame)
local args = getArgs(frame)
-- 获取参数值
local size = tonumber(args[7] or args.size or 100) or 100
local color = args[8] or args.color or '#808080'
-- 基本参数
local po = args[1] or args.power or '∞'
local sp = args[2] or args.speed or 'A'
local ra = args[3] or args.range or 'B'
local du = args[4] or args.durability or 'C'
local pr = args[5] or args.precision or 'D'
local dp = args[6] or args['development-potential'] or 'E'
-- 显示值
local po_show = args[11] or args.power_show or po
local sp_show = args[12] or args.speed_show or sp
local ra_show = args[13] or args.range_show or ra
local du_show = args[14] or args.durability_show or du
local pr_show = args[15] or args.precision_show or pr
local dp_show = args[16] or args['development-potential_show'] or dp
-- 标签
local po_label = args[17] or args.power_label or '破坏力'
local sp_label = args[18] or args.speed_label or '速度'
local ra_label = args[19] or args.range_label or '射程距离'
local du_label = args[20] or args.durability_label or '持续力'
local pr_label = args[21] or args.precision_label or '精密度'
local dp_label = args[22] or args['development-potential_label'] or '成长性'
-- 状态值
local state1 = args[23] or args.state1 or 'A'
local state2 = args[24] or args.state2 or 'B'
local state3 = args[25] or args.state3 or 'C'
local state4 = args[26] or args.state4 or 'D'
local state5 = args[27] or args.state5 or 'E'
-- 备注
local note = args[9] or args.note or ''
local notealign = args[10] or args.notealign or 'center'
-- 计算步骤值
local steppo = getStepValue(po)
local stepsp = getStepValue(sp)
local stepra = getStepValue(ra)
local stepdu = getStepValue(du)
local steppr = getStepValue(pr)
local stepdp = getStepValue(dp)
-- 计算是否完整
local fullpo = (stepdp ~= 0 and 'a' or '') .. (steppo == 0 and 'b' or '') .. (stepsp ~= 0 and 'c' or '')
local fullsp = (steppo ~= 0 and 'a' or '') .. (stepsp == 0 and 'b' or '') .. (stepra ~= 0 and 'c' or '')
local fullra = (stepsp ~= 0 and 'a' or '') .. (stepra == 0 and 'b' or '') .. (stepdu ~= 0 and 'c' or '')
local fulldu = (stepra ~= 0 and 'a' or '') .. (stepdu == 0 and 'b' or '') .. (steppr ~= 0 and 'c' or '')
local fullpr = (stepdu ~= 0 and 'a' or '') .. (steppr == 0 and 'b' or '') .. (stepdp ~= 0 and 'c' or '')
local fulldp = (steppr ~= 0 and 'a' or '') .. (stepdp == 0 and 'b' or '') .. (steppo ~= 0 and 'c' or '')
-- 常量
local vstep = 0.1
local hstep = 0.086602540
-- 开始构建HTML
local html = '<div class="outer" style="display:inline-block;position:relative;width:' .. px(size * 2) .. ';height:' .. px(size * 2) .. ';padding:30px;">'
-- 内部容器
html = html .. '<div class="inner" style="display:inline-block;position:relative;height:' .. px(size * 2) .. ';transform-origin:' .. px(size) .. ' ' .. px(size) .. '">'
-- PO-SP 扇形区域
if fullpo ~= '' and fullsp ~= '' then
if fullsp ~= '' then
html = html .. '<div class="po-sp-sector" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (1.01 - vstep * steppo)) .. ';border-left:' .. px(size * hstep * stepsp) .. ' solid ' .. color .. ';border-top:' .. px(size * vstep * steppo) .. ' solid transparent;transform-origin:0% 100%;transform:skew(0,-30deg)"></div>'
else
html = html .. '<div class="sp-pillar-ccw" style="position:absolute;left:' .. px(size * (1.01 - 0.5 * hstep)) .. ';top:' .. px(size * (0.96 - vstep * stepsp)) .. ';height:' .. px(size * (vstep * stepsp)) .. ';border-right:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:100% 100%;transform:rotate(60deg)"></div>'
end
else
html = html .. '<div class="po-pillar-cw" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (0.96 - vstep * steppo)) .. ';height:' .. px(size * (vstep * steppo)) .. ';border-left:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent"></div>'
end
-- SP-RA 扇形区域
if fullsp ~= '' and fullra ~= '' then
if fullra ~= '' then
html = html .. '<div class="sp-ra-sector" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (1.01 - vstep * stepsp)) .. ';border-left:' .. px(size * hstep * stepra) .. ' solid ' .. color .. ';border-top:' .. px(size * vstep * stepsp) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(60deg) skew(0,-30deg)"></div>'
else
html = html .. '<div class="ra-pillar-ccw" style="position:absolute;left:' .. px(size * (1.01 - 0.5 * hstep)) .. ';top:' .. px(size * (0.96 - vstep * stepra)) .. ';height:' .. px(size * (vstep * stepra)) .. ';border-right:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:100% 100%;transform:rotate(120deg)"></div>'
end
else
html = html .. '<div class="sp-pillar-cw" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (0.96 - vstep * stepsp)) .. ';height:' .. px(size * (vstep * stepsp)) .. ';border-left:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(60deg)"></div>'
end
-- RA-DU 扇形区域
if fullra ~= '' and fulldu ~= '' then
if fulldu ~= '' then
html = html .. '<div class="ra-du-sector" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (1.01 - vstep * stepra)) .. ';border-left:' .. px(size * hstep * stepdu) .. ' solid ' .. color .. ';border-top:' .. px(size * vstep * stepra) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(120deg) skew(0,-30deg)"></div>'
else
html = html .. '<div class="du-pillar-ccw" style="position:absolute;left:' .. px(size * (1.01 - 0.5 * hstep)) .. ';top:' .. px(size * (0.96 - vstep * stepdu)) .. ';height:' .. px(size * (vstep * stepdu)) .. ';border-right:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:100% 100%;transform:rotate(180deg)"></div>'
end
else
html = html .. '<div class="ra-pillar-cw" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (0.96 - vstep * stepra)) .. ';height:' .. px(size * (vstep * stepra)) .. ';border-left:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(120deg)"></div>'
end
-- DU-PR 扇形区域
if fulldu ~= '' and fullpr ~= '' then
if fullpr ~= '' then
html = html .. '<div class="du-pr-sector" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (1.01 - vstep * stepdu)) .. ';border-left:' .. px(size * hstep * steppr) .. ' solid ' .. color .. ';border-top:' .. px(size * vstep * stepdu) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(180deg) skew(0,-30deg)"></div>'
else
html = html .. '<div class="pr-pillar-ccw" style="position:absolute;left:' .. px(size * (1.01 - 0.5 * hstep)) .. ';top:' .. px(size * (0.96 - vstep * steppr)) .. ';height:' .. px(size * (vstep * steppr)) .. ';border-right:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:100% 100%;transform:rotate(-120deg)"></div>'
end
else
html = html .. '<div class="du-pillar-cw" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (0.96 - vstep * stepdu)) .. ';height:' .. px(size * (vstep * stepdu)) .. ';border-left:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(180deg)"></div>'
end
-- PR-DP 扇形区域
if fullpr ~= '' and fulldp ~= '' then
if fulldp ~= '' then
html = html .. '<div class="pr-dp-sector" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (1.01 - vstep * steppr)) .. ';border-left:' .. px(size * hstep * stepdp) .. ' solid ' .. color .. ';border-top:' .. px(size * vstep * steppr) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(-120deg) skew(0,-30deg)"></div>'
else
html = html .. '<div class="dp-pillar-ccw" style="position:absolute;left:' .. px(size * (1.01 - 0.5 * hstep)) .. ';top:' .. px(size * (0.96 - vstep * stepdp)) .. ';height:' .. px(size * (vstep * stepdp)) .. ';border-right:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:100% 100%;transform:rotate(-60deg)"></div>'
end
else
html = html .. '<div class="pr-pillar-cw" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (0.96 - vstep * steppr)) .. ';height:' .. px(size * (vstep * steppr)) .. ';border-left:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(-120deg)"></div>'
end
-- DP-PO 扇形区域
if fulldp ~= '' and fullpo ~= '' then
if fullpo ~= '' then
html = html .. '<div class="dp-po-sector" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (1.01 - vstep * stepdp)) .. ';border-left:' .. px(size * hstep * steppo) .. ' solid ' .. color .. ';border-top:' .. px(size * vstep * stepdp) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(-60deg) skew(0,-30deg)"></div>'
else
html = html .. '<div class="po-pillar-ccw" style="position:absolute;left:' .. px(size * (1.01 - 0.5 * hstep)) .. ';top:' .. px(size * (0.96 - vstep * steppo)) .. ';height:' .. px(size * (vstep * steppo)) .. ';border-right:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent"></div>'
end
else
html = html .. '<div class="dp-pillar-cw" style="position:absolute;left:' .. px(size * 1.01) .. ';top:' .. px(size * (0.96 - vstep * stepdp)) .. ';height:' .. px(size * (vstep * stepdp)) .. ';border-left:' .. px(size * 0.5 * hstep) .. ' solid ' .. color .. ';border-top:' .. px(0.25 * size * vstep) .. ' solid transparent;border-bottom:' .. px(0.25 * size * vstep) .. ' solid transparent;transform-origin:0% 100%;transform:rotate(-60deg)"></div>'
end
-- 外圆和内圆
html = html .. '<div class="out-circle" style="position:absolute;width:' .. px(size * 2) .. ';height:' .. px(size * 2) .. ';border-radius:50%;border:' .. px(size / 50) .. ' solid black"></div>'
html = html .. '<div class="in-circle" style="position:absolute;left:' .. px(size * 0.4) .. ';top:' .. px(size * 0.4) .. ';width:' .. px(size * 1.2) .. ';height:' .. px(size * 1.2) .. ';border-radius:50%;border:' .. px(size / 100) .. ' solid black"></div>'
-- 轴线
html = html .. '<div class="po-du-axis" style="position:absolute;left:' .. px(size * 1.005) .. ';top:' .. px(size * 0.41) .. ';width:0px;height:' .. px(size * 1.2) .. ';border:transparent;border-left:' .. px(size / 100) .. ' solid black"></div>'
html = html .. '<div class="sp-pr-axis" style="position:absolute;left:' .. px(size * 1.005) .. ';top:' .. px(size * 0.41) .. ';width:0px;height:' .. px(size * 1.2) .. ';border:transparent;border-left:' .. px(size / 100) .. ' solid black;transform:rotate(60deg)"></div>'
html = html .. '<div class="ra-dp-axis" style="position:absolute;left:' .. px(size * 1.005) .. ';top:' .. px(size * 0.41) .. ';width:0px;height:' .. px(size * 1.2) .. ';border:transparent;border-left:' .. px(size / 100) .. ' solid black;transform:rotate(120deg)"></div>'
-- 标签和值
html = html .. '<div class="po-label" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.0) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 2.04) .. ';text-align:center;font-size:' .. px(size * 0.07) .. ';"><p>' .. po_label .. '</p></div>'
html = html .. '<div class="po" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.05) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 1.94) .. ';text-align:center;vertical-align:middle;font-size:' .. px(size * 0.15) .. ';"><p>' .. po_show .. '</p></div>'
html = html .. '<div class="sp-label" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.0) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 2.04) .. ';text-align:center;font-size:' .. px(size * 0.07) .. ';transform:rotate(60deg);"><p>' .. sp_label .. '</p></div>'
html = html .. '<div class="sp" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.05) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 1.94) .. ';text-align:center;vertical-align:middle;font-size:' .. px(size * 0.15) .. ';transform:rotate(60deg)"><p style="transform:rotate(-60deg)">' .. sp_show .. '</p></div>'
html = html .. '<div class="ra-label" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.0) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 2.04) .. ';text-align:center;font-size:' .. px(size * 0.07) .. ';transform:rotate(120deg);"><p style="transform:rotate(180deg);">' .. ra_label .. '</p></div>'
html = html .. '<div class="ra" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.05) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 1.94) .. ';text-align:center;vertical-align:middle;font-size:' .. px(size * 0.15) .. ';transform:rotate(120deg)"><p style="transform:rotate(-120deg)">' .. ra_show .. '</p></div>'
html = html .. '<div class="du-label" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.0) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 2.04) .. ';text-align:center;font-size:' .. px(size * 0.07) .. ';transform:rotate(180deg);"><p style="transform:rotate(180deg);">' .. du_label .. '</p></div>'
html = html .. '<div class="du" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.05) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 1.94) .. ';text-align:center;vertical-align:middle;font-size:' .. px(size * 0.15) .. ';transform:rotate(180deg)"><p style="transform:rotate(180deg)">' .. du_show .. '</p></div>'
html = html .. '<div class="pr-label" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.0) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 2.04) .. ';text-align:center;font-size:' .. px(size * 0.07) .. ';transform:rotate(-120deg);"><p style="transform:rotate(180deg);">' .. pr_label .. '</p></div>'
html = html .. '<div class="pr" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.05) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 1.94) .. ';text-align:center;vertical-align:middle;font-size:' .. px(size * 0.15) .. ';transform:rotate(-120deg)"><p style="transform:rotate(120deg)">' .. pr_show .. '</p></div>'
html = html .. '<div class="dp-label" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.0) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 2.04) .. ';text-align:center;font-size:' .. px(size * 0.07) .. ';transform:rotate(-60deg);"><p>' .. dp_label .. '</p></div>'
html = html .. '<div class="dp" style="position:absolute;left:' .. px(size * 0.71) .. ';top:' .. px(size * 0.05) .. ';width:' .. px(size * 0.6) .. ';height:' .. px(size * 1.94) .. ';text-align:center;vertical-align:middle;font-size:' .. px(size * 0.15) .. ';transform:rotate(-60deg)"><p style="transform:rotate(60deg)">' .. dp_show .. '</p></div>'
-- 点标记
html = html .. '<div class="po-a-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 0.5) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="po-b-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 0.6) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="po-c-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 0.7) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="po-d-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 0.8) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="po-e-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 0.9) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="sp-a-dot" style="position:absolute;left:' .. px(size * (1 + 5 * hstep)) .. ';top:' .. px(size * 0.75) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="sp-b-dot" style="position:absolute;left:' .. px(size * (1 + 4 * hstep)) .. ';top:' .. px(size * 0.8) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="sp-c-dot" style="position:absolute;left:' .. px(size * (1 + 3 * hstep)) .. ';top:' .. px(size * 0.85) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="sp-d-dot" style="position:absolute;left:' .. px(size * (1 + 2 * hstep)) .. ';top:' .. px(size * 0.9) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="sp-e-dot" style="position:absolute;left:' .. px(size * (1 + 1 * hstep)) .. ';top:' .. px(size * 0.95) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="ra-a-dot" style="position:absolute;left:' .. px(size * (1 + 5 * hstep)) .. ';top:' .. px(size * 1.25) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="ra-b-dot" style="position:absolute;left:' .. px(size * (1 + 4 * hstep)) .. ';top:' .. px(size * 1.2) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="ra-c-dot" style="position:absolute;left:' .. px(size * (1 + 3 * hstep)) .. ';top:' .. px(size * 1.15) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="ra-d-dot" style="position:absolute;left:' .. px(size * (1 + 2 * hstep)) .. ';top:' .. px(size * 1.1) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="ra-e-dot" style="position:absolute;left:' .. px(size * (1 + 1 * hstep)) .. ';top:' .. px(size * 1.05) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="du-a-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 1.5) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="du-b-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 1.4) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="du-c-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 1.3) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="du-d-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 1.2) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="du-e-dot" style="position:absolute;left:' .. px(size) .. ';top:' .. px(size * 1.1) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="pr-a-dot" style="position:absolute;left:' .. px(size * (1 - 5 * hstep)) .. ';top:' .. px(size * 1.25) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="pr-b-dot" style="position:absolute;left:' .. px(size * (1 - 4 * hstep)) .. ';top:' .. px(size * 1.2) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="pr-c-dot" style="position:absolute;left:' .. px(size * (1 - 3 * hstep)) .. ';top:' .. px(size * 1.15) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="pr-d-dot" style="position:absolute;left:' .. px(size * (1 - 2 * hstep)) .. ';top:' .. px(size * 1.1) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="pr-e-dot" style="position:absolute;left:' .. px(size * (1 - 1 * hstep)) .. ';top:' .. px(size * 1.05) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="dp-a-dot" style="position:absolute;left:' .. px(size * (1 - 5 * hstep)) .. ';top:' .. px(size * 0.75) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="dp-b-dot" style="position:absolute;left:' .. px(size * (1 - 4 * hstep)) .. ';top:' .. px(size * 0.8) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="dp-c-dot" style="position:absolute;left:' .. px(size * (1 - 3 * hstep)) .. ';top:' .. px(size * 0.85) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="dp-d-dot" style="position:absolute;left:' .. px(size * (1 - 2 * hstep)) .. ';top:' .. px(size * 0.9) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
html = html .. '<div class="dp-e-dot" style="position:absolute;left:' .. px(size * (1 - 1 * hstep)) .. ';top:' .. px(size * 0.95) .. ';width:0px;height:0px;border:' .. px(size / 100) .. ' solid black;border-radius:50%"></div>'
-- 状态标签
html = html .. '<div class="po-a" style="position:absolute;left:' .. px(size * 1.03) .. ';top:' .. px(size * 0.42) .. ';font-size:' .. px(size * 0.07) .. ';">' .. state1 .. '</div>'
html = html .. '<div class="po-b" style="position:absolute;left:' .. px(size * 1.03) .. ';top:' .. px(size * 0.52) .. ';font-size:' .. px(size * 0.07) .. ';">' .. state2 .. '</div>'
html = html .. '<div class="po-c" style="position:absolute;left:' .. px(size * 1.03) .. ';top:' .. px(size * 0.62) .. ';font-size:' .. px(size * 0.07) .. ';">' .. state3 .. '</div>'
html = html .. '<div class="po-d" style="position:absolute;left:' .. px(size * 1.03) .. ';top:' .. px(size * 0.72) .. ';font-size:' .. px(size * 0.07) .. ';">' .. state4 .. '</div>'
html = html .. '<div class="po-e" style="position:absolute;left:' .. px(size * 1.03) .. ';top:' .. px(size * 0.82) .. ';font-size:' .. px(size * 0.07) .. ';">' .. state5 .. '</div>'
-- 结束内部容器
html = html .. '</div>'
-- 备注
if note ~= '' then
html = html .. '<div style="text-align:' .. notealign .. '">' .. note .. '</div>'
end
-- 结束外部容器
html = html .. '</div>'
return html
end
return p
