frontend/src/views/stritl/index.vue

<template>
    <div class="stritlBox">
        <div class="stritl_left">
            <div class="strLeftTop">
                <h3>{{ numberUnits.name }}</h3>
                <bar v-if="flag.baizhang" :legendData="unitXData" :seriesData="unitYData" :boxStyle="numberUnits.boxStyle"></bar>
            </div>
            <div class="strLeftMid">
                <h3>{{ hazardClass.name }}</h3>
                <pie v-if="flag.baizhang" :pieData="hazardPieData" :boxStyle="hazardClass.boxStyle"></pie>
            </div>
            <div class="strLeftBottom">
                <h3>{{ monitLine.name }}</h3>
                <bar v-if="flag.baizhang" :legendData="lineXData" :seriesData="lineYData" :boxStyle="monitLine.boxStyle"></bar>
            </div>
        </div>
        <div class="stritl_center">
            <div class="strCenterTop">
                <mapChart></mapChart>
            </div>
            <div class="strCenterbottom">
                <div class="bottomL">
                    <h3>{{ hazardType.name }}</h3>
                    <horizontalBar
                        :legendData="hazardTypeXData"
                        :seriesData="hazardTypeYData"
                        :boxStyle="hazardType.boxStyle"
                    ></horizontalBar>
                </div>
                <div class="bottomM">
                    <h3>{{ deviceInfo.name }}</h3>
                    <div class="infoBox">
                        <p>
                            <span>在运数</span>
                            <span>{{ infoData.deviceCount }}</span>
                        </p>
                        <p>
                            <span>在线数</span>
                            <span>{{ infoData.hasPhotoCount }}</span>
                        </p>
                        <p>
                            <span>杆塔覆盖率</span>
                            <span>{{ infoData.deviceCoverage }}%</span>
                        </p>
                        <p>
                            <span>在线率</span>
                            <span>{{ infoData.hasPhotoRate }}%</span>
                        </p>
                    </div>
                </div>
                <div class="bottomR">
                    <h3>{{ deviceOnline.name }}</h3>
                    <pie :pieData="deviceOnline.onlineData" :boxStyle="deviceOnline.boxStyle"></pie>
                </div>
            </div>
        </div>
        <div class="stritl_right">
            <div class="strRightTop">
                <h3>线路分布(总计：5)</h3>
                <div class="tableBox">
                    <el-table :data="lineAllData" style="width: 100%">
                        <el-table-column prop="voltageLevelStr" label="电压等级" align="center"> </el-table-column>
                        <el-table-column prop="lineCount" label="线路数" align="center"> </el-table-column>
                        <el-table-column prop="towerCount" label="安装数" align="center"> </el-table-column>
                        <el-table-column prop="deviceCoverage" label="安装覆盖率" align="center"> </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- <div class="strRightMid">5</div> -->
            <div class="strRightBottom">
                <h3>{{ patrolOpinions.name }}</h3>
                <div class="suggest">
                    <p class="attention"><span>注意：</span>{{ patrolOpinions.month }}</p>
                    <p class="info">
                        <span>{{ patrolOpinions.info1 }}</span>
                        <span>{{ patrolOpinions.info2 }}</span>
                    </p>
                </div>
                <h4>往年同期隐患比例分布图</h4>
                <radar :radarName="radarName" :radarValue="radarValue" :boxStyle="patrolOpinions.boxStyle" :radarTitle="radarTitle"></radar>
            </div>
        </div>
    </div>
</template>

