From 2a3bfbc64a74f3afaeced0756fcb2e4f60b94a24 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Wed, 12 Oct 2022 17:43:25 +0800
Subject: [PATCH] 首页布局调整
---
src/pcviews/homee/Map/index.vue | 287 +++++++++++++++++++++++++
/dev/null | 289 --------------------------
src/pcviews/homee/Devices/index.vue | 12
src/pcviews/homee/PipeWellPercent/index.vue | 2
src/pcviews/homee/index.vue | 37 ++
src/pcviews/homee/BuildingCost/index.vue | 2
src/pcviews/homee/SchoolCostCompare/index.vue | 4
public/img/home/ellipse5-copy.png | 0
src/pcviews/homee/AlertInfo/index.vue | 8
src/pcviews/homee/PipeNetCount/index.vue | 4
src/pcviews/homee/SchoolInfo/index.vue | 9
11 files changed, 325 insertions(+), 329 deletions(-)
diff --git "a/public/img/home/\346\244\255\345\234\206 5 \346\213\267\350\264\235.png" b/public/img/home/ellipse5-copy.png
similarity index 100%
rename from "public/img/home/\346\244\255\345\234\206 5 \346\213\267\350\264\235.png"
rename to public/img/home/ellipse5-copy.png
Binary files differ
diff --git a/src/components/map3/index.vue b/src/components/map3/index.vue
deleted file mode 100644
index da30414..0000000
--- a/src/components/map3/index.vue
+++ /dev/null
@@ -1,289 +0,0 @@
-<template>
- <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>
-import {
- getSceneList
-} from '@/api/pc/leftNav/index'
-const sceneLayer = null
-
-let baseLayer = []
-
-let tilesetLayer, tileset
-
-import baseLayerImgUrl from '@/assets/baseUrl'
-
-export default {
- name: 'mapBox3',
- 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">
-.mapBtnList {
- position: absolute;
- bottom: 10px;
- left: 50%;
- margin-left: -128px;
- display: flex;
- box-sizing: border-box;
- .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(/img/home/full-img.png);
- }
- .btn2 {
- background-image: url(/img/home/ranging.png);
- }
- .btn3 {
- background-image: url(/img/home/area.png);
- }
- .btn4 {
- background-image: url(/img/home/panorama.png);
- }
- .btn5 {
- background-image: url(/img/home/clear.png);
- }
-}
-.mapBtnList :hover {
- border: 1px solid white !important;
-}
-</style>
\ No newline at end of file
diff --git a/src/pcviews/homee/AlertInfo/index.vue b/src/pcviews/homee/AlertInfo/index.vue
index eaf14ab..d9a5e4e 100644
--- a/src/pcviews/homee/AlertInfo/index.vue
+++ b/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;
diff --git a/src/pcviews/homee/BuildingCost/index.vue b/src/pcviews/homee/BuildingCost/index.vue
index d10ffa7..b7cfcb0 100644
--- a/src/pcviews/homee/BuildingCost/index.vue
+++ b/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 {
diff --git a/src/pcviews/homee/Devices/index.vue b/src/pcviews/homee/Devices/index.vue
index 61caa13..01be8ae 100644
--- a/src/pcviews/homee/Devices/index.vue
+++ b/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%;
diff --git a/src/pcviews/homee/Map/index.vue b/src/pcviews/homee/Map/index.vue
index c334000..19e407a 100644
--- a/src/pcviews/homee/Map/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/pcviews/homee/PipeNetCount/index.vue b/src/pcviews/homee/PipeNetCount/index.vue
index a04a815..37a65c8 100644
--- a/src/pcviews/homee/PipeNetCount/index.vue
+++ b/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%;
diff --git a/src/pcviews/homee/PipeWellPercent/index.vue b/src/pcviews/homee/PipeWellPercent/index.vue
index 74f093b..c9cd844 100644
--- a/src/pcviews/homee/PipeWellPercent/index.vue
+++ b/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 {
diff --git a/src/pcviews/homee/SchoolCostCompare/index.vue b/src/pcviews/homee/SchoolCostCompare/index.vue
index cbe3cc3..3a30e01 100644
--- a/src/pcviews/homee/SchoolCostCompare/index.vue
+++ b/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%;
diff --git a/src/pcviews/homee/SchoolInfo/index.vue b/src/pcviews/homee/SchoolInfo/index.vue
index 42c4211..44bce87 100644
--- a/src/pcviews/homee/SchoolInfo/index.vue
+++ b/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;
}
diff --git a/src/pcviews/homee/index.vue b/src/pcviews/homee/index.vue
index 579639b..a352c9f 100644
--- a/src/pcviews/homee/index.vue
+++ b/src/pcviews/homee/index.vue
@@ -1,7 +1,9 @@
<template>
<div class="page">
<div class="screen-container">
- <Header></Header>
+ <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;
}
}
}
--
Gitblit v1.9.3