首页布局调整

guanqb

2022-10-12 2a3bfbc64a74f3afaeced0756fcb2e4f60b94a24

首页布局调整

 public/img/home/ellipse5-copy.png

 src/components/map3/index.vue

File was deleted

 src/pcviews/homee/AlertInfo/index.vue

@@ -19,7 +19,7 @@
                    <span class="serial">{{item.serial}}</span>
                    <span class="area">{{item.area}}</span>
                    <span class="alertType">
                        <img src="/img/home/椭圆 5 拷贝.png" alt />
                        <img src="/zhxy/img/home/ellipse5-copy.png" alt />
                        {{item.alertType}}
                    </span>
                    <span class="date">{{item.date}}</span>
@@ -40,7 +40,7 @@
                { type: '网关', count: 106 },
                { type: '水平衡', count: 39 },
                { type: '电平衡', count: 85 },
                { type: '管网侧漏', count: 73 },
                // { type: '管网侧漏', count: 73 },
            ],
            sum: 0,
            alertMsg: [
@@ -71,7 +71,7 @@
.container {
    position: relative;
    width: 1020px;
    height: 310px;
    height: 100%;
    background: url(/zhxy/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;
    .title {
@@ -123,7 +123,7 @@
    .alertMsg {
        position: absolute;
        right: 68px;
        bottom: 16px;
        bottom: -2px;
        width: 680px;
        height: 266px;
        // background-color: #fff;

 src/pcviews/homee/BuildingCost/index.vue

@@ -158,7 +158,7 @@
<style lang="scss" scoped>
.container {
    width: 400px;
    height: 310px;
    height: 100%;
    background: url(/zhxy/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;
    .chart {

 src/pcviews/homee/Devices/index.vue

@@ -8,13 +8,13 @@
                <span>
                    <i>964</i> 台
                </span>
                <img src="/img/home/在线.png" alt />在线
                <img src="/zhxy/img/home/在线.png" alt />在线
            </div>
            <div class="offline">
                <span>
                    <i>86</i> 台
                </span>
                <img src="/img/home/离线.png" alt />离线
                <img src="/zhxy/img/home/离线.png" alt />离线
            </div>
        </div>
    </div>
@@ -35,7 +35,7 @@
.container {
    position: relative;
    width: 400px;
    height: 310px;
    height: 100%;
    background: url(/zhxy/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;
    .title {
@@ -60,16 +60,16 @@
    }
    .devices-container {
        padding-top: 50px;
        margin: 70px auto;
        display: flex;
        width: 161+161+18px;
        height: 193px;
        height: calc(100% - 50px);
        justify-content: space-between;
        div {
            position: relative;
            text-align: center;
            color: #e9f2f3;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            span {
                position: absolute;
                left: 50%;

 src/pcviews/homee/Map/index.vue

@@ -1,21 +1,288 @@
<template>
    <div class="container"></div>
    <div id="viewer-container" style="width:100%;height:100%">
        <div class="mapBtnList">
            <div class="btn1 mapBtn" @click.stop="fullImg">全图</div>
            <div class="btn2 mapBtn" @click.stop="ranging">距离</div>
            <div class="btn3 mapBtn" @click.stop="area">面积</div>
            <div class="btn4 mapBtn" @click.stop="ranging">全景</div>
            <div class="btn5 mapBtn" @click.stop="clear">清除</div>
        </div>
    </div>
</template>

<script>
export default {
import {
    getSceneList
} from '@/api/pc/leftNav/index'
const sceneLayer = null

let baseLayer = []

let tilesetLayer, tileset

import baseLayerImgUrl from '@/assets/baseUrl'

export default {
    mounted () {
        const that = this
        function initViewer () {
            global.viewer = new DC.Viewer('viewer-container')

            // 天地图 影像
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=789e558be762ff832392a0393fd8a4f1',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    116.027429, 28.681978, 800
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
}
            })
            // that.addBaseLayer()

            global.viewer.use(new global.DC.Measure())

            that.addMxTileset()
        }

        global.DC.ready(initViewer)
    },

    methods: {

        addMxTileset () {
            const that = this
            tilesetLayer = new global.DC.TilesetLayer('tilesetLayer')
            global.viewer.addLayer(tilesetLayer)
            tileset = new global.DC.Tileset('/zhxy/mx/tileset.json', {
                luminanceAtZenith: 0.4,
                // cullWithChildrenBounds: false,
                // cullRequestsWhileMoving: false,
                // skipLevelOfDetail: false,
                shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED
            })
            tileset.setHeight(5)
            tilesetLayer.addOverlay(tileset)
            global.viewer.flyTo(tileset)
            // tileset.on(global.DC.MouseEventType.CLICK, that.tilesetClick)
        },

        getViewExtend () {
            const params = {}
            const extend = global.viewer.camera.computeViewRectangle()
            if (typeof extend === 'undefined') {
                // 2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
                const canvas = global.viewer.scene.canvas
                const upperLeft = new global.DC.Namespace.Cesium.Cartesian2(0, 0)// canvas左上角坐标转2d坐标
                const lowerRight = new global.DC.Namespace.Cesium.Cartesian2(
                    canvas.clientWidth,
                    canvas.clientHeight
                )// canvas右下角坐标转2d坐标

                const ellipsoid = global.viewer.scene.globe.ellipsoid
                const upperLeft3 = global.viewer.camera.pickEllipsoid(
                    upperLeft,
                    ellipsoid
                )// 2D转3D世界坐标

                const lowerRight3 = global.viewer.camera.pickEllipsoid(
                    lowerRight,
                    ellipsoid
                )// 2D转3D世界坐标

                const upperLeftCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
                    upperLeft3
                )// 3D世界坐标转弧度
                const lowerRightCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
                    lowerRight3
                )// 3D世界坐标转弧度

                const minx = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.longitude)// 弧度转经纬度
                const maxx = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.longitude)// 弧度转经纬度

                const miny = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.latitude)// 弧度转经纬度
                const maxy = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.latitude)// 弧度转经纬度

                params.minx = minx
                params.maxx = maxx
                params.miny = miny
                params.maxy = maxy
            } else {
                // 3D获取方式
                params.maxx = global.DC.Namespace.Cesium.Math.toDegrees(extend.east)
                params.maxy = global.DC.Namespace.Cesium.Math.toDegrees(extend.north)

                params.minx = global.DC.Namespace.Cesium.Math.toDegrees(extend.west)
                params.miny = global.DC.Namespace.Cesium.Math.toDegrees(extend.south)
            }
            return params // 返回屏幕所在经纬度范围
        },

        addBaseLayer () {
            if (baseLayer.length > 0) {
                baseLayer.forEach(item => {
                    global.viewer.imageryLayers.remove(
                        item.layer
                    )
                })
            }

            baseLayer = []

            this.updateBaseLayer(false)
        },

        updateBaseLayer (flag) {
            const extent = this.getViewExtend()

            const array = baseLayerImgUrl.filter(item => {
                return item[1000]
            })

            array[0][1000].forEach(sm => {
                let startFlag = false
                if (flag == true) {
                    startFlag = baseLayer.some(dt => {
                        return dt.id == sm.id
                    })
                }

                if (startFlag == true) return

                if (
                    (
                        sm.rectangle[0] > extent.minx &&
                        sm.rectangle[1] > extent.miny &&
                        sm.rectangle[2] < extent.maxx &&
                        sm.rectangle[3] < extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] < extent.minx &&
                        sm.rectangle[1] < extent.maxy &&
                        sm.rectangle[2] > extent.minx &&
                        sm.rectangle[3] > extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] < extent.maxx &&
                        sm.rectangle[1] < extent.maxy &&
                        sm.rectangle[2] > extent.maxx &&
                        sm.rectangle[3] > extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] < extent.maxx &&
                        sm.rectangle[1] < extent.miny &&
                        sm.rectangle[2] > extent.maxx &&
                        sm.rectangle[3] > extent.miny
                    ) ||
                    (
                        sm.rectangle[0] < extent.minx &&
                        sm.rectangle[1] < extent.miny &&
                        sm.rectangle[2] > extent.minx &&
                        sm.rectangle[3] > extent.miny
                    ) ||
                    (
                        sm.rectangle[0] > extent.minx &&
                        sm.rectangle[1] < extent.maxy &&
                        sm.rectangle[2] < extent.maxx &&
                        sm.rectangle[3] > extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] > extent.minx &&
                        sm.rectangle[1] > extent.miny &&
                        sm.rectangle[2] > extent.maxx &&
                        sm.rectangle[3] < extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] > extent.minx &&
                        sm.rectangle[1] < extent.miny &&
                        sm.rectangle[2] < extent.maxx &&
                        sm.rectangle[3] > extent.miny
                    ) ||
                    (
                        sm.rectangle[0] < extent.minx &&
                        sm.rectangle[1] > extent.miny &&
                        sm.rectangle[2] > extent.minx &&
                        sm.rectangle[3] < extent.maxy
                    )
                ) {
                    var layer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({
                        url: sm.url,
                        rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(sm.rectangle[0], sm.rectangle[1], sm.rectangle[2], sm.rectangle[3])
                    }))

                    baseLayer.push({ layer, id: sm.id })
                }
            })
        },
        ranging () {
            global.viewer.measure.distanceSurface()
        },
        area () {
            global.viewer.measure.area()
        },
        clear () {
            global.viewer.measure.deactivate()
        },
        fullImg () {
            this.addMxTileset()
        },
    }
}

