样式修改

guanqb

2022-12-08 c9061177ec07e6f09657ef15f2e7a779f0d14e5b

样式修改

 package-lock.json

Diff too large

 package.json

@@ -26,7 +26,14 @@
        "vue-axios": "^3.3.7",
        "vue-router": "^3.2.0",
        "vue-seamless-scroll": "^1.1.23",
        "vuex": "^3.4.0"
        "vuex": "^3.4.0",
        "@fullcalendar/core": "^5.10.1",
        "@fullcalendar/daygrid": "^5.10.1",
        "@fullcalendar/interaction": "^5.10.1",
        "@fullcalendar/timegrid": "^5.10.1",
        "@fullcalendar/vue": "^5.10.1",
        "moment": "^2.29.1",
        "tippy.js": "^6.3.7"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.15",
@@ -43,4 +50,4 @@
        "sass-loader": "^8.0.2",
        "vue-template-compiler": "^2.6.11"
    }
}
}

 public/img/icon/pCar.png

 src/api/home/index.js

New file
@@ -0,0 +1,20 @@
import request from "@/router/axios.js"


/**
 * 获取值班列表
 * @param {*}   
 * @returns 
 */
export const getSchedulingList = (requestBaseUrl = 'outside') => {
    return request({
        url: `/scheduling/scheduling/page`,
        method: 'get',
        requestBaseUrl,
        params: {
            current: 1,
            size: 100,
            sameday: 1,
        }
    })
}

 src/styles/scssFile.scss

@@ -20,9 +20,9 @@

$table-body-bg-color: rgba(9, 40, 199, 0.8);

$table-body-tr-n-color: rgba(17, 38, 163, 0.8);
$table-body-tr-n-color: rgba(17, 38, 163, 0.7);

$table-body-tr-2n-color: rgba(8, 56, 185, 0.8);
$table-body-tr-2n-color: rgba(8, 56, 185, 0.7);


@function countSizeVw($size, $vw) {

 src/views/home/components/leftContainer.vue

@@ -3,40 +3,65 @@
        <div class="person-box">
            <div class="title">
                <div class="title-tab">
                    <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/<span
                        :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                    <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/
                    <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                </div>
                <div class="title-num">
                    共<span :class="{ choosed: peopletype == 0 }">100</span>/<span
                        :class="{ choosed: peopletype == 1 }">1</span>人
                    共
                    <span :class="{ choosed: peopletype == 0 }">100</span>/
                    <span :class="{ choosed: peopletype == 1 }">1</span>人
                </div>
            </div>
            <div class="sub-tab " v-show="peopletype == 0">
                <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
            <div class="sub-tab" v-show="peopletype == 0">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 0 }"
                    @click="personTabClick(0)"
                >
                    <div class="num">164.57万人</div>
                    <div class="type">户籍人口</div>
                </div>
                <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 1 }"
                    @click="personTabClick(1)"
                >
                    <div class="num">17.52万人</div>
                    <div class="type">流动人口</div>
                </div>
                <div class="tab" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 2 }"
                    @click="personTabClick(2)"
                >
                    <div class="num">91995人</div>
                    <div class="type">境外人口</div>
                </div>
            </div>
            <div id="PersonEcharts" class="echarts-box">
            </div>
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
            <div id="PersonEcharts" class="echarts-box"></div>
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            ></div>
        </div>
        <div class="house-box">
            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeTwo == 0 }"
                    @click="houseTabClick(0)"
                >
                    <div class="num">182万户</div>
                    <div class="num">实有房屋</div>
                </div>
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeTwo == 1 }"
                    @click="houseTabClick(1)"
                >
                    <div class="num">634个</div>
                    <div class="num">关注场所</div>
                </div>
@@ -46,11 +71,19 @@
        <div class="land-box">
            <div class="title">现有地</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeThree == 0 }"
                    @click="landTabClick(0)"
                >
                    <div class="num">634个</div>
                    <div class="num">小区</div>
                </div>
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeThree == 1 }"
                    @click="landTabClick(1)"
                >
                    <div class="num">634个</div>
                    <div class="num">责任区</div>
                </div>