<script>
import bar from './chartFiles/bar';
import horizontalBar from './chartFiles/horizontalBar';
import pie from './chartFiles/pie';
import radar from './chartFiles/radar';
import mapChart from './chartFiles/mapChart';
import {
    getLineDataByVoltage,
    getCapturePointDataByDanger,
    getHostDeviceDataByVoltage,
    getPhotoAlarmDataByAlarmType,
    getCompanyDeviceInfo,
    getByName,
    getLastYearAlarmReasons
} from '@/utils/api/index';
export default {
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            flag: {
                baizhang: false //是否开始渲染子组件
            },
            //装置数量统计
            unitAllData: [],
            unitXData: [],
            unitYData: [],
            numberUnits: {
                name: '装置数量统计',
                boxStyle: {
                    width: '100%',
                    height: '200px'
                }
            },
            //监控路线统计
            lineAllData: [],
            lineXData: [],
            lineYData: [],
            monitLine: {
                name: '监控路线统计',
                boxStyle: {
                    width: '100%',
                    height: '200px'
                }
            },
            //隐患分类统计
            hazardData: [],
            hazardPieData: [],
            hazardClass: {
                name: '隐患分类统计',
                boxStyle: {
                    width: '100%',
                    height: '200px'
                }
            },
            //隐患类型统计
            hazardTypeData: [],
            hazardTypeXData: [],
            hazardTypeYData: [],
            hazardType: {
                name: '隐患类型统计',
                boxStyle: {
                    width: '100%',
                    height: '160px'
                }
            },
            //装置信息统计
            infoData: [],
            deviceInfo: {
                name: '装置信息统计',
                infoData: [
                    { value: 24, name: '在运数' },
                    { value: 10, name: '在线数' },
                    { value: '92.31%', name: '杆塔覆盖率' },
                    { value: '41.67%', name: '在线率' }
                ]
            },
            deviceOnline: {
                name: '装置在线统计',
                onlineData: [
                    { value: 55, name: '离线' },
                    { value: 45, name: '在线' }
                ],
                boxStyle: {
                    width: '100%',
                    height: '160px'
                }
            },
            //隐患比例分布图
            patrolData: [],
            radarName: [],
            radarValue: [],
            radarTitle: '隐患比例分布图',
            patrolOpinions: {
                name: '巡查意见',
                month: '三月份',
                info1: '1.鸟类活动开展频繁，需注意鸟类筑巢，大型鸟类驻留。',
                info2: '2.大风天气较多的季节，要注意对放风筝行为的监控，同时加强巡视对导线悬挂异物的观察。',
                boxStyle: {
                    width: '100%',
                    height: '160px'
                }
            }
        };
    },
    components: {
        bar,
        horizontalBar,
        pie,
        radar,
        mapChart
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    methods: {},
    created() {
        //装置数量统计
        getHostDeviceDataByVoltage({
            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
        }).then((res) => {
            this.unitAllData = res.data.data;
            for (var i = 0; i < this.unitAllData.length; i++) {
                this.unitXData.push(this.unitAllData[i].name);
                this.unitYData.push(this.unitAllData[i].value);
            }
            this.flag.baizhang = true;
        });

        //装置信息统计
        getCompanyDeviceInfo({
            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
        }).then((res) => {
            this.infoData = res.data;
        });
        //线路分布
        getLineDataByVoltage({
            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
        }).then((res) => {
            this.lineAllData = res.data;
            console.log(this.lineAllData);
            for (var i = 0; i < this.lineAllData.length; i++) {
                this.lineXData.push(this.lineAllData[i].voltageLevelStr);
                this.lineYData.push(this.lineAllData[i].lineCount);
            }
            this.flag.baizhang = true;
        });
        //隐患分类统计
        getCapturePointDataByDanger({
            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
        }).then((res) => {
            this.hazardData = res.data;

            // let name1 = this.hazardData.nameList;
            // let value1 = this.hazardData.valueList;
            this.hazardPieData = res.data.list;
            console.log(this.hazardPieData);

            this.flag.baizhang = true;
        });

        //隐患类型统计
        getPhotoAlarmDataByAlarmType({
            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
        }).then((res) => {
            this.hazardTypeData = res.data.dataList;

            for (var i = 0; i < this.hazardTypeData.length; i++) {
                this.hazardTypeXData.push(this.hazardTypeData[i].name);
                this.hazardTypeYData.push(this.hazardTypeData[i].acount);
            }
            this.flag.baizhang = true;
        });

        //巡视意见
        getByName({
            name: '三月'
        }).then((res) => {
            console.log(res);
        });
        //雷达图数据
        getLastYearAlarmReasons({
            companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b',
            month: '03'
        }).then((res) => {
            console.log(res);
            this.patrolData = res.data;
            console.log(this.patrolData);
            let obj = {};
            this.patrolData.forEach((item) => {
                if (obj.hasOwnProperty(item.alarmInfo)) {
                    obj[item.alarmInfo] += item.num;
                } else {
                    obj[item.alarmInfo] = item.num;
                }
            });
            console.log(obj);
            //对象转化成数组对象
            for (let i in obj) {
                console.log(i);
                this.radarName.push({
                    name: i
                });
            }
            console.log(this.radarName);
            this.radarValue = Object.values(obj);
            console.log(this.radarValue);
        });
    }
};
</script>


