弹窗样式内容

guanqb

2022-11-15 71a7d1da8a740f1579a8d9f658182e6f9d2e116a

 src/views/home/components/rightContainer.vue

@@ -168,7 +168,7 @@
                    formatter: function (params) {
                        let tipHtml = ``
                        if ('carCount' in params.data) {
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">警车：${params.data.carCount}台</span><span style="margin-left:10px;color:#949494">监控：${params.data.monitorCount}台</span><br /><span style="color:#fe2929">手台${params.data.phoneCount}台</span><span style="margin-left:10px;color:#69a9ff">手持记录仪：${params.data.recorderCount}台</span>`
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
                        } else {
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">运行：${params.data.working}台</span><span style="margin-left:10px;color:#949494">备用：${params.data.spare}台</span><br /><span style="color:#fe2929">检修：${params.data.overhaul}台</span><span style="margin-left:10px;color:#69a9ff">禁用：${params.data.disable}台</span>`
                        }
@@ -230,7 +230,20 @@
                        labelLine: {
                            show: false
                        },
                        data: dataArr
                        data: dataArr,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = []
                                    if ('carCount' in params.data) {
                                        colorList = ['#00fe01', '#949494', '#fe2929', '#69a9ff']
                                    } else {
                                        colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                    }
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ],
                grid: {
@@ -507,6 +520,7 @@
            }
            return dataArr
        },

        getEquimentChartStateData (newArr) {
            let working = 0
            let spare = 0