1

guanqb

2022-12-02 7a4161f1e6cf6d5bf93d64a23d669182f4e7cf90

 src/views/home/components/rightContainer.vue

@@ -4,9 +4,16 @@
            <div class="title">
                案件统计
                <div class="timer">
                    <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                    <el-date-picker
                        v-model="eventTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </div>
            </div>
            <div id="EventChangeEcharts" class="echarts-box"></div>
@@ -14,20 +21,24 @@

        <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <div>
                    安保活动
                </div>
                <div>安保活动</div>
                <div class="title-tab">
                    <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/<span
                        :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                    <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/
                    <span :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                </div>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table size="small" :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr"
                <el-table
                    size="small"
                    :height="tableHeight"
                    :data="acttype == 0 ? underwayArr : historyArr"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    <el-table-column prop="activityName" label="活动名称"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间"></el-table-column>
@@ -38,12 +49,31 @@

        <div class="crowd-box" ref="crowdBox">
            <div class="title">
                <div>
                    现有设备
                </div>
                <div>现有设备</div>
                <div class="title-tab">
                    <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/<span
                        :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
                    <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/
                    <span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
                </div>
                <div class="legend">
                    <ul>
                        <li>
                            <div>
                                <img src="/img/icon/pCar.png" alt />
                            </div>车辆
                        </li>
                        <li>
                            <img src="/img/icon/monitor.png" alt />
                            <div></div>摄像头
                        </li>
                        <li>
                            <img src="/img/icon/recorder.png" alt />
                            <div></div>执法记录仪
                        </li>
                        <li>
                            <img src="/img/icon/pPhone.png" alt />
                            <div></div>手台
                        </li>
                    </ul>
                </div>
            </div>
            <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
@@ -171,30 +201,32 @@
                            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>`
                        }
                        return tipHtml
                    }
                },
                legend: {
                    left: '60%',
                    y: '25%',
                    itemGap: 20,
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (name) {
                        let tarValue
                        for (let i = 0; i < dataArr.length; i++) {
                            if (dataArr[i].name == name) {
                                tarValue = dataArr[i].value
                            }
                        }
                        let v = tarValue
                        return `${name}     ${v} 台    `
                    },
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    borderColor: 'rgba(0,0,0,0.7)',
                },
                // legend: {
                //     left: '60%',
                //     y: '25%',
                //     itemGap: 20,
                //     textStyle: {
                //         color: '#fff'
                //     },
                //     formatter: function (name) {
                //         let tarValue
                //         for (let i = 0; i < dataArr.length; i++) {
                //             if (dataArr[i].name == name) {
                //                 tarValue = dataArr[i].value
                //             }
                //         }
                //         let v = tarValue
                //         return `${name}     ${v} 台    `
                //     },
                // },
                graphic: {
                    type: "text",
                    left: "16.5%",
                    top: "45%",
                    left: "36.5%",
                    top: "48%",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
@@ -205,7 +237,7 @@
                },
                title: {
                    text: `${this.regionTotal}`,
                    left: "22%",
                    left: "42%",
                    top: "56%",
                    textStyle: {
                        color: "#27D9C8",
@@ -219,31 +251,37 @@
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['27%', '57%'],
                        center: ['47%', '57%'],
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: 15,
                                lineStyle: {
                                    width: 3
                                }
                            }
                        },
                        label: {
                            show: false,
                            position: 'center',
                            // normal: {
                            //     formatter: function (params) {
                            //         // return params.name + "\n\n" + params.percent + "%"
                            //         console.log(params, 22222)
                            //         let tipHtml = ``
                            //         if ('carCount' in params.data) {
                            //             tipHtml = `${params.data.name}${params.data.value}台${params.percent}%警车：${params.data.carCount}台\n\n监控：${params.data.monitorCount}台手台：${params.data.phoneCount}台手持记录仪：${params.data.recorderCount}台`
                            //         } else {
                            //             tipHtml = `${params.data.name}${params.data.value}台${params.percent}%运行：${params.data.working}台\n\n备用：${params.data.spare}台检修：${params.data.overhaul}台禁用：${params.data.disable}台`
                            //         }
                            //         return tipHtml
                            //     },
                            //     textStyle: {
                            //         color: '#fff',
                            //         fontSize: 14
                            //     }
                            // }
                        },
                        labelLine: {
                            show: false
                            normal: {
                                formatter: '{b}',
                                // formatter: function (params) {
                                //     // return params.name + "\n\n" + params.percent + "%"
                                //     console.log(params, 22222)
                                //     let tipHtml = ``
                                //     if ('carCount' in params.data) {
                                //         tipHtml = `${params.data.name}${params.data.value}台${params.percent}%警车：${params.data.carCount}台\n\n监控：${params.data.monitorCount}台手台：${params.data.phoneCount}台手持记录仪：${params.data.recorderCount}台`
                                //     } else {
                                //         tipHtml = `${params.data.name}${params.data.value}台${params.percent}%运行：${params.data.working}台\n\n备用：${params.data.spare}台检修：${params.data.overhaul}台禁用：${params.data.disable}台`
                                //     }
                                //     return tipHtml
                                // },
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14
                                }
                            }
                        },
                        data: dataArr,
                        itemStyle: {
@@ -282,12 +320,12 @@
                equipmentmyChart.dispatchAction({
                    type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                })
                equipmentmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                    // position: ['5%', '5%'],
                })
                // equipmentmyChart.dispatchAction({ select
                //     type: "showTip",
                //     seriesIndex: 0,
                //     dataIndex: curIndex,
                //     // position: ['5%', '5%'],
                // })
            }, 1000)
            equipmentmyChart.on('mouseover', function (param) {
                clearInterval(timer)
@@ -314,12 +352,12 @@
                    equipmentmyChart.dispatchAction({
                        type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                    })
                    equipmentmyChart.dispatchAction({
                        type: "showTip",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                        // position: ['5%', '5%'],
                    })
                    // equipmentmyChart.dispatchAction({
                    //     type: "showTip",
                    //     seriesIndex: 0,
                    //     dataIndex: curIndex,
                    //     // position: ['5%', '5%'],
                    // })
                }, 1000)
            })
        },
@@ -706,7 +744,7 @@
            // background-image: linear-gradient(to right, #2e4aba, #010d3e);

            .title-tab {
                color: #99CCCC;
                color: #99cccc;

                span {
                    cursor: pointer;
@@ -730,6 +768,27 @@
                margin-left: 50%;
                letter-spacing: 1px;
            }
            .legend {
                position: absolute;
                width: calc(100% - 36px);
                height: 70%;
                top: 100%;
                ul {
                    display: flex;
                    height: 100%;
                    li {
                        height: 100%;
                        display: flex;
                        line-height: 100%;
                        img {
                            height: 80%;
                        }
                        // div::before {
                        //     content: '';
                        // }
                    }
                }
            }
        }

        .sub-title {
@@ -748,7 +807,7 @@
                background: $sub-tab-bg-color;
                cursor: pointer;

                &>div {
                & > div {
                    height: 26px;
                    line-height: 26px;
                }