</script>

<style lang="scss" scoped>
.container {
    width: 1020px;
    height: 600px;
    background: url(/zhxy/img/home/map.png) no-repeat;
    background-size: contain;
    border: 1px solid #28f2ff;
<style lang="scss">
.mapBtnList {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -128px;
    display: flex;
    box-sizing: border-box;
    // display: none;
    .mapBtn {
        width: 44px;
        height: 44px;
        background-position: -6px -6px;
        z-index: 2;
        margin-left: 5px;
        color: #28f2ff;
        text-align: center;
        line-height: 68px;
        font-size: 14px;
        cursor: default;
        border: 1px solid transparent;
    }
    .btn1 {
        background-image: url(/zhxy/img/home/full-img.png);
    }
    .btn2 {
        background-image: url(/zhxy/img/home/ranging.png);
    }
    .btn3 {
        background-image: url(/zhxy/img/home/area.png);
    }
    .btn4 {
        background-image: url(/zhxy/img/home/panorama.png);
    }
    .btn5 {
        background-image: url(/zhxy/img/home/clear.png);
    }
}
.mapBtnList :hover {
    border: 1px solid white !important;
}
</style>

 src/pcviews/homee/PipeNetCount/index.vue

@@ -63,7 +63,7 @@
                    show: true,
                    text: ['{a|▎}', '{b|管网统计}'],
                    left: 16,
                    top: 16,
                    top: 6,
                    textStyle: {
                        rich: {
                            a: {
@@ -151,7 +151,7 @@
<style lang="scss" scoped>
.container {
    width: 400px;
    height: 310px;
    height: 100%;
    background: url(/zhxy/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;


 src/pcviews/homee/PipeWellPercent/index.vue

@@ -97,7 +97,7 @@
<style lang="scss" scoped>
.container {
    width: 400px;
    height: 310px;
    height: 100%;
    background: url(/zhxy/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;
    .chart {

 src/pcviews/homee/SchoolCostCompare/index.vue

@@ -189,9 +189,9 @@
.container {
    position: relative;
    width: 400px;
    height: 270px;
    height: 100%;
    background: url(/zhxy/img/home/juxing2.png);
    background-size: 100%;
    background-size: 100% 100%;
    .chart {
        width: 100%;
        height: 100%;

 src/pcviews/homee/SchoolInfo/index.vue

@@ -47,9 +47,9 @@
.container {
    position: relative;
    width: 400px;
    height: 270px;
    height: 100%;
    background: url(/zhxy/img/home/juxing2.png);
    background-size: 100%;
    background-size: 100% 100%;
    .title {
        position: absolute;
        display: flex;
@@ -85,9 +85,10 @@
        font-size: 14px;
        color: #e9f2f3;
        font-weight: 400;
        line-height: 28px;
        line-height: 24px;

        span {
            font-size: 18px;
            font-size: 16px;
            color: #28f2ff;
            margin-right: 7px;
        }

 src/pcviews/homee/index.vue

@@ -1,7 +1,9 @@
<template>
    <div class="page">
        <div class="screen-container">
            <div class="header">
            <Header></Header>
            </div>
            <div class="screen-body">
                <section class="screen_left">
                    <div class="left_top">
@@ -16,9 +18,7 @@
                </section>
                <section class="screen_middle">
                    <div class="middle_top">
                        <!-- <Map></Map> -->
                        <!-- <mapBox2></mapBox2> -->
                        <mapBox3></mapBox3>
                        <Map></Map>
                    </div>
                    <div class="middle_bottom">
                        <AlertInfo></AlertInfo>
@@ -68,6 +68,8 @@

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    position: relative;
    background: url(/zhxy/img/login/background.png);
    background-size: 100% auto;
@@ -75,14 +77,19 @@
.screen-container {
    width: 100%;
    height: 100%;
    justify-content: space-between;

    padding: 0 30px;
    box-sizing: border-box;

    .header {
        height: 100px;
    }

    .screen-body {
        width: 100%;
        height: 100%;
        height: calc(100% - 140px);
        display: flex;
        margin-top: 22px;
        margin-top: 20px;
        .screen_left {
            height: 100%;
            width: 21.5%;
@@ -91,27 +98,33 @@
            justify-content: flex-start;
            .left_top {
                width: 100%;
                height: 28%;
            }
            .left_middle {
                width: 100%;
                height: 32%;
                margin-top: 20px;
            }
            .left_bottom {
                flex: 1;
                width: 100%;
                margin-top: 20px;
            }
        }
        .screen_middle {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 54.8%;
            margin-left: 1.2%;
            margin-right: 1.2%;
            .middle_top {
                width: 100%;
                height: 600px;
                height: 62.5%;
                position: relative;
            }
            .middle_bottom {
                flex: 1;
                width: 100%;
                margin-top: 20px;
            }
@@ -119,17 +132,21 @@
        .screen_right {
            height: 100%;
            width: 21.5%;
            display: flex;
            flex-direction: column;
            .right_top {
                width: 100%;
                height: 28%;
            }
            .right_middle {
                width: 100%;
                height: 32%;
                margin-top: 20px;
            }
            .right_bottom {
                flex: 1;
                width: 100%;
                margin-top: -50px;
                margin-bottom: 30px;
                margin-top: 20px;
            }
        }
    }