@@ -304,7 +337,7 @@
            } else if (type == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
                colors = ['#2495b3', '#49b5d0', '#63cde5']
                colors = ['#7d65c0', '#a47db4', '#e0a8c5']
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },
@@ -751,15 +784,15 @@
            if (this.tabType == 0) {
                xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                yDate = [881, 2211, 6414, 4321, 1232]
                colors = ['#2c9b00', '#fdef00', '#fd3200']
                colors = ['#06B5D7', '#44C0C1', '#71C8B1']
            } else if (this.tabType == 1) {
                xDate = ['湖北', '上海', '北京', '广东', '浙江']
                yDate = [6414, 4231, 2211, 1231, 881]
                colors = ['#63b783', '#9b83d7', '#6430c4']
                colors = ['#ef9faa', '#f7bfc6', '#fedade']
            } else if (this.tabType == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
                colors = ['#085fa9', '#83aec6', '#dfe9dc']
                colors = ['#7d65c0', '#a47db4', '#e0a8c5']
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },
@@ -913,7 +946,7 @@

            .title-tab {
                span {
                    color: #99CCCC;
                    color: #99cccc;
                    cursor: pointer;
                }

@@ -926,7 +959,7 @@
                color: #fff;

                span {
                    color: #99CCCC;
                    color: #99cccc;
                }

                span.choosed {
@@ -938,7 +971,7 @@
                color: #fff;
            }

            &>div:nth-of-type(2) {
            & > div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -953,18 +986,23 @@
            padding: 10px;
            display: flex;

            .tab {
            .tab,
            .tab3 {
                margin: 0 10px;
                flex: 1;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;

                &>div {
                & > div {
                    height: 22px;
                    line-height: 22px;
                }
            }
            .tab {
                display: flex;
                justify-content: space-around;
            }
        }

        .echarts-box {

 src/views/home/components/rightContainer.vue

@@ -1,5 +1,25 @@
<template>
    <div class="container" ref="Container">
        <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <div>值班信息</div>
            </div>
            <div class="table-box">
                <el-table
                    size="small"
                    :height="tableHeight"
                    :data="schedulingList"
                    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"
                >
                    <el-table-column prop="station" label="岗位"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="contact" label="联系方式"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="case-box" ref="caseBox">
            <div class="title">
                案件统计
@@ -19,7 +39,7 @@
            <div id="EventChangeEcharts" class="echarts-box"></div>
        </div>

        <div class="alert-box" ref="alertBox">
        <!-- <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <div>安保活动</div>
                <div class="title-tab">
@@ -45,7 +65,7 @@
                    <el-table-column prop="scale" label="规模"></el-table-column>
                </el-table>
            </div>
        </div>
        </div>-->

        <div class="crowd-box" ref="crowdBox">
            <div class="title">
@@ -56,7 +76,7 @@
                </div>
                <div class="legend" v-show="(linetype == 0)">
                    <ul>
                        <li style="color:#5470c6">
                        <li style="color:#5470FE">
                            <img src="/img/icon/pCar.png" alt />
                            车辆
                        </li>
@@ -104,11 +124,13 @@
let eventchangemychart
let timer

import historyArr from '@/assets/data/activitysData/history.js'
import underwayArr from '@/assets/data/activitysData/underway.js'
import carArr from '@/assets/data/equimentsDate/car.js'
import phoneArr from '@/assets/data/equimentsDate/phone.js'
import recorderArr from '@/assets/data/equimentsDate/recorder.js'
import { getSchedulingList } from '@/api/home/index.js'


const timeEvents = []

export default {
    data () {
@@ -142,11 +164,11 @@
                }]
            },
            regionTotal: 0,
            acttype: 0,
            // acttype: 0,
            linetype: 0,
            timetype: 0,
            underwayArr: [],
            historyArr: [],
            // underwayArr: [],
            // historyArr: [],
            policeName: '全部',
            phoneNewArr: [],
            carNewArr: [],
@@ -161,7 +183,9 @@
            maintainNewArr: [],
            disableNewArr: [],
            sealingNewArr: [],
            tableHeight: 0
            tableHeight: 0,
            schedulingList: [],

        }
    },
    created () {
@@ -170,14 +194,16 @@
        this.maintainSaveArr = this.maintainSaveArr.concat(this.getEquimentChartStateData(phoneArr).maintainArr).concat(this.getEquimentChartStateData(carArr).maintainArr).concat(this.getEquimentChartStateData(recorderArr).maintainArr)
        this.disableSaveArr = this.disableSaveArr.concat(this.getEquimentChartStateData(phoneArr).disableArr).concat(this.getEquimentChartStateData(carArr).disableArr).concat(this.getEquimentChartStateData(recorderArr).disableArr)
        this.sealingSaveArr = this.sealingSaveArr.concat(this.getEquimentChartStateData(phoneArr).sealingArr).concat(this.getEquimentChartStateData(carArr).sealingArr).concat(this.getEquimentChartStateData(recorderArr).sealingArr)

        this.getSchedulingList()
    },

    mounted () {
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()
        this.clickEquimentChart()
        this.historyArr = historyArr
        this.underwayArr = underwayArr
        // this.historyArr = historyArr
        // this.underwayArr = underwayArr

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
@@ -186,11 +212,17 @@
        this.equipmentEchartsCarousel()
    },
    methods: {
        actTabClick (type) {
            this.acttype = type
            this.$refs.activityTable.bodyWrapper.scrollTop = 0
            this.$emit('changeActivityType', type)
            this.$emit('activityChange')
        // actTabClick (type) {
        //     this.acttype = type
        //     this.$refs.activityTable.bodyWrapper.scrollTop = 0
        //     this.$emit('changeActivityType', type)
        //     this.$emit('activityChange')
        // },

        getSchedulingList () {
            getSchedulingList().then(res => {
                this.schedulingList = res.data.data.records
            })
        },

        lineTabClick (type) {
@@ -271,7 +303,7 @@
                                if ('carCount' in params.data) {
                                    colorList = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
                                } else {
                                    colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                    colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                }
                                return colorList[params.dataIndex]
                            }
@@ -283,7 +315,7 @@
                                    if ('carCount' in params.data) {
                                        colorList = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
                                    } else {
                                        colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                        colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                    }
                                    return colorList[params.dataIndex]
                                }
@@ -454,25 +486,25 @@
        },

        selectPoliceChangeEquimentData (police) {
            if (police != '全部') {
                let arr1 = []
                let arr2 = []
                underwayArr.some(item => {
                    if (item.policeStationName == police) {
                        arr1.push(item)
                    }
                })
                this.underwayArr = arr1
                historyArr.some(item => {
                    if (item.policeStationName == police) {
                        arr2.push(item)
                    }
                })
                this.historyArr = arr2
            } else {
                this.underwayArr = underwayArr
                this.historyArr = historyArr
            }
            // if (police != '全部') {
            //     let arr1 = []
            //     let arr2 = []
            //     underwayArr.some(item => {
            //         if (item.policeStationName == police) {
            //             arr1.push(item)
            //         }
            //     })
            //     this.underwayArr = arr1
            //     historyArr.some(item => {
            //         if (item.policeStationName == police) {
            //             arr2.push(item)
            //         }
            //     })
            //     this.historyArr = arr2
            // } else {
            //     this.underwayArr = underwayArr
            //     this.historyArr = historyArr
            // }
            equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(police)), true)
            this.policeName = police
        },
@@ -662,13 +694,14 @@
            return { 'workingObj': workingObj, 'faultObj': faultObj, 'maintainObj': maintainObj, 'disableObj': disableObj, 'sealingObj': sealingObj }
        },

        activityRowClick (row) {
            this.$EventBus.$emit('toPosition', {
                layerName: 'activityLayers',
                siteJd: Number(row.position[0]),
                siteWd: Number(row.position[1])
            })
        },
        // activityRowClick (row) {
        //     this.$EventBus.$emit('toPosition', {
        //         layerName: 'activityLayers',
        //         siteJd: Number(row.position[0]),
        //         siteWd: Number(row.position[1])
        //     })
        // },

    },

    destroyed () {
@@ -771,7 +804,7 @@
                position: absolute;
                width: calc(100% - 36px);
                height: 70%;
                top: 100%;
                top: 120%;
                font-style: normal;
                font-weight: normal;
                ul {
@@ -825,6 +858,10 @@
            padding: 12px;
            flex: 1;
        }
        .table-box {
            padding: 0 12px;
            flex: 1;
        }

        #peopleList {
            height: 100%;