<template>
    <div class="project-safety-check main-page">
        <el-col :span="6" class="h100">
            <module-one-1-1 label="质量隐患排查" class="chart1-module">
                <el-col :span="12" v-for="(it, idx) in chart1Data" :key="idx">
                    <div class="equipment-list-min equipment-list-min_div quality-target-index-min quality-target-index-min_div">
                        <div class="czz-number-img czz-number-img-blue">
                            <svg-icon icon-class="notesearch"></svg-icon>
                        </div>
                        <div>
                            <div class="equipment-list-data equipment-list-data_div_top">
                                <span>{{ it.name }}</span>
                            </div>
                            <div class="equipment-list-data equipment-list-data_div_bottom">
                                <span class="sp-data">{{ it.value || 0 }}</span>
                                <span class="sp-unit">条</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </module-one-1-1>
            <module-one-2-1 label="日常巡检">
                <img src="images/icon2001.png" class="img-openwin" @click="showDlg(1)" />
                <div class="div-item-chart">
                    <div class="data-item-chart">
                        <div class="total-info">
                            {{ item1Data.total }}
                            <br />
                            <span class="sp-label">问题总数</span>
                        </div>
                        <div class="chart-gif chart-overview-gif"></div>
                        <my-chart :key="itemChartKey1" id="project-safety-check-item1" width="100%" height="100%" :render="o => renderDataItem(1)"></my-chart>
                    </div>
                    <div class="div-item-info" :key="itemChartKey1">
                        <div v-for="(it, idx) in item1Data.infos" :key="idx" :class="'item-info'">
                            <span class="sp-name">{{ it.name }}</span>
                            <span class="sp-lend" :class="'is-' + it.type"></span>
                            <span class="sp-value led-number">{{ it.value }}</span>
                            <span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
                        </div>
                    </div>
                </div>
                <div class="div-item-data">
                    <div class="glr-title">最新提交</div>
                    <div class="div-item-list scroll">
                        <div v-for="(it, idx) in item1Data.items" :key="idx" class="list-item">
                            <el-image class="img-sm" fit="scale-down" :src="it.smarkUrl" :preview-src-list="[it.smarkUrl]"></el-image>
                            <div class="list-item-info">
                                <div class="item-row">
                                    <span class="sp-label">提交人:</span>
                                    <span class="sp-data">{{ it.createUser }}</span>
                                </div>
                                <div class="item-row">
                                    <span class="sp-label">整改人:</span>
                                    <span class="sp-data">{{ it.lordSentUser }}</span>
                                </div>
                                <div class="item-row">
                                    <span class="sp-label">复检人:</span>
                                    <span class="sp-data">{{ it.recheckSendUser }}</span>
                                </div>
                                <div class="item-row">
                                    <span class="sp-label">隐患描述:</span>
                                    <span class="sp-data">{{ it.workParts }}</span>
                                </div>
                                <div class="item-row">
                                    <span class="sp-label">整改要求:</span>
                                    <span class="sp-data">{{ it.changeInfo }}</span>
                                </div>
                                <div class="item-row">
                                    <span class="sp-label">状态:</span>
                                    <span class="sp-data">{{ getStatus(it.checkState) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </module-one-2-1>
        </el-col>
        <el-col :span="18" class="h100">
            <module-one-1-3 label="隐患类别统计">
                <img src="images/icon2001.png" class="img-openwin" @click="showDlg(0)" />
                <my-chart :key="chartKey2" id="project-safety-check-chart2" width="100%" height="100%" :render="renderChart2"></my-chart>
            </module-one-1-3>
            <el-row class="el-right">
                <el-col :span="8">
                    <module-one-2-1 label="周检">
                        <img src="images/icon2001.png" class="img-openwin" @click="showDlg(2)" />
                        <div class="div-item-chart">
                            <div class="data-item-chart">
                                <div class="total-info">
                                    {{ item2Data.total }}
                                    <br />
                                    <span class="sp-label">问题总数</span>
                                </div>
                                <div class="chart-gif chart-overview-gif"></div>
                                <my-chart :key="itemChartKey1" id="project-safety-check-item2" width="100%" height="100%" :render="o => renderDataItem(2)"></my-chart>
                            </div>
                            <div class="div-item-info" :key="itemChartKey1">
                                <div v-for="(it, idx) in item2Data.infos" :key="idx" :class="'item-info'">
                                    <span class="sp-name">{{ it.name }}</span>
                                    <span class="sp-lend" :class="'is-' + it.type"></span>
                                    <span class="sp-value led-number">{{ it.value }}</span>
                                    <span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="div-item-data">
                            <div class="glr-title">最新提交</div>
                            <div class="div-item-list scroll">
                                <div v-for="(it, idx) in item2Data.items" :key="idx" class="list-item">
                                    <el-image class="img-sm" fit="scale-down" :src="it.smarkUrl" :preview-src-list="[it.smarkUrl]"></el-image>
                                    <div class="list-item-info">
                                        <div class="item-row">
                                            <span class="sp-label">提交人:</span>
                                            <span class="sp-data">{{ it.createUser }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">整改人:</span>
                                            <span class="sp-data">{{ it.lordSentUser }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">复检人:</span>
                                            <span class="sp-data">{{ it.recheckSendUser }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">隐患描述:</span>
                                            <span class="sp-data">{{ it.workParts }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">整改要求:</span>
                                            <span class="sp-data">{{ it.changeInfo }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">状态:</span>
                                            <span class="sp-data">{{ getStatus(it.checkState) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </module-one-2-1>
                </el-col>
                <el-col :span="8">
                    <module-one-2-1 label="月检">
                        <img src="images/icon2001.png" class="img-openwin" @click="showDlg(3)" />
                        <div class="div-item-chart">
                            <div class="data-item-chart">
                                <div class="total-info">
                                    {{ item3Data.total }}
                                    <br />
                                    <span class="sp-label">问题总数</span>
                                </div>
                                <div class="chart-gif chart-overview-gif"></div>
                                <my-chart :key="itemChartKey1" id="project-safety-check-item3" width="100%" height="100%" :render="o => renderDataItem(3)"></my-chart>
                            </div>
                            <div class="div-item-info" :key="itemChartKey1">
                                <div v-for="(it, idx) in item3Data.infos" :key="idx" :class="'item-info'">
                                    <span class="sp-name">{{ it.name }}</span>
                                    <span class="sp-lend" :class="'is-' + it.type"></span>
                                    <span class="sp-value led-number">{{ it.value }}</span>
                                    <span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="div-item-data">
                            <div class="glr-title">最新提交</div>
                            <div class="div-item-list scroll">
                                <div v-for="(it, idx) in item3Data.items" :key="idx" class="list-item">
                                    <el-image class="img-sm" fit="scale-down" :src="it.smarkUrl" :preview-src-list="[it.smarkUrl]"></el-image>
                                    <div class="list-item-info">
                                        <div class="item-row">
                                            <span class="sp-label">提交人:</span>
                                            <span class="sp-data">{{ it.createUser }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">整改人:</span>
                                            <span class="sp-data">{{ it.lordSentUser }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">复检人:</span>
                                            <span class="sp-data">{{ it.recheckSendUser }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">隐患描述:</span>
                                            <span class="sp-data">{{ it.workParts }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">整改要求:</span>
                                            <span class="sp-data">{{ it.changeInfo }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">状态:</span>
                                            <span class="sp-data">{{ getStatus(it.checkState) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </module-one-2-1>
                </el-col>
                <el-col :span="8">
                    <module-one-2-1 label="专项检查">
                        <img src="images/icon2001.png" class="img-openwin" @click="showDlg(4)" />
                        <div class="div-item-chart">
                            <div class="data-item-chart">
                                <div class="total-info">
                                    {{ item4Data.total }}
                                    <br />
                                    <span class="sp-label">问题总数</span>
                                </div>
                                <div class="chart-gif chart-overview-gif"></div>
                                <my-chart :key="itemChartKey1" id="project-safety-check-item4" width="100%" height="100%" :render="o => renderDataItem(3)"></my-chart>
                            </div>
                            <div class="div-item-info" :key="itemChartKey1">
                                <div v-for="(it, idx) in item4Data.infos" :key="idx" :class="'item-info'">
                                    <span class="sp-name">{{ it.name }}</span>
                                    <span class="sp-lend" :class="'is-' + it.type"></span>
                                    <span class="sp-value led-number">{{ it.value }}</span>
                                    <span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="div-item-data">
                            <div class="glr-title">最新提交</div>
                            <div class="div-item-list scroll">
                                <div v-for="(it, idx) in item4Data.items" :key="idx" class="list-item">
                                    <el-image class="img-sm" fit="scale-down" :src="it.smarkUrl" :preview-src-list="[it.smarkUrl]"></el-image>
                                    <div class="list-item-info">
                                        <div class="item-row">
                                            <span class="sp-label">提交人:</span>
                                            <span class="sp-data">{{ it.createUser }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">整改人:</span>
                                            <span class="sp-data">{{ it.lordSentUser }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">复检人:</span>
                                            <span class="sp-data">{{ it.recheckSendUser }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">隐患描述:</span>
                                            <span class="sp-data">{{ it.workParts }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">整改要求:</span>
                                            <span class="sp-data">{{ it.changeInfo }}</span>
                                        </div>
                                        <div class="item-row">
                                            <span class="sp-label">状态:</span>
                                            <span class="sp-data">{{ getStatus(it.checkState) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </module-one-2-1>
                </el-col>
            </el-row>
        </el-col>
        <qualityCheckDialog ref="dlg" />
    </div>
</template>

<script>
import qualityCheckDialog from './dialog/qualityCheckDialog.vue'
export default {
    components: {
        qualityCheckDialog,
    },
    data() {
        return {
            dangerTypeDict: [],
            chartKey2: 0,
            itemChartKey1: 0,
            dpi: '',
            selProject: null,
            legendOpt1: {
                icon: 'rect',
                textStyle: {
                    color: '#c3dbfd',
                    fontSize: 14,
                    rich: {
                        name: {
                            color: '#c3dbfd',
                            padding: [0, 20, 0, 0],
                        },
                        percent: {
                            color: '#4676FD',
                        },
                    },
                },
            },
            overviewText: '问题数',
            chart1Data: [],
            chart2Data: [],
            item1Data: {
                total: 0,
                datas: [],
                infos: [],
                items: [],
            },
            item2Data: {
                total: 0,
                datas: [],
                infos: [],
                items: [],
            },
            item3Data: {
                total: 0,
                datas: [],
                infos: [],
                items: [],
            },
            item4Data: {
                total: 0,
                datas: [],
                infos: [],
                items: [],
            },
        }
    },
    mounted() {
        window.safetyApp = this
        this.$store.dispatch('ChangeNav', 401)
        this.$bus.$on('projectChange', (prj) => {
            this.selProject = prj
            this.init()
        })
        this.selProject = this.$store.getters.selProject
        this.init()
        this.dpi = this.$dpi()
        window.addEventListener('resize', () => {
            if (this.dpi != this.$dpi()) {
                this.dpi = this.$dpi()
                this.chartKey++
                this.chartKey2++
            }
        })
        this.$api.dict('ssp_proble_sub_type').then((d) => {
            this.dangerTypeDict = d || []
        })
    },
    methods: {
        showDlg(n) {
            this.$refs.dlg.showDialog(this.selProject, n, this.dangerTypeDict)
        },
        init() {
            if (!this.selProject) {
                return
            }
            let postData = {
                projectId: this.selProject.id,
                comId: this.selProject.comId,
            }
            let ajaxs = [
                this.$api.safety.groupByProblemType({...postData,infoType: 1}),
                this.$api.safety.groupByDangerType({...postData,infoType: 1}),
                this.$api.safety.listCountForBG({ ...postData, problemType: 1, infoType: 1 }),
                this.$api.safety.listForBG({ ...postData, problemType: 1, infoType: 1, pageNum: 1, pageSize: 5 }),
                this.$api.safety.listCountForBG({ ...postData, problemType: 2, infoType: 1 }),
                this.$api.safety.listForBG({ ...postData, problemType: 2, infoType: 1, pageNum: 1, pageSize: 5 }),
                this.$api.safety.listCountForBG({ ...postData, problemType: 3, infoType: 1 }),
                this.$api.safety.listForBG({ ...postData, problemType: 3, infoType: 1, pageNum: 1, pageSize: 5 }),
                this.$api.safety.listCountForBG({ ...postData, problemType: 4, infoType: 1 }),
                this.$api.safety.listForBG({ ...postData, problemType: 4, infoType: 1, pageNum: 1, pageSize: 5 }),
            ]
            this.$api.http.all(ajaxs).then((res) => {
                this.chart1Data = (res[0].data || []).map((it) => {
                    return {
                        id: it.nickedInfo,
                        value: it.id,
                        name: it.problemType,
                        data: it,
                    }
                })
                this.chart2Data = (res[1].data.fi || []).map((it) => {
                    return {
                        id: it.nickedInfo,
                        name: it.dangerType,
                        value1: it.id,
                        value2: it.comId,
                    }
                })
                this.showChart1() //安全隐患排查
                this.showChart2() //隐患类别统计
                this.makeItemData(this.item1Data, res[2].data)
                this.item1Data.items = res[3].rows
                this.makeItemData(this.item2Data, res[4].data)
                this.item2Data.items = res[5].rows
                this.makeItemData(this.item3Data, res[6].data)
                this.item3Data.items = res[7].rows
                this.makeItemData(this.item4Data, res[8].data)
                this.item4Data.items = res[9].rows
                this.itemChartKey1++
            })
        },
        showChart1(n) {},
        showChart2() {
            this.chartKey2++
        },
        getStatus(s) {
            let checkStates = [
                { value: '0', label: '待整改' },
                { value: '1', label: '待复检' },
                { value: '3', label: '复检驳回' },
                { value: '4', label: '复检通过' },
            ]
            let objs = checkStates.filter((it) => it.value == s)
            return objs.length > 0 ? objs[0].label : ''
        },
        makeItemData(item, res) {
            let labels = ['问题总数', '待整改', '待复检', '复检驳回', '整改完成', '超时整改']
            item.total = res[0].id
            let total = res[0].id
            item.datas = []
            for (let i = 1; i < 5; i++) {
                item.datas.push({
                    name: labels[i],
                    value: res[i].id,
                })
            }
            item.infos = []
            for (let i = 0; i < res.length; i++) {
                item.infos.push({
                    name: labels[i],
                    value: res[i].id,
                    type: res[i].projectName,
                    percent: total == 0 ? 0 : ((res[i].id / total) * 100.0).toFixed(1),
                })
            }
        },
        renderDataItem(n) {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let objs = this._data['item' + n + 'Data']
            let option = {
                color: ['#71BCC4', '#EEBE47', '#5EA85D', '#5B84EB', '#E76168'],
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        padAngle: 1,
                        itemStyle: {
                            borderRadius: 5,
                        },
                        emphasis: {
                            label: {
                                show: false,
                            },
                        },
                        label: {
                            show: false,
                        },

                        labelLine: {
                            show: false,
                        },
                        data: objs.datas,
                    },
                ],
            }
            return option
        },
        renderChart2(opt) {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let option = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: (v) => {
                        return v
                    },
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 14 : 24,
                    },
                },
                legend: {
                    top: is1K ? '0%' : is2K ? '0%' : '0%',
                    left: 'center',
                    itemWidth: is1K ? 25 : is2K ? 30 : 40,
                    itemHeight: is1K ? 14 : is2K ? 20 : 20,
                    itemGap: is1K ? 20 : is2K ? 30 : 40,
                    textStyle: {
                        color: '#fff',
                        fontSize: is1K ? 14 : is2K ? 20 : 30,
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.chart2Data.map((it) => it.name.replace(/[“”]/g, "'")),
                        axisLabel: {
                            width: is1K ? 60 : is2K ? 140 : 220,
                            margin: 15,
                            rotate: 10,
                            fontSize: is1K ? 12 : is2K ? 14 : 22,
                            overflow: 'break',
                            color: '#a2c8f9',
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            formatter: '{value}',
                            color: '#2ec2b3',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '问题数',
                        type: 'bar',
                        barGap: '0%',
                        barWidth: '20%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7ddff2',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#7ddff2', opacity: 0.1 } },
                        },
                        data: this.chart2Data.map((it) => it.value1),
                    },
                    {
                        name: '待改数',
                        type: 'bar',
                        barGap: '0%',
                        barWidth: '20%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#006594',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#006594', opacity: 0.1 } },
                        },
                        data: this.chart2Data.map((it) => it.value2),
                    },
                ],
            }
            return option
        },
    },
}
</script>

<style lang="less">
.project-safety-check {
    .screen-one-1-3 {
        height: calc(33% - 20px) !important;
    }

    .el-right {
        height: calc(66% - 20px) !important;

        .el-col-8 {
            height: 100%;

            .screen-one-2-1 {
                margin: 0px 20px;
                height: calc(100% - 0px) !important;
            }
        }
    }

    .chart1-module {
        .el-col-12 {
            height: 50%;
            width: 50%;
            display: flex;

            .czz-number-img {
                display: flex;
                width: 80px;
                height: 80px;
                align-items: center;
                justify-content: center;

                svg {
                    width: 30px !important;
                    height: 30px !important;
                    fill: #00aaff59 !important;
                }
            }

            .equipment-list-data_div_top {
                span {
                    font-size: 14px;
                    color: #cbdaff;
                    font-weight: normal;
                }
            }

            .equipment-list-data_div_bottom {
                margin-top: 10px;

                .sp-data {
                    font-size: 20px;
                }

                .sp-unit {
                    font-size: 14px;
                    color: #cbdaff;
                    font-weight: normal;
                }
            }
        }
    }

    .div-item-chart {
        position: relative;
        height: 230px;

        .data-item-chart {
            height: 230px;
            width: 230px;
            display: inline-block;
            position: absolute;
            left: -30px;

            .total-info {
                position: absolute;
                font-size: 20px;
                top: calc(50% - 20px);
                left: calc(50% - 50px);
                display: inline-block;
                width: 100px;
                height: 40px;
                text-align: center;

                .sp-label {
                    font-size: 14px;
                }
            }

            .chart-overview-gif {
                width: 80px;
                height: 80px;
                top: calc(50% - 40px);
                left: calc(50% - 40px);
            }
        }

        .div-item-info {
            display: inline-block;
            width: calc(100% - 180px);
            right: -0px;
            top: 20px;
            position: absolute;

            .item-info {
                line-height: 30px;

                .sp-lend {
                    display: inline-block;
                    margin-left: 8px;
                    width: 10px;
                    height: 20px;
                    position: relative;
                    top: 4px;

                    &.is-b {
                        background-color: #71bcc4;
                    }

                    &.is-c {
                        background-color: #eebe47;
                    }

                    &.is-d {
                        background-color: #5ea85d;
                    }

                    &.is-e {
                        background-color: #5b84eb;
                    }
                }

                .sp-name {
                    display: inline-block;
                    text-align: right;
                    width: 70px;
                }

                .sp-value {
                    margin-left: 8px;
                    font-size: 24px;
                    display: inline-block;
                    text-align: center;
                    min-width: 70px;
                }

                .sp-percent {
                    margin-left: 8px;
                    color: #5b84eb;
                }
            }
        }
    }

    .div-item-data {
        height: calc(100% - 230px);

        .div-item-list {
            height: calc(100% - 20px);
            overflow-y: auto;

            .list-item {
                display: flex;
                margin-top: 10px;
                border-top: solid 1px #cccccc88;
                padding-top: 10px;

                &:first-child {
                    margin-top: 0px;
                    border-top: none;
                }

                .img-sm {
                    width: calc(100% - 300px);
                    height: 120px;
                }

                .list-item-info {
                    width: 300px;
                    font-size: 12px;
                    padding-left: 10px;

                    .item-row {
                        line-height: 24px;

                        .sp-label {
                            color: #8bffd2;
                        }
                    }
                }
            }
        }
    }

    @media (min-width: 1921px) and (max-width: 2560px) {
        .chart1-module {
            .el-col-12 {
                .czz-number-img {
                    display: flex;
                    width: 100px;
                    height: 100px;

                    svg {
                        width: 40px !important;
                        height: 40px !important;
                    }
                }

                .equipment-list-data_div_top {
                    span {
                        font-size: 24px;
                    }
                }

                .equipment-list-data_div_bottom {
                    margin-top: 20px;

                    .sp-data {
                        font-size: 32px;
                    }

                    .sp-unit {
                        font-size: 24px;
                    }
                }
            }
        }

        .div-item-chart {
            position: relative;
            height: 260px;

            .data-item-chart {
                height: 260px;
                width: 260px;
                left: -30px;

                .total-info {
                    font-size: 24px;
                    top: calc(50% - 20px);
                    left: calc(50% - 50px);
                    width: 100px;
                    height: 40px;

                    .sp-label {
                        font-size: 20px;
                    }
                }

                .chart-overview-gif {
                    width: 80px;
                    height: 80px;
                    top: calc(50% - 40px);
                    left: calc(50% - 40px);
                }
            }

            .div-item-info {
                width: calc(100% - 230px);
                right: -0px;
                top: 20px;

                .item-info {
                    line-height: 30px;

                    .sp-lend {
                        margin-left: 8px;
                        width: 10px;
                        height: 20px;
                        top: 4px;
                    }

                    .sp-name {
                        width: 90px;
                        font-size: 20px;
                    }

                    .sp-value {
                        margin-left: 8px;
                        font-size: 32px;
                        min-width: 150px;
                    }

                    .sp-percent {
                        font-size: 20px;
                        margin-left: 8px;
                    }
                }
            }
        }

        .div-item-data {
            height: calc(100% - 260px);

            .glr-title {
                font-size: 24px;
            }

            .div-item-list {
                height: calc(100% - 20px);

                .list-item {
                    margin-top: 10px;
                    padding-top: 10px;

                    .img-sm {
                        width: calc(100% - 400px);
                        height: 120px;
                    }

                    .list-item-info {
                        width: 400px;
                        font-size: 16px;
                        padding-left: 10px;

                        .item-row {
                            line-height: 30px;
                        }
                    }
                }
            }
        }
    }

    @media (min-width: 2561px) {
        .chart1-module {
            .el-col-12 {
                .czz-number-img {
                    display: flex;
                    width: 160px;
                    height: 160px;

                    svg {
                        width: 60px !important;
                        height: 60px !important;
                    }
                }

                .equipment-list-data_div_top {
                    span {
                        font-size: 32px;
                    }
                }

                .equipment-list-data_div_bottom {
                    margin-top: 20px;

                    .sp-data {
                        font-size: 40px;
                    }

                    .sp-unit {
                        font-size: 32px;
                    }
                }
            }
        }

        .div-item-chart {
            position: relative;
            height: 320px;

            .data-item-chart {
                height: 320px;
                width: 320px;
                left: -30px;

                .total-info {
                    font-size: 32px;
                    top: calc(50% - 20px);
                    left: calc(50% - 60px);
                    width: 120px;
                    height: 40px;

                    .sp-label {
                        font-size: 24px;
                    }
                }

                .chart-overview-gif {
                    width: 80px;
                    height: 80px;
                    top: calc(50% - 40px);
                    left: calc(50% - 40px);
                }
            }

            .div-item-info {
                width: calc(100% - 300px);
                right: -0px;
                top: 20px;

                .item-info {
                    line-height: 40px;

                    .sp-lend {
                        margin-left: 8px;
                        width: 10px;
                        height: 20px;
                        top: 4px;
                    }

                    .sp-name {
                        width: 120px;
                        font-size: 30px;
                    }

                    .sp-value {
                        margin-left: 8px;
                        font-size: 36px;
                        min-width: 200px;
                    }

                    .sp-percent {
                        font-size: 24px;
                        margin-left: 8px;
                    }
                }
            }
        }

        .div-item-data {
            height: calc(100% - 320px);

            .glr-title {
                font-size: 28px;
            }

            .div-item-list {
                height: calc(100% - 20px);

                .list-item {
                    margin-top: 10px;
                    padding-top: 10px;

                    .img-sm {
                        width: calc(100% - 600px);
                        height: 120px;
                    }

                    .list-item-info {
                        width: 600px;
                        font-size: 20px;
                        padding-left: 10px;

                        .item-row {
                            line-height: 32px;
                        }
                    }
                }
            }
        }
    }
}
</style>