|
|
@@ -19,7 +19,7 @@
|
|
|
type: 'card',
|
|
|
title: '历年频发问题Top10',
|
|
|
titleWidth: 85,
|
|
|
- boxWidth: '400',
|
|
|
+ boxWidth: '400'
|
|
|
}"
|
|
|
>
|
|
|
<template slot="top"><TopCard :dataSize="10" /></template>
|
|
|
@@ -29,11 +29,7 @@
|
|
|
<!-- <h2>浦东新区</h2> -->
|
|
|
<div class="droplet-box-title">浦东新区</div>
|
|
|
<div class="droplet-box">
|
|
|
- <div
|
|
|
- class="droplet-box-item"
|
|
|
- v-for="item in townCollection"
|
|
|
- :key="item.name"
|
|
|
- >
|
|
|
+ <div class="droplet-box-item" v-for="item in townCollection" :key="item.name">
|
|
|
<div class="problem-num">{{ item.num }} 个</div>
|
|
|
<div class="problem-img"></div>
|
|
|
<div class="problem-title">{{ item.name }}</div>
|
|
|
@@ -56,10 +52,7 @@
|
|
|
<div class="selected-icon" @click="showLayers"></div>
|
|
|
<div class="layers-control-icon" @click="selectLayers"></div>
|
|
|
<div class="searchbox">
|
|
|
- <el-input
|
|
|
- placeholder="请输入地址、地块名称等"
|
|
|
- v-model="analysis.searchInput"
|
|
|
- ></el-input>
|
|
|
+ <el-input placeholder="请输入地址、地块名称等" v-model="analysis.searchInput"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="ComprehensiveContainer-left">
|
|
|
@@ -112,9 +105,8 @@
|
|
|
<MenuCard :menuData="menus.left[6]"> </MenuCard>
|
|
|
</div>
|
|
|
<!-- 底部菜单 2 -- 疑点筛查 -->
|
|
|
- <div id="bottomMenus" v-if="$ifMenu('2', '')">
|
|
|
- <div>我是底部菜单svg</div>
|
|
|
- <div>我是底部菜单</div>
|
|
|
+ <div id="leftMenusB" v-if="$ifMenu('2', '')">
|
|
|
+ <BottomMenus />
|
|
|
</div>
|
|
|
<!-- 中部菜单列 -->
|
|
|
<div id="mainMenus" v-if="$ifMenu('1', '')">
|
|
|
@@ -158,21 +150,14 @@
|
|
|
type: 'chart',
|
|
|
title: '图例',
|
|
|
boxWidth: '150',
|
|
|
- boxHeight: '180',
|
|
|
+ boxHeight: '180'
|
|
|
}"
|
|
|
><div class="legend-container">
|
|
|
<div class="left-container">
|
|
|
- <div
|
|
|
- class="legend-icon"
|
|
|
- v-for="(item, index) in legendData"
|
|
|
- :key="index"
|
|
|
- :style="{ background: item }"
|
|
|
- ></div>
|
|
|
+ <div class="legend-icon" v-for="(item, index) in legendData" :key="index" :style="{ background: item }"></div>
|
|
|
</div>
|
|
|
<div class="right-container">
|
|
|
- <div class="lengend-title" v-for="item in buttonData" :key="item">
|
|
|
- {{ item }} 类
|
|
|
- </div>
|
|
|
+ <div class="lengend-title" v-for="item in buttonData" :key="item">{{ item }} 类</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</MenuCard>
|
|
|
@@ -185,8 +170,7 @@
|
|
|
<TagCard :data="tagCardData3"></TagCard>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <template slot="bottom">
|
|
|
- <ChartCard :title="'近三年林地面积变化'" /> </template
|
|
|
+ <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
|
|
|
></MenuCard>
|
|
|
<MenuCard :menuData="menus.right[1]" v-if="$ifMenu('1', '')">
|
|
|
<template slot="top">
|
|
|
@@ -196,8 +180,7 @@
|
|
|
<TagCard :data="tagCardData"></TagCard>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <template slot="bottom">
|
|
|
- <ChartCard :title="'近三年审计项目变化'" /> </template
|
|
|
+ <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
|
|
|
></MenuCard>
|
|
|
<MenuCard :menuData="menus.right[2]" v-if="$ifMenu('1', '')">
|
|
|
<template slot="top">
|
|
|
@@ -210,8 +193,7 @@
|
|
|
<TagCard :data="tagCardData3"></TagCard>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <template slot="bottom">
|
|
|
- <ChartCard :title="'近三年土地类问题变化'" /> </template
|
|
|
+ <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
|
|
|
></MenuCard>
|
|
|
<MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '1')">
|
|
|
<template slot="top">
|
|
|
@@ -227,18 +209,13 @@ import Header from "@/components/layout/Header.vue";
|
|
|
import MenuCard from "@/components/layout/MenuCard";
|
|
|
import NewSelect from "@/components/common/NewSelect.vue";
|
|
|
import BarChart from "@/components/chart/BarChart.vue";
|
|
|
-import {
|
|
|
- street,
|
|
|
- streetLocation,
|
|
|
- soilData,
|
|
|
- waterData,
|
|
|
- forestryData,
|
|
|
-} from "@/config/common";
|
|
|
+import { street, streetLocation, soilData, waterData, forestryData } from "@/config/common";
|
|
|
import publicFun from "@/utils/publicFunction.js";
|
|
|
import TagCard from "@/components/common/TagCard";
|
|
|
import ChartCard from "@/components/common/ChartCard.vue";
|
|
|
import TagTableCard from "@/components/common/TagTableCard";
|
|
|
import TopCard from "@/components/common/TopCard";
|
|
|
+import BottomMenus from "@/components/common/BottomMenus";
|
|
|
// 镇域专题组件
|
|
|
export default {
|
|
|
name: "HomeView",
|
|
|
@@ -252,6 +229,7 @@ export default {
|
|
|
ChartCard,
|
|
|
TagTableCard,
|
|
|
TopCard,
|
|
|
+ BottomMenus
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -259,19 +237,19 @@ export default {
|
|
|
type: "tb",
|
|
|
title: "土地资源",
|
|
|
value: 100,
|
|
|
- unit: "公顷",
|
|
|
+ unit: "公顷"
|
|
|
},
|
|
|
tagCardData2: {
|
|
|
type: "tb",
|
|
|
title: "土地资源面积",
|
|
|
value: 172,
|
|
|
- unit: "公顷",
|
|
|
+ unit: "公顷"
|
|
|
},
|
|
|
tagCardData3: {
|
|
|
type: "lr",
|
|
|
title: "林地面积",
|
|
|
value: 654,
|
|
|
- unit: "公顷",
|
|
|
+ unit: "公顷"
|
|
|
},
|
|
|
testTitle: "土地资源",
|
|
|
activeIndex: 1,
|
|
|
@@ -286,7 +264,7 @@ export default {
|
|
|
title: "基本农田被违规占用",
|
|
|
titleWidth: 81,
|
|
|
boxHeight: 236,
|
|
|
- imageUrl: "https://s1.ax1x.com/2022/11/16/zZY1cq.png",
|
|
|
+ imageUrl: "/static/images/2.png"
|
|
|
},
|
|
|
{
|
|
|
type: "imageMenu",
|
|
|
@@ -294,7 +272,7 @@ export default {
|
|
|
title: "基本农田种林",
|
|
|
titleWidth: 81,
|
|
|
boxHeight: 236,
|
|
|
- imageUrl: "https://s1.ax1x.com/2022/11/16/zZY3j0.png",
|
|
|
+ imageUrl: "/static/images/3.png"
|
|
|
},
|
|
|
{
|
|
|
type: "imageMenu",
|
|
|
@@ -302,7 +280,7 @@ export default {
|
|
|
title: "基本农田抛荒",
|
|
|
titleWidth: 81,
|
|
|
boxHeight: 236,
|
|
|
- imageUrl: "https://s1.ax1x.com/2022/11/16/zZYl3n.png",
|
|
|
+ imageUrl: "/static/images/1.png"
|
|
|
},
|
|
|
{
|
|
|
type: "imageMenu",
|
|
|
@@ -310,8 +288,8 @@ export default {
|
|
|
title: "一般耕地被违规占用",
|
|
|
titleWidth: 81,
|
|
|
boxHeight: 236,
|
|
|
- imageUrl: "https://s1.ax1x.com/2022/11/16/zZYQ9s.png",
|
|
|
- },
|
|
|
+ imageUrl: "/static/images/4.png"
|
|
|
+ }
|
|
|
],
|
|
|
main: [
|
|
|
{
|
|
|
@@ -319,16 +297,16 @@ export default {
|
|
|
title: "浦东新区自然资源分布TOP10",
|
|
|
boxWidth: "360",
|
|
|
boxHeight: "370",
|
|
|
- boxBackground: "rgba(0,39,77,0.6)",
|
|
|
- },
|
|
|
+ boxBackground: "rgba(0,39,77,0.6)"
|
|
|
+ }
|
|
|
],
|
|
|
right: [
|
|
|
{ type: "card", title: "资金投入情况", titleWidth: 64 },
|
|
|
{ type: "card", title: "资源环境项目", titleWidth: 64 },
|
|
|
{ type: "card", title: "历年频发问题TOP5", titleWidth: 81 },
|
|
|
{ type: "card", title: "土地类问题", titleWidth: 60 },
|
|
|
- { type: "card", title: "土地类问题TOP5", titleWidth: 81 },
|
|
|
- ],
|
|
|
+ { type: "card", title: "土地类问题TOP5", titleWidth: 81 }
|
|
|
+ ]
|
|
|
},
|
|
|
// 首页饼图相关
|
|
|
buttonData: ["A", "B", "C"],
|
|
|
@@ -338,19 +316,19 @@ export default {
|
|
|
soil: [],
|
|
|
water: [],
|
|
|
forestry: [],
|
|
|
- categoryData:[]
|
|
|
+ categoryData: []
|
|
|
},
|
|
|
BData: {
|
|
|
soil: [],
|
|
|
water: [],
|
|
|
forestry: [],
|
|
|
- categoryData:[]
|
|
|
+ categoryData: []
|
|
|
},
|
|
|
CData: {
|
|
|
soil: [],
|
|
|
water: [],
|
|
|
forestry: [],
|
|
|
- categoryData:[]
|
|
|
+ categoryData: []
|
|
|
},
|
|
|
streetSelectVal: "全部街道",
|
|
|
streetOptions: [],
|
|
|
@@ -359,12 +337,12 @@ export default {
|
|
|
{ name: "土地资源问题", num: 67 },
|
|
|
{ name: "水资源问题", num: 37 },
|
|
|
{ name: "林地资源问题", num: 60 },
|
|
|
- { name: "生态资源问题", num: 55 },
|
|
|
+ { name: "生态资源问题", num: 55 }
|
|
|
],
|
|
|
// 综合分析
|
|
|
analysis: {
|
|
|
- searchInput: "",
|
|
|
- },
|
|
|
+ searchInput: ""
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -379,19 +357,19 @@ export default {
|
|
|
this.soil = this.AData.soil;
|
|
|
this.water = this.AData.water;
|
|
|
this.forestry = this.AData.forestry;
|
|
|
- this.categoryData = this.AData.categoryData
|
|
|
+ this.categoryData = this.AData.categoryData;
|
|
|
break;
|
|
|
case "B":
|
|
|
this.soil = this.BData.soil;
|
|
|
this.water = this.BData.water;
|
|
|
this.forestry = this.BData.forestry;
|
|
|
- this.categoryData = this.BData.categoryData
|
|
|
+ this.categoryData = this.BData.categoryData;
|
|
|
break;
|
|
|
case "C":
|
|
|
this.soil = this.CData.soil;
|
|
|
this.water = this.CData.water;
|
|
|
this.forestry = this.CData.forestry;
|
|
|
- this.categoryData = this.CData.categoryData
|
|
|
+ this.categoryData = this.CData.categoryData;
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
@@ -415,7 +393,7 @@ export default {
|
|
|
// 综合分析 - 折叠
|
|
|
collapsePanelEvent() {},
|
|
|
// 综合分析 - 关闭面板
|
|
|
- closeEvent() {},
|
|
|
+ closeEvent() {}
|
|
|
},
|
|
|
created() {
|
|
|
// 目录
|
|
|
@@ -430,19 +408,10 @@ export default {
|
|
|
let CDataArr = [];
|
|
|
// 街道排序
|
|
|
for (let i in category) {
|
|
|
- let ADataSum =
|
|
|
- soilData[category[i]].A +
|
|
|
- waterData[category[i]].A +
|
|
|
- forestryData[category[i]].A;
|
|
|
- let BDataSum =
|
|
|
- soilData[category[i]].B +
|
|
|
- waterData[category[i]].B +
|
|
|
- forestryData[category[i]].B;
|
|
|
+ let ADataSum = soilData[category[i]].A + waterData[category[i]].A + forestryData[category[i]].A;
|
|
|
+ let BDataSum = soilData[category[i]].B + waterData[category[i]].B + forestryData[category[i]].B;
|
|
|
|
|
|
- let CDataSum =
|
|
|
- soilData[category[i]].C +
|
|
|
- waterData[category[i]].C +
|
|
|
- forestryData[category[i]].C;
|
|
|
+ let CDataSum = soilData[category[i]].C + waterData[category[i]].C + forestryData[category[i]].C;
|
|
|
ADataArr.push({ name: category[i], sum: ADataSum });
|
|
|
BDataArr.push({ name: category[i], sum: BDataSum });
|
|
|
CDataArr.push({ name: category[i], sum: CDataSum });
|
|
|
@@ -453,40 +422,40 @@ export default {
|
|
|
CDataArr.sort(publicFun.compare("sum"));
|
|
|
|
|
|
// 按A,B,C分出各自资源的排序数组
|
|
|
- ADataArr.forEach((item) => {
|
|
|
+ ADataArr.forEach(item => {
|
|
|
this.AData.soil.push(soilData[item.name].A);
|
|
|
this.AData.water.push(waterData[item.name].A);
|
|
|
this.AData.forestry.push(forestryData[item.name].A);
|
|
|
- this.AData.categoryData.push(item.name)
|
|
|
+ this.AData.categoryData.push(item.name);
|
|
|
});
|
|
|
|
|
|
- BDataArr.forEach((item) => {
|
|
|
+ BDataArr.forEach(item => {
|
|
|
this.BData.soil.push(soilData[item.name].B);
|
|
|
this.BData.water.push(waterData[item.name].B);
|
|
|
this.BData.forestry.push(forestryData[item.name].B);
|
|
|
- this.BData.categoryData.push(item.name)
|
|
|
+ this.BData.categoryData.push(item.name);
|
|
|
});
|
|
|
|
|
|
- CDataArr.forEach((item) => {
|
|
|
+ CDataArr.forEach(item => {
|
|
|
this.CData.soil.push(soilData[item.name].C);
|
|
|
this.CData.water.push(waterData[item.name].C);
|
|
|
this.CData.forestry.push(forestryData[item.name].C);
|
|
|
- this.CData.categoryData.push(item.name)
|
|
|
+ this.CData.categoryData.push(item.name);
|
|
|
});
|
|
|
|
|
|
this.soil = this.AData.soil;
|
|
|
this.water = this.AData.water;
|
|
|
this.forestry = this.AData.forestry;
|
|
|
- this.categoryData = this.AData.categoryData
|
|
|
+ this.categoryData = this.AData.categoryData;
|
|
|
|
|
|
// 街道下拉框
|
|
|
for (let key in street) {
|
|
|
this.streetOptions.push({
|
|
|
value: street[key],
|
|
|
- label: street[key],
|
|
|
+ label: street[key]
|
|
|
});
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@@ -763,29 +732,12 @@ export default {
|
|
|
display: none; /* Chrome Safari */
|
|
|
}
|
|
|
}
|
|
|
-// 底部菜单
|
|
|
-#bottomMenus {
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- flex-direction: column-reverse;
|
|
|
- align-content: center;
|
|
|
- align-items: center;
|
|
|
+// 底部菜单定位
|
|
|
+#leftMenusB {
|
|
|
+ position:absolute;
|
|
|
+ top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- // svg
|
|
|
- &>div:nth-child(1){
|
|
|
- width: 981px;
|
|
|
- height: 60px;
|
|
|
- z-index: 99999;
|
|
|
- }
|
|
|
- // menusBox
|
|
|
- &>div:nth-child(2){
|
|
|
- width: 981px;
|
|
|
- height: 200px;
|
|
|
- background-color: rgba(0,47,86,0.6);
|
|
|
- z-index: 99999;
|
|
|
- border: 1px solid #00aaff;
|
|
|
- }
|
|
|
}
|
|
|
#mainMenus {
|
|
|
position: absolute;
|
|
|
@@ -936,22 +888,14 @@ export default {
|
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
|
width: 110px;
|
|
|
height: 100px;
|
|
|
- background: linear-gradient(to left, @commonBorderColor, @commonBorderColor)
|
|
|
- left top no-repeat,
|
|
|
- linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
|
|
|
- top no-repeat,
|
|
|
- linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
|
|
|
- no-repeat,
|
|
|
- linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
|
|
|
- top no-repeat,
|
|
|
- linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
|
|
|
- bottom no-repeat,
|
|
|
- linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
|
|
|
- bottom no-repeat,
|
|
|
- linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
|
|
|
- bottom no-repeat,
|
|
|
- linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
|
|
|
- bottom no-repeat;
|
|
|
+ background: linear-gradient(to left, @commonBorderColor, @commonBorderColor) left top no-repeat,
|
|
|
+ linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left top no-repeat,
|
|
|
+ linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top no-repeat,
|
|
|
+ linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right top no-repeat,
|
|
|
+ linear-gradient(to left, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
|
|
|
+ linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
|
|
|
+ linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat,
|
|
|
+ linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat;
|
|
|
background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
|
|
|
}
|
|
|
}
|
DESKTOP-6LTVLN7\Liumouren
