|
|
@@ -23,7 +23,7 @@
|
|
|
menuIndex: '2',
|
|
|
subMenuIndex: '5',
|
|
|
legendIcon: legendIcon,
|
|
|
- legendTitle: legendTitle
|
|
|
+ legendTitle: legendTitle,
|
|
|
}"
|
|
|
/>
|
|
|
<div class="select-title">所属街道</div>
|
|
|
@@ -41,12 +41,17 @@
|
|
|
type: 'card',
|
|
|
title: streetSelectVal + '资源问题',
|
|
|
titleWidth: 40,
|
|
|
- boxWidth: '780'
|
|
|
+ boxWidth: '780',
|
|
|
}"
|
|
|
>
|
|
|
<template slot="top">
|
|
|
<div class="town-problems-top-inner">
|
|
|
- <TagProblemCard class="problem-item" v-for="n in townCollection" :key="n.name" :data="n" />
|
|
|
+ <TagProblemCard
|
|
|
+ class="problem-item"
|
|
|
+ v-for="n in townCollection"
|
|
|
+ :key="n.name"
|
|
|
+ :data="n"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
</MenuCard>
|
|
|
@@ -65,7 +70,7 @@
|
|
|
field: 'c_wtfl',
|
|
|
dataType: 'all',
|
|
|
dataSize: 10,
|
|
|
- topData: []
|
|
|
+ topData: [],
|
|
|
}"
|
|
|
></MenuCard>
|
|
|
<MenuCard
|
|
|
@@ -81,7 +86,7 @@
|
|
|
field: 'c_wtfl',
|
|
|
dataType: 'all',
|
|
|
dataSize: 10,
|
|
|
- topData: []
|
|
|
+ topData: [],
|
|
|
}"
|
|
|
></MenuCard>
|
|
|
</div>
|
|
|
@@ -89,7 +94,10 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 综合分析 -->
|
|
|
- <ComprehensiveAnalysis id="ComprehensiveContainer" v-if="$ifMenu('3', '')" />
|
|
|
+ <ComprehensiveAnalysis
|
|
|
+ id="ComprehensiveContainer"
|
|
|
+ v-if="$ifMenu('3', '')"
|
|
|
+ />
|
|
|
|
|
|
<!-- 法律法规 -->
|
|
|
<LawView id="LawContainer" v-if="$ifMenu('5', '1')" />
|
|
|
@@ -104,7 +112,8 @@
|
|
|
</div>
|
|
|
<!-- 左侧菜单列(较宽，两列) -- 疑点筛查 -->
|
|
|
<div id="leftMenusW" v-for="(item, index) in menus.leftW" :key="index">
|
|
|
- <MenuCard :menuData="item2" v-for="item2 in item" :key="item2.title"> </MenuCard>
|
|
|
+ <MenuCard :menuData="item2" v-for="item2 in item" :key="item2.title">
|
|
|
+ </MenuCard>
|
|
|
</div>
|
|
|
<!-- 中部菜单列 -->
|
|
|
<div id="mainMenus">
|
|
|
@@ -136,7 +145,7 @@
|
|
|
class="bar"
|
|
|
:categoryData="categoryData"
|
|
|
:soilValueData="soil"
|
|
|
- :waterValueData="water"
|
|
|
+ :otherValueData="other"
|
|
|
:forestryValueData="forestry"
|
|
|
:sourceType="btnChecked"
|
|
|
/>
|
|
|
@@ -150,13 +159,22 @@
|
|
|
boxHeight: '180',
|
|
|
menuIndex: '1',
|
|
|
legendIcon: legendIcon,
|
|
|
- legendTitle: legendTitle
|
|
|
+ legendTitle: legendTitle,
|
|
|
}"
|
|
|
/>
|
|
|
</div>
|
|
|
<!-- 首页右侧菜单列 -->
|
|
|
- <div class="rightMenus" v-for="(item, index) in menus.right" :key="'rightBox' + index">
|
|
|
- <MenuCard :menuData="item2" v-for="(item2, index2) in item" :key="'right' + index2"> </MenuCard>
|
|
|
+ <div
|
|
|
+ class="rightMenus"
|
|
|
+ v-for="(item, index) in menus.right"
|
|
|
+ :key="'rightBox' + index"
|
|
|
+ >
|
|
|
+ <MenuCard
|
|
|
+ :menuData="item2"
|
|
|
+ v-for="(item2, index2) in item"
|
|
|
+ :key="'right' + index2"
|
|
|
+ >
|
|
|
+ </MenuCard>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -201,15 +219,16 @@ export default {
|
|
|
Legend,
|
|
|
WholeProcessManagement,
|
|
|
FrequencyView,
|
|
|
- LawView
|
|
|
+ LawView,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ classTextToIndex: {},
|
|
|
tagCardData3: {
|
|
|
type: "lr",
|
|
|
title: "林地面积",
|
|
|
value: 654,
|
|
|
- unit: "公顷"
|
|
|
+ unit: "公顷",
|
|
|
},
|
|
|
testTitle: "土地资源",
|
|
|
activeIndex: 1,
|
|
|
@@ -218,61 +237,61 @@ export default {
|
|
|
left: [],
|
|
|
leftW: [],
|
|
|
main: [],
|
|
|
- right: []
|
|
|
+ right: [],
|
|
|
},
|
|
|
// 首页饼图相关
|
|
|
buttonData: ["A", "B", "C"],
|
|
|
legendTitle: [
|
|
|
{
|
|
|
name: "A类",
|
|
|
- info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷"
|
|
|
+ info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷",
|
|
|
},
|
|
|
{
|
|
|
name: "B类",
|
|
|
- info: "有一定的自然资源资产(耕地林地总和 900-3000公项)"
|
|
|
+ info: "有一定的自然资源资产(耕地林地总和 900-3000公项)",
|
|
|
},
|
|
|
{
|
|
|
name: "C类",
|
|
|
- info: "自然资源资产较少(耕地林地总和低于 900公项)"
|
|
|
- }
|
|
|
+ info: "自然资源资产较少(耕地林地总和低于 900公项)",
|
|
|
+ },
|
|
|
],
|
|
|
// legendData: ["#E565FF", "#0055FF", "#00FFD5"],
|
|
|
legendIcon: [
|
|
|
{
|
|
|
background: "#E565FF",
|
|
|
- border: "none"
|
|
|
+ border: "none",
|
|
|
},
|
|
|
{
|
|
|
background: "#0055FF",
|
|
|
- border: "none"
|
|
|
+ border: "none",
|
|
|
},
|
|
|
{
|
|
|
background: "#00FFD5",
|
|
|
- border: "none"
|
|
|
- }
|
|
|
+ border: "none",
|
|
|
+ },
|
|
|
],
|
|
|
btnChecked: "A",
|
|
|
soil: [],
|
|
|
- water: [],
|
|
|
+ other: [],
|
|
|
forestry: [],
|
|
|
categoryData: [],
|
|
|
AData: {
|
|
|
soil: [],
|
|
|
- water: [],
|
|
|
+ other: [],
|
|
|
forestry: [],
|
|
|
- categoryData: []
|
|
|
+ categoryData: [],
|
|
|
},
|
|
|
BData: {
|
|
|
soil: [],
|
|
|
- water: [],
|
|
|
+ other: [],
|
|
|
forestry: [],
|
|
|
- categoryData: []
|
|
|
+ categoryData: [],
|
|
|
},
|
|
|
CData: {
|
|
|
soil: [],
|
|
|
- water: [],
|
|
|
+ other: [],
|
|
|
forestry: [],
|
|
|
- categoryData: []
|
|
|
+ categoryData: [],
|
|
|
},
|
|
|
streetSelectVal: "全部",
|
|
|
streetOptions: [],
|
|
|
@@ -281,12 +300,12 @@ export default {
|
|
|
{ name: "土地资源问题", num: 67 },
|
|
|
{ name: "水资源问题", num: 37 },
|
|
|
{ name: "林地资源问题", num: 60 },
|
|
|
- { name: "生态资源问题", num: 55 }
|
|
|
+ { name: "生态资源问题", num: 55 },
|
|
|
],
|
|
|
// 综合分析
|
|
|
analysis: {
|
|
|
- searchInput: ""
|
|
|
- }
|
|
|
+ searchInput: "",
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -294,12 +313,27 @@ export default {
|
|
|
this.selectSelectData("0", "浦东新区行政区划", "associatedItems");
|
|
|
},
|
|
|
methods: {
|
|
|
+ classDictQuery(type, cName, keyName) {
|
|
|
+ let params = new FormData();
|
|
|
+ params = {
|
|
|
+ type: type,
|
|
|
+ cName: cName,
|
|
|
+ };
|
|
|
+ this.$Post(this.urlsCollection.selectByCNameAType, params).then((res) => {
|
|
|
+ if (res.code === 200 && res.content.length > 0) {
|
|
|
+ this.classTextToIndex[keyName] = new Map();
|
|
|
+ res.content.forEach((v) => {
|
|
|
+ this.classTextToIndex[keyName].set(v.index + "", v.name);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
initMenu(menus) {
|
|
|
if (menus) {
|
|
|
this.menus = menus;
|
|
|
setTimeout(() => {
|
|
|
this.getSourcesData();
|
|
|
- },300);
|
|
|
+ }, 300);
|
|
|
}
|
|
|
// this.menus = menuOnLine;
|
|
|
// this.getSourcesData();
|
|
|
@@ -313,20 +347,20 @@ export default {
|
|
|
switch (type) {
|
|
|
case "A":
|
|
|
this.soil = this.AData.soil;
|
|
|
- this.water = this.AData.water;
|
|
|
+ this.other = this.AData.other;
|
|
|
this.forestry = this.AData.forestry;
|
|
|
this.categoryData = this.AData.categoryData;
|
|
|
|
|
|
break;
|
|
|
case "B":
|
|
|
this.soil = this.BData.soil;
|
|
|
- this.water = this.BData.water;
|
|
|
+ this.other = this.BData.other;
|
|
|
this.forestry = this.BData.forestry;
|
|
|
this.categoryData = this.BData.categoryData;
|
|
|
break;
|
|
|
case "C":
|
|
|
this.soil = this.CData.soil;
|
|
|
- this.water = this.CData.water;
|
|
|
+ this.other = this.CData.other;
|
|
|
this.forestry = this.CData.forestry;
|
|
|
this.categoryData = this.CData.categoryData;
|
|
|
break;
|
|
|
@@ -338,12 +372,12 @@ export default {
|
|
|
params.append("type", type);
|
|
|
params.append("cName", cName);
|
|
|
this.$Post(this.urlsCollection.selectByCNameAType, params).then(
|
|
|
- res => {
|
|
|
+ (res) => {
|
|
|
if (res.code === 200 && res.content.length > 0) {
|
|
|
this.$store.state.selectSelectDataMap[keyName] = res.content;
|
|
|
}
|
|
|
},
|
|
|
- error => {
|
|
|
+ (error) => {
|
|
|
this.$message.error(error);
|
|
|
console.log(error);
|
|
|
}
|
|
|
@@ -375,47 +409,53 @@ export default {
|
|
|
let params = new FormData();
|
|
|
params = {
|
|
|
columnId: 30,
|
|
|
- states: 3,
|
|
|
+ states: "0,1,2,3",
|
|
|
pageSize: 30,
|
|
|
- page: 0
|
|
|
+ page: 0,
|
|
|
};
|
|
|
this.$Post(this.urlsCollection.selectContentList, params)
|
|
|
- .then(res => {
|
|
|
+ .then((res) => {
|
|
|
if (res.code === 200 && res.content.data.length > 0) {
|
|
|
// console.log(res.content.data, "getSourcesData接口获取成功");
|
|
|
this.soil = [];
|
|
|
- this.water = [];
|
|
|
+ this.other = [];
|
|
|
this.forestry = [];
|
|
|
let data = res.content.data;
|
|
|
let ADataArr = [];
|
|
|
let BDataArr = [];
|
|
|
let CDataArr = [];
|
|
|
- data.map(v => {
|
|
|
+ data.map((v) => {
|
|
|
if (v.zy_type === "0") {
|
|
|
ADataArr.push({
|
|
|
- name: v.title,
|
|
|
+ name: this.classTextToIndex["浦东新区行政区划"].get(
|
|
|
+ v.zy_town
|
|
|
+ ),
|
|
|
soil: v.c_land_area,
|
|
|
- water: v.c_water_area,
|
|
|
+ other: v.other_area,
|
|
|
forest: v.c_forest_area,
|
|
|
- sum: v.c_land_area + v.c_water_area + v.c_forest_area
|
|
|
+ sum: v.c_land_area + v.other_area + v.c_forest_area,
|
|
|
});
|
|
|
}
|
|
|
if (v.zy_type === "1") {
|
|
|
BDataArr.push({
|
|
|
- name: v.title,
|
|
|
+ name: this.classTextToIndex["浦东新区行政区划"].get(
|
|
|
+ v.zy_town
|
|
|
+ ),
|
|
|
soil: v.c_land_area,
|
|
|
- water: v.c_water_area,
|
|
|
+ other: v.other_area,
|
|
|
forest: v.c_forest_area,
|
|
|
- sum: v.c_land_area + v.c_water_area + v.c_forest_area
|
|
|
+ sum: v.c_land_area + v.other_area + v.c_forest_area,
|
|
|
});
|
|
|
}
|
|
|
if (v.zy_type === "2") {
|
|
|
CDataArr.push({
|
|
|
- name: v.title,
|
|
|
+ name: this.classTextToIndex["浦东新区行政区划"].get(
|
|
|
+ v.zy_town
|
|
|
+ ),
|
|
|
soil: v.c_land_area,
|
|
|
- water: v.c_water_area,
|
|
|
+ other: v.other_area,
|
|
|
forest: v.c_forest_area,
|
|
|
- sum: v.c_land_area + v.c_water_area + v.c_forest_area
|
|
|
+ sum: v.c_land_area + v.other_area + v.c_forest_area,
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
@@ -425,22 +465,22 @@ export default {
|
|
|
CDataArr.sort(publicFun.compare("sum"));
|
|
|
|
|
|
// 按A,B,C分出各自资源的排序数组
|
|
|
- ADataArr.forEach(item => {
|
|
|
+ ADataArr.forEach((item) => {
|
|
|
this.AData.soil.push(item.soil);
|
|
|
- this.AData.water.push(item.water);
|
|
|
+ this.AData.other.push(item.other);
|
|
|
this.AData.forestry.push(item.forest);
|
|
|
this.AData.categoryData.push(item.name);
|
|
|
});
|
|
|
- BDataArr.forEach(item => {
|
|
|
+ BDataArr.forEach((item) => {
|
|
|
this.BData.soil.push(item.soil);
|
|
|
- this.BData.water.push(item.water);
|
|
|
+ this.BData.other.push(item.other);
|
|
|
this.BData.forestry.push(item.forest);
|
|
|
this.BData.categoryData.push(item.name);
|
|
|
});
|
|
|
|
|
|
- CDataArr.forEach(item => {
|
|
|
+ CDataArr.forEach((item) => {
|
|
|
this.CData.soil.push(item.soil);
|
|
|
- this.CData.water.push(item.water);
|
|
|
+ this.CData.other.push(item.other);
|
|
|
this.CData.forestry.push(item.forest);
|
|
|
this.CData.categoryData.push(item.name);
|
|
|
});
|
|
|
@@ -450,27 +490,29 @@ export default {
|
|
|
this.$refs.barChartRef.initEchart(
|
|
|
this.AData.categoryData,
|
|
|
this.AData.soil,
|
|
|
- this.AData.water,
|
|
|
- this.AData.forestry
|
|
|
+ this.AData.forestry,
|
|
|
+ this.AData.other
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
- .catch(error => {
|
|
|
+ .catch((error) => {
|
|
|
console.log(error, "getSourcesData");
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
+ this.classDictQuery("0", "浦东新区行政区划", "浦东新区行政区划");
|
|
|
+
|
|
|
// // 街道下拉框
|
|
|
for (let key in street) {
|
|
|
this.streetOptions.push({
|
|
|
value: street[key],
|
|
|
- label: street[key]
|
|
|
+ label: street[key],
|
|
|
});
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@@ -748,14 +790,22 @@ 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;
|
|
|
}
|
|
|
}
|
Bella