elink-star
/
yifeng_integration
16
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

解决页面卡顿问题,其他页面占位

master
mk 2 years ago
parent
069ac1b358
commit
4d10af8e8a
10 changed files with 468 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/components/screen-map-header/index.vue
  2. 2
      src/store/modules/map.js
  3. 55
      src/views/next/screen-content-left/hsyf-left/index.vue
  4. 55
      src/views/next/screen-content-left/szyf-left/index.vue
  5. 19
      src/views/next/screen-content-map/cpt/chinaMap.vue
  6. 211
      src/views/next/screen-content-map/cpt/home-map.vue
  7. 22
      src/views/next/screen-content-map/cpt/zdyf-map.vue
  8. 55
      src/views/next/screen-content-right/home-right/index.vue
  9. 55
      src/views/next/screen-content-right/hsyf-right/index.vue
  10. 64
      src/views/next/screen-content-right/szyf-right/index.vue

15
src/components/screen-map-header/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="map-header">
<div class="flex">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="item" v-for="(item, index) in data" :key="index">
<div class="name">{{ item.name }}</div>
<section>
<span :class="{ 'num': true, 'yellow': index === 4 }">{{ item.num }}</span>
@ -16,15 +16,14 @@
export default {
data() {
return {
list: [
{ name: '年平均气温', units: '°C', num: '24' },
{ name: '年日光照', units: '小时', num: '2700' },
{ name: '无霾期', units: '天', num: '200' },
{ name: '年平均降水', units: '毫升', num: '687' },
{ name: '土壤有机质', units: '含量', num: '1.5%' }
]
};
},
props:{
data:{
type:Array,
default:()=>[]
}
},
created() { },
methods: {},
components: {},

2
src/store/modules/map.js
View File

@ -4,7 +4,7 @@ export default {
streetId: '12121212121212ab', // 锦水街道id 1215437824174608386
communityId: '', // 社区id
gridId: '', // 网格id
navId:'zdyf'//选中nav
navId:'sy'//选中nav
},
mutations: {
set_mapLevel (state, mapLevel) {

55
src/views/next/screen-content-left/hsyf-left/index.vue
View File

@ -1,20 +1,55 @@
<template>
<div class=''></div>
<div>
<div class='card' style="height: 292px;">
<screen-title>
<div slot="left" class="screen-title-left">组织建设</div>
</screen-title>
</div>
<div class='card' style="margin-top: 8px;height: 266px;">
<screen-title>
<div slot="left" class="screen-title-left">党员分析</div>
</screen-title>
</div>
<div class='card m-top12' style="height: 318px;">
<screen-title>
<div slot="left" class="screen-title-left">党员风采</div>
</screen-title>
<div class="card-item-zdyf">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
export default {
data() {
return {
};
},
created() {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
created() {},
methods: {},
components:{},
computed:{},
watch: {},
components: {},
computed: {},
watch: {},
}
</script>
<style lang="scss" scoped>
.card {
width: 100%;
display: flex;
flex-direction: column;
}
</style>

55
src/views/next/screen-content-left/szyf-left/index.vue
View File

@ -1,20 +1,55 @@
<template>
<div class=''></div>
<div>
<div class='card' style="height: 292px;">
<screen-title>
<div slot="left" class="screen-title-left">事件处理实况</div>
</screen-title>
</div>
<div class='card' style="margin-top: 8px;height: 266px;">
<screen-title>
<div slot="left" class="screen-title-left">事件处理实况</div>
</screen-title>
</div>
<div class='card m-top12' style="height: 318px;">
<screen-title>
<div slot="left" class="screen-title-left">重点维稳人员</div>
</screen-title>
<div class="card-item-zdyf">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
export default {
data() {
return {
};
},
created() {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
created() {},
methods: {},
components:{},
computed:{},
watch: {},
components: {},
computed: {},
watch: {},
}
</script>
<style lang="scss" scoped>
.card {
width: 100%;
display: flex;
flex-direction: column;
}
</style>

19
src/views/next/screen-content-map/cpt/chinaMap.vue
View File

@ -9,17 +9,18 @@ export default {
data() {
return {
seriesData: [],
convertData: []
convertData: [],
myChart: null
}
},
mounted() {
this.seriesData = china.features.map(item => ({ name: item.properties.name, value: 1 })).filter(item=>item.name!='南海诸岛')
this.seriesData = china.features.map(item => ({ name: item.properties.name, value: 1 })).filter(item => item.name != '南海诸岛')
this.convertData = china.features.map(item => ({ name: item.properties.name, value: item.properties.center }))
this.initData();
},
methods: {
initData() {
var myChart = echarts.init(document.getElementById("chinaMap"));
this.myChart = echarts.init(document.getElementById("chinaMap"));
echarts.registerMap("china", china);
let { seriesData, convertData } = this
let option = {
@ -123,18 +124,18 @@ export default {
color: '#092550'
}
},
silent: 1,
// silent: 1,
data: convertData
}
]
};
myChart.setOption(option);
myChart.on("click", (params) =>
this.$emit("toProvince", { fileName: params.name })
);
this.myChart.setOption(option);
},
},
beforeDestroy() {
this.myChart.dispose();
}
};
</script>

211
src/views/next/screen-content-map/cpt/home-map.vue
View File

@ -1,20 +1,215 @@
<template>
<div class=''>1111</div>
<div style="width: 100% ;height: 100%;">
<div id="myMap">
<screen-map-header :data="headerList"></screen-map-header>
</div>
</div>
</template>
<script>
import { Scene, PolygonLayer, LineLayer, } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import yifengJson from './yifeng.json';
import chinaMap from "./chinaMap.vue"
import { mapActions } from 'vuex'
let myMap;
let scene;
let polygonLayer;
let lineLayer;
let textLayer;
export default {
data() {
return {};
return {
darkStyle: {
style: "amap://styles/blue",
polygonColor: [
// "rgba(255, 100, 60, 0.5)",
// "rgba(43, 231, 253, 0.35)",
"rgba(0, 127, 241, .5)",
// "rgba(255, 255, 50, 0.35)",
],
lineColor: [
// "rgba(255, 180, 150, 0.9)",
// "rgba(43, 231, 253, 0.7)",
"rgba(0, 127, 241, .6)",
// "rgba(255, 255, 50, 0.7)",
],
circleColor: [
// "rgba(255, 180, 150, 0.99)",
// "rgba(43, 231, 253, 0.99)",
"rgba(0, 127, 241, 0.99)",
// "rgba(255, 255, 50, 0.99)",
],
textColor: [
// "rgba(255, 100, 60, 0.99)",
// "rgba(43, 231, 253, 0.99)",
"rgba(126, 187, 255, 1)",
// "rgba(255, 255, 50, 0.99)",
],
textStrokeColor: "#fff",
},
lightStyle: {
style: "amap://styles/whitesmoke",
polygonColor: [
// "rgba(255, 100, 60, 0.3)",
"rgba(43, 231, 253, 0.3)",
// "rgba(255, 255, 50, 0.3)",
],
lineColor: [
// "rgba(220, 150, 120, 0.9)",
"rgba(155, 212, 242, 1)",
// "rgba(200, 200, 50, 0.9)",
],
circleColor: [
// "rgba(255, 180, 150, 0.99)",
"rgba(13, 181, 203, 0.8)",
// "rgba(255, 255, 50, 0.99)",
],
textColor: [
// "rgba(200, 50, 10, 0.99)",
"rgba(0, 130, 153, 0.99)",
// "rgba(120, 120, 0, 0.99)",
],
textStrokeColor: "#666",
},
headerList: [
{ name: '镇域面积', units: '公里²', num: '199' },
{ name: '耕地面积', units: '万亩', num: '17.4' },
{ name: '新村', units: '个', num: '10' },
{ name: '网格村', units: '个', num: '99' },
{ name: '辖区人口', units: '万人', num: '9.3' }
],
};
},
created() {
},
mounted() {
this.$nextTick(() => {
this.init();
})
},
created() {},
methods: {},
components:{},
computed:{},
methods: {
init() {
if (!yifengJson) return false;
myMap = new GaodeMap({
pitch: 40.24716321414439,
mapStyle: "amap://styles/darkblue",
// style: styleConfig.style,
showLabel: false,
center: [120.220563, 36.496127],
token: "fc14b42e0ca18387866d68ebd4f150c1",
zoom: 7,
isHotspot: false,
showIndoorMap: false,
showBuildingBlock: false,
resizeEnable: true,
doubleClickZoom: false,
showRoad: false,
viewMode: "3D",
});
scene = new Scene({
id: "myMap",
logoVisible: false,
map: myMap,
});
scene.on("loaded", () => {
this.initPolygonLayer()
});
// scene.on("click", (feature) => {
// // console.log(feature);
// });
},
initPolygonLayer() {
const { darkStyle } = this;
let styleConfig = darkStyle;
let data = yifengJson
// 画区域面积
polygonLayer = new PolygonLayer({
autoFit: true,
})
.size(300)
.source(data)
.color("name", styleConfig.polygonColor)
.shape("extrude")
// .shape("fill")
.style({
opacityLinear: {
enable: true, // true - false
dir: "out", // in - out
},
opacity: 0.8,
heightfixed: true,
sourceColor: '#4ee8fc',
targetColor: '#00284e',
});
scene.addLayer(polygonLayer);
// 画区域边
lineLayer = new LineLayer({
zIndex: 2,
name: "line2",
})
.source(data)
.shape("line")
.size(1)
.color("name", styleConfig.lineColor)
.style({
opacity: 1,
raisingHeight: 300,
})
.animate({
interval: 1, // 间隔
duration: 2, // 持续时间，延时
trailLength: 2, // 流线长度
});
scene.addLayer(lineLayer);
textLayer = new PolygonLayer({
zIndex: 20,
})
.source(data)
.color("name", styleConfig.textColor)
.shape("name", "text")
.size(14)
.style({
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: styleConfig.textStrokeColor, // 描边颜色
strokeWidth: 0.1, // 描边宽度
strokeOpacity: 0.8,
raisingHeight: 300,
textAllowOverlap: true,
})
.active(true);
scene.addLayer(textLayer);
let _this = this
polygonLayer.on("click", (e) => {
});
},
},
components: { chinaMap },
computed: {},
watch: {},
}
</script>
<style lang="scss" scoped>
.map-header {
position: absolute;
top: 100px;
left: 50%;
transform: translate(-50%);
width: 745px;
height: 58px;
z-index: 10;
}
#myMap {
width: 100%;
height: 100%;
}
</style>

22
src/views/next/screen-content-map/cpt/zdyf-map.vue
View File

@ -12,7 +12,7 @@
</div>
<div id="myMap" v-if="mapFlag == 'Amap'">
<div v-if="mapType == 'polygon'">
<screen-map-header></screen-map-header>
<screen-map-header :data="headerList"></screen-map-header>
<screen-map-legeng></screen-map-legeng>
</div>
</div>
@ -25,7 +25,7 @@ import yifengJson from './yifeng.json';
import point from './point.json';
import chinaMap from "./chinaMap.vue"
import { mapActions } from 'vuex'
// let myMap;
let myMap;
let scene;
let circleLayerSmall;
let roadLayer;
@ -91,8 +91,14 @@ export default {
],
textStrokeColor: "#666",
},
headerList: [
{ name: '年平均气温', units: '°C', num: '24' },
{ name: '年日光照', units: '小时', num: '2700' },
{ name: '无霾期', units: '天', num: '200' },
{ name: '年平均降水', units: '毫升', num: '687' },
{ name: '土壤有机质', units: '含量', num: '1.5%' }
],
mapType: '',
myMap: null
};
},
created() {
@ -119,8 +125,7 @@ export default {
let that = this
if (type === 'unit') {
this.mapFlag = 'Amap'
console.log(this.myMap);
if (!this.myMap) {
if (!myMap) {
setTimeout(() => {
that.init(type)
}, 500)
@ -131,7 +136,7 @@ export default {
} else if (type === 'Emap') {
this.mapFlag = 'Emap'
scene.destroy();
this.myMap = null
myMap = null
}
},
toProvince() {
@ -142,7 +147,7 @@ export default {
},
init(type) {
if (!yifengJson) return false;
this.myMap = new GaodeMap({
myMap = new GaodeMap({
pitch: 40.24716321414439,
mapStyle: "amap://styles/darkblue",
// style: styleConfig.style,
@ -159,11 +164,10 @@ export default {
viewMode: "3D",
});
let map = this.myMap
scene = new Scene({
id: "myMap",
logoVisible: false,
map: map,
map: myMap,
});
scene.on("loaded", () => {
if (!type) {

55
src/views/next/screen-content-right/home-right/index.vue
View File

@ -1,20 +1,55 @@
<template>
<div class=''></div>
<div>
<div class='card' style="height: 292px;">
<screen-title>
<div slot="left" class="screen-title-left">和美移风</div>
</screen-title>
</div>
<div class='card' style="margin-top: 8px;height: 266px;">
<screen-title>
<div slot="left" class="screen-title-left">善治移风</div>
</screen-title>
</div>
<div class='card m-top12' style="height: 318px;">
<screen-title>
<div slot="left" class="screen-title-left">文化移风</div>
</screen-title>
<div class="card-item-zdyf">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
export default {
data() {
return {
};
},
created() {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
created() {},
methods: {},
components:{},
computed:{},
watch: {},
components: {},
computed: {},
watch: {},
}
</script>
<style lang="scss" scoped>
.card {
width: 100%;
display: flex;
flex-direction: column;
}
</style>

55
src/views/next/screen-content-right/hsyf-right/index.vue
View File

@ -1,20 +1,55 @@
<template>
<div class=''></div>
<div>
<div class='card' style="height: 292px;">
<screen-title>
<div slot="left" class="screen-title-left">党建活动</div>
</screen-title>
</div>
<div class='card' style="margin-top: 8px;height: 266px;">
<screen-title>
<div slot="left" class="screen-title-left">支部风采</div>
</screen-title>
</div>
<div class='card m-top12' style="height: 318px;">
<screen-title>
<div slot="left" class="screen-title-left">党务公开</div>
</screen-title>
<div class="card-item-zdyf">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
export default {
data() {
return {
};
},
created() {
},
mounted() {
},
created() {},
methods: {},
components:{},
computed:{},
watch: {},
beforeDestroy() {
},
methods: {
},
components: {},
computed: {},
watch: {},
}
</script>
<style lang="scss" scoped>
.card {
width: 100%;
display: flex;
flex-direction: column;
}
</style>

64
src/views/next/screen-content-right/szyf-right/index.vue
View File

@ -1,20 +1,64 @@
<!--
* @Author: mk 2403457699@qq.com
* @Date: 2024-01-16 10:06:10
* @LastEditors: mk 2403457699@qq.com
* @LastEditTime: 2024-01-25 10:50:11
* @Description: 介绍一下改动了什么
*
*
-->
<template>
<div class=''></div>
<div>
<div class='card' style="height: 292px;">
<screen-title>
<div slot="left" class="screen-title-left">服务事项分析</div>
</screen-title>
</div>
<div class='card' style="margin-top: 8px;height: 266px;">
<screen-title>
<div slot="left" class="screen-title-left">事件处理实况</div>
</screen-title>
</div>
<div class='card m-top12' style="height: 318px;">
<screen-title>
<div slot="left" class="screen-title-left">重点帮扶人员</div>
</screen-title>
<div class="card-item-zdyf">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
export default {
data() {
return {
};
},
created() {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
created() {},
methods: {},
components:{},
computed:{},
watch: {},
components: {},
computed: {},
watch: {},
}
</script>
<style lang="scss" scoped>
.card {
width: 100%;
display: flex;
flex-direction: column;
}
</style>

Write Preview
Loading…
Cancel
Save