<style  lang="less">
.stritlBox {
    width: 100%;
    height: 100%;
    display: flex;
    .stritl_left,
    .stritl_right {
        width: 20%;
        margin: 8px;
        //background-color: lightpink;
    }
    .stritl_left,
    .stritl_right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .strLeftTop,
        .strLeftMid,
        .strLeftBottom {
            height: 30%;
            box-sizing: content-box;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            border: 1px solid #ebeef5;
            background-color: #fff;
            border-radius: 4px;
            padding: 8px;
            h3 {
                margin-bottom: 8px;
                font-size: 15px;
            }
        }
        .strRightTop,
        .strRightBottom {
            height: 46%;
            box-sizing: content-box;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            border: 1px solid #ebeef5;
            background-color: #fff;
            border-radius: 4px;
            padding: 8px;
            h3 {
                margin-bottom: 8px;
                font-size: 15px;
            }
        }
        .strRightTop {
            position: relative;
            .tableBox {
                position: absolute;
                width: calc(100% - 16px);
                .el-table .cell {
                    white-space: normal;
                    word-break: break-all;
                }
                .el-table th.el-table__cell > .cell {
                    min-width: 58px;
                    padding-left: 0px;
                    padding-right: 0px;
                }
            }
        }
        .strRightBottom {
            h3 {
                margin-bottom: 8px;
                font-size: 15px;
            }
            .suggest {
                .attention {
                    font-size: 14px;
                    margin-bottom: 8px;
                    span {
                        font-size: 16px;
                        color: #f00;
                    }
                }
                .info {
                    display: flex;
                    flex-direction: column;
                    font-size: 14px;
                    line-height: 22px;
                }
            }
            h4 {
                margin-top: 8px;
                margin-bottom: 8px;
            }
        }
    }
    .stritl_center {
        flex: 1;
        margin: 10px;
        //background-color: lightgreen;
        display: flex;
        flex-direction: column;
        .strCenterTop {
            flex: 1;

            box-sizing: content-box;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            border: 1px solid #ebeef5;
            background-color: #fff;
            border-radius: 4px;
            //padding: 8px;
        }
        .strCenterbottom {
            margin-top: 24px;
            height: 210px;
            //border: 1px solid #000;
            box-sizing: content-box;
            display: flex;
            justify-content: space-between;

            .bottomL,
            .bottomM,
            .bottomR {
                border: 1px solid #000;
                box-sizing: content-box;
                width: 30%;
                box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
                border: 1px solid #ebeef5;
                background-color: #fff;
                border-radius: 4px;
                padding: 8px;
                h3 {
                    margin-bottom: 8px;
                    font-size: 15px;
                }
            }
            .bottomM {
                .infoBox {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    p {
                        width: 40%;
                        height: 68px;
                        background: #fcc;
                        text-align: center;
                        margin: 6px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        span {
                            color: #333;
                            font-size: 14px;
                            &:last-child {
                                font-size: 20px;
                                margin-top: 5px;
                                font-weight: bold;
                            }
                        }
                        &:first-child {
                            background: url('../../assets/img/border-blue.png');
                        }
                        &:nth-child(2) {
                            background: url('../../assets/img/border-green.png');
                        }
                        &:nth-child(3) {
                            background: url('../../assets/img/border-yellow.png');
                        }
                        &:nth-child(4) {
                            background: url('../../assets/img/border-gray.png');
                        }
                    }
                }
            }
        }
    }
}
</style>