Skip to content

A
alien-species-think-tank
Commit b6325792 authored by 范加坤's avatar 范加坤
Browse files
Options

feat: 图表过滤

parent 2f638850
Show whitespace changes
Inline Side-by-side
Showing with 239 additions and 441 deletions
src/views/detail/species.vue
View file @ b6325792
......@@ -196,7 +196,7 @@
</div>
</div>
</div>
<div class="data-info right-info">
<!-- <div class="data-info right-info">
<div class="info-item invade-info">
<div class="info-title">
<img src="@/assets/img/title.png" alt="">
......@@ -232,7 +232,7 @@
</div>
</div>
</div>
</div> -->
</div>
</template>
......@@ -488,7 +488,7 @@ export default {
}
// 左侧信息卡片
.left-info{
width: 25%;
width: 30%;
margin-bottom: 15px;
// height: 100%;
overflow-y: auto;
......@@ -518,7 +518,7 @@ export default {
}
// 中部信息卡片
.main-info{
width: 55%;
width: 70%;
margin: 0 15px;
display: flex;
flex-direction: column;
......
src/views/list/invade.vue
View file @ b6325792
......@@ -30,7 +30,7 @@
</div>
</div>
<div class="after-search" slot="addonAfter">
<a-icon type="scan" style="margin-right: 20px" @click="judge" />
<!-- <a-icon type="scan" style="margin-right: 20px" @click="judge" /> -->
<a-icon type="search" @click="onSearchChange" />
</div>
</a-input>
......
src/views/list/species.vue
View file @ b6325792
......@@ -8,24 +8,35 @@
placeholder="物种名称"
>
<div slot="addonBefore" class="search-before">
<div class="selected-item" @click="selectListShow = !selectListShow">
{{speciesTypeList[speciesType]}}
<a-icon class="select-icon"
:type="selectListShow?'up':'down'" />
<div
class="selected-item"
@click="selectListShow = !selectListShow"
>
{{ speciesTypeList[speciesType] }}
<a-icon
class="select-icon"
:type="selectListShow ? 'up' : 'down'"
/>
</div>
<div class="select-list" v-show="selectListShow">
<div class="select-item"
<div
class="select-item"
v-for="(value, key) in speciesTypeList"
:key="key"
@click="checkSpeciesType(key)">
{{value}}
@click="checkSpeciesType(key)"
>
{{ value }}
</div>
</div>
</div>
<div class="after-search" slot="addonAfter">
<a-icon type="scan" style="margin-right:20px;"
@click="judge"/>
<a-icon type="search" @click="onSearchChange"/>
<!-- <a-icon type="scan" style="margin-right:20px;"
@click="judge"/> -->
<a-icon
type="search"
@click="onSearchChange"
style="margin-right: 20px"
/>
</div>
</a-input>
</div>
......@@ -34,182 +45,183 @@
</div> -->
</div>
<div class="data-main">
<water-full-data :name="fullName" :type="speciesType" ref="data"></water-full-data>
<water-full-data
:name="fullName"
:type="speciesType"
ref="data"
></water-full-data>
</div>
<camera-ai ref="ai"></camera-ai>
</div>
</template>
<script>
import { TYPE_KEY } from '@/views/config/foreign.config.js'
import WaterFullData from '../data/WaterFullData'
import CameraAi from '../list/cameraAI'
import { TYPE_KEY } from "@/views/config/foreign.config.js";
import WaterFullData from "../data/WaterFullData";
import CameraAi from "../list/cameraAI";
// import FilterWidget from '@/components/FilterWidget/FilterWidget'
export default {
name: '',
name: "",
components: {
WaterFullData,
CameraAi
CameraAi,
// FilterWidget
},
data () {
data() {
return {
speciesTypeList: {
[TYPE_KEY.ALL]: '所有',
[TYPE_KEY.PLANT]: '植物',
[TYPE_KEY.ANIMAL]: '动物',
[TYPE_KEY.DISEASE]: '微生物'
[TYPE_KEY.ALL]: "所有",
[TYPE_KEY.PLANT]: "植物",
[TYPE_KEY.ANIMAL]: "动物",
[TYPE_KEY.DISEASE]: "微生物",
},
selectListShow: false,
// 搜索项
name: '',
name: "",
// 传入搜索项
fullName: this.$route.query.name,
speciesType: TYPE_KEY.ALL,
filterList: [
{
code: 'breedType',
value: '繁殖方式',
code: "breedType",
value: "繁殖方式",
children: [
{
code: '1',
value: '有性繁殖'
code: "1",
value: "有性繁殖",
},
{
code: '2',
value: '无性繁殖'
}
]
code: "2",
value: "无性繁殖",
},
],
},
{
code: 'spreadType',
value: '传播方式',
code: "spreadType",
value: "传播方式",
children: [
{
code: '1',
value: '根茎'
code: "1",
value: "根茎",
},
{
code: '2',
value: '种子'
}
]
code: "2",
value: "种子",
},
],
},
{
code: 'economyDanger',
value: '经济危害',
code: "economyDanger",
value: "经济危害",
children: [
{
code: '1',
value: '农业'
code: "1",
value: "农业",
},
{
code: '2',
value: '林业'
code: "2",
value: "林业",
},
{
code: '3',
value: '牧业'
code: "3",
value: "牧业",
},
{
code: '4',
value: '渔业'
code: "4",
value: "渔业",
},
{
code: '5',
value: '其他'
}
]
code: "5",
value: "其他",
},
],
},
{
code: 'ecologyDanger',
value: '生态危害',
code: "ecologyDanger",
value: "生态危害",
children: [
{
code: '1',
value: '植物'
code: "1",
value: "植物",
},
{
code: '2',
value: '动物'
code: "2",
value: "动物",
},
{
code: '3',
value: '人体'
code: "3",
value: "人体",
},
{
code: '4',
value: '人类活动'
code: "4",
value: "人类活动",
},
{
code: '5',
value: '生态危害'
code: "5",
value: "生态危害",
},
{
code: '6',
value: '环境危害'
}
]
}
],
data: []
}
},
props: {
code: "6",
value: "环境危害",
},
mounted () {
],
},
computed: {
],
data: [],
};
},
props: {},
mounted() {},
computed: {},
methods: {
change () {
this.$refs.data.refresh()
change() {
this.$refs.data.refresh();
},
checkSpeciesType (key) {
this.speciesType = key
this.selectListShow = false
checkSpeciesType(key) {
this.speciesType = key;
this.selectListShow = false;
},
judge () {
this.$refs.ai.open()
judge() {
this.$refs.ai.open();
},
onSearchChange() {
this.fullName = this.name;
},
onSearchChange () {
this.fullName = this.name
}
},
watch: {
$route: {
handler (to) {
handler(to) {
if (to.query.name) {
this.name = to.query.name
this.name = to.query.name;
}
},
immediate: true
}
}
}
immediate: true,
},
},
};
</script>
<style lang="less" scoped>
.species-data{
.species-data {
width: 60%;
height: 100%;
margin: 20px auto;
.data-filter{
.data-filter {
width: 100%;
.filter-name{
.filter-name {
height: 46px;
margin-bottom: 10px;
i{
i {
font-size: 20px;
}
}
.selected-item{
i{
.selected-item {
i {
font-size: 16px;
}
}
}
.data-main{
.data-main {
width: 98%;
margin: 0 auto;
}
......
src/views/list/speciesPlant.vue
View file @ b6325792
......@@ -24,8 +24,8 @@
</div>
</div>
<div class="after-search" slot="addonAfter">
<a-icon type="scan" style="margin-right:20px;"
@click="judge"/>
<!-- <a-icon type="scan" style="margin-right:20px;"
@click="judge"/> -->
<a-icon type="search" @click="onSearchChange" />
</div>
</a-input>
......
src/views/map/components/baseMsg.vue
View file @ b6325792
......@@ -41,7 +41,7 @@
<div style="margin-right: 1vh">
<div class="info-title">舆情监测点数量</div>
<div class="info-value">
{{ yuqingNum }}
<!-- {{ yuqingNum }} -->
</div>
</div>
<a-switch v-model="otherLayerStatus1" />
......@@ -116,19 +116,9 @@ export default {
this.getList();
this.getIntrusionMsg();
this.getSpeciesInvadeWaihaidiam();
// 同步入侵触发机制
let data = null;
switch (this.type) {
case "invade":
data = { provinceCode: "-1" };
break;
case "spreadZh":
case "spreadGlobal":
data = "-1";
break;
}
this.$emit("onChange", { species: this.species, areaCode: data });
this.$emit("onChange", { species: this.species, areaCode: "-1" });
},
computed: {
// getSpeciesList() {
......@@ -225,10 +215,14 @@ export default {
let arr = [];
let add = [];
res.data.forEach((item) => {
if (item.pcode && item.pname) {
add.push(JSON.stringify({ pcode: item.pcode, pname: item.pname }));
}
if (item.物种序号) {
item.物种序号.split("、").forEach((i) => {
arr.push(i);
});
}
});
let arr1 = [];
r.data.forEach((i) => {
......@@ -254,62 +248,16 @@ export default {
});
}
this.list = arr1;
this.addList = [...new Set(add)].map((item) => {
this.addList = [...new Set(add)]
.map((item) => {
return JSON.parse(item);
})
.sort((a, b) => {
return a.pcode - b.pcode;
});
},
// 获取物种入侵详情
async getIntrusionMsg() {
const params = {};
if (this.species !== "-1") {
params.filter = ["=", "id", this.species];
}
const res = await this.$api.layer.query("species_invade_yuqing", params);
if (res) {
console.log(res, "resresresres");
this.addrDetail = res.data;
}
},
async getSpeciesInvadeWaihaidiam() {
const param = {
groupFields: ["pxzqmc", "pxzqdm"],
aggregates: [["pxzqdm", "count"]],
};
if (this.species !== "-1") {
param.filter = ["=", "id", this.species];
}
const res = await this.$api.layer.aggregation(
"species_invade_waihaidian",
param
);
if (res) {
this.waihaidianList = res.data;
}
},
onSpeciesChange() {
// this.addr = "-1";
// this.getIntrusionMsg();
// const { query, path } = this.$route;
// this.$router.push({
// path,
// query: Object.assign({}, query, { id: this.species }),
// });
// let data = null;
// switch (this.type) {
// case "invade":
// data = { provinceCode: "-1" };
// break;
// case "spreadZh":
// data = "-1";
// this.getSpeciesInvadeWaihaidiam();
// break;
// case "spreadGlobal":
// data = "-1";
// break;
// }
this.$emit("onChange", { species: this.species, areaCode: this.addr });
},
onAreaChange(e) {
......@@ -351,7 +299,6 @@ export default {
const obj = val.find((item) => item.id === this.species);
if (!obj) {
this.species = "-1";
this.getIntrusionMsg();
}
},
addrVal(val) {
......
src/views/map/invade/species.vue
View file @ b6325792
......@@ -66,13 +66,13 @@
</template>
</div>
</div>
<div class="map-info-show" v-show="config.show.info">
<div class="map-info-show" v-show="showClose">
<a-tag
closable
color="#077dd3cc"
v-if="year !== '0'"
@close="year = '0'"
>{{ year }}</a-tag
v-if="showClose"
@close="closeCurTime"
>{{ invadeSortByTime[curTimeIdx] }}</a-tag
>
<a-tag
closable
......@@ -127,6 +127,8 @@ export default {
invadeFilter: {},
addMap: {},
dateMap: {},
currentAreaCode: null,
currentSpecies: null,
};
},
props: {
......@@ -145,31 +147,6 @@ export default {
...mapState({
provincePoint: (state) => state.map.provincePoint,
}),
// invadeSortByTime() {
// let _invade = this.addrDetail.features;
// if (!_invade) return [];
// if (this.year !== "0") {
// _invade = _invade.filter(
// (item) => item.properties.time.indexOf(this.year) !== -1
// );
// }
// if (this.addrMsg.code !== "-1") {
// _invade = _invade.filter(
// (item) => item.properties.province_code === this.addrMsg.code
// );
// }
// _invade = _invade.map((item) => {
// let _dtList = item.properties.time.split(".");
// _dtList = _dtList.slice(0, 2);
// // console.log()
// return _dtList[0].substring(0, 7);
// });
// _invade = Array.from(new Set(_invade));
// _invade.sort((a, b) => {
// return new Date(a) - new Date(b);
// });
// return [..._invade];
// },
invadeSortByYear() {
let _invadeYear = this.addrDetail.features.map((item) => {
return item.properties.time.split(".")[0].substring(0, 7);
......@@ -224,18 +201,28 @@ export default {
return sortList.sort((a, b) => a.count - b.count);
},
getYearOption() {
// const xData = this.invadeSortByYear.map((item) => item.name);
const yData = Object.values(this.dateMap);
const xData = Object.keys(this.dateMap);
// const yData = this.invadeSortByYear.map((item) => item.count);
const xData = Object.keys(this.dateMap).sort((a, b) => {
const x = Number(a.split("-").join(""));
const y = Number(b.split("-").join(""));
return x - y;
});
let yData = [];
xData.forEach((x) => {
let a = this.dateMap[x];
if (this.currentSpecies) {
a = a.filter((i) => {
return i.speciesCodes.indexOf(`_${this.currentSpecies}_`) !== -1;
});
}
if (this.currentAreaCode) {
a = a.filter((i) => {
return i.pcode == this.currentAreaCode;
});
}
yData.push(a.length);
});
console.log(xData, yData, "aaa");
const option = {
// title: {
// text: '逐年入侵报告次数',
// textStyle: {
// color: 'rgba(12,88,97,.8)',
// fontSize: 16
// }
// },
color: ["#d65108"],
backgroundColor: "#fff",
grid: {
......@@ -295,15 +282,33 @@ export default {
return option;
},
getAddrOption() {
const yData = Object.values(this.addMap);
let values = [];
let labels = [];
Object.keys(this.addMap).forEach((k) => {
if (this.currentSpecies) {
console.log(this.addMap[k]);
let v = this.addMap[k].filter((i) => {
return i.speciesCodes.indexOf(`_${this.currentSpecies}_`) !== -1;
});
if (v.length) {
labels.push(k);
values.push(v.length);
}
} else {
labels.push(k);
values.push(this.addMap[k].length);
}
});
console.log(labels, values, "values");
const option = {
dataZoom: [
{
type: "inside",
orient: "vertical",
width: 20,
startValue: yData.length,
endValue: yData.length > 10 ? yData.length - 10 : 0,
startValue: labels.length,
endValue: labels.length > 10 ? labels.length - 10 : 0,
// maxSpan: 5
},
{
......@@ -341,7 +346,7 @@ export default {
yAxis: [
{
type: "category",
data: Object.keys(this.addMap),
data: labels,
axisTick: {
show: false,
},
......@@ -358,7 +363,7 @@ export default {
name: "入侵报告次数",
type: "bar",
barWidth: 12,
data: Object.values(this.addMap),
data: values,
label: {
show: true,
position: "right",
......@@ -381,6 +386,7 @@ export default {
watch: {
play(newVal, oldVal) {
if (newVal) {
this.showClose = false;
let i = 0;
this.mapTimer = setInterval(() => {
if (i === this.invadeSortByTime.length) {
......@@ -397,18 +403,19 @@ export default {
console.log(i, this.invadeSortByTime[i]);
}, 1000);
} else {
if (this.curTimeIdx) {
this.showClose = true;
}
clearInterval(this.mapTimer);
// this.setFilter();
}
},
addrMsg(newVal, oldVal) {
this.setFilter();
this.setPollutionFilter();
this.setHhyFilter();
},
year(newVal, oldVal) {
this.setFilter();
this.setPollutionFilter();
},
curTimeIdx(newVal, oldVal) {
// this.setFilter();
......@@ -452,12 +459,6 @@ export default {
...this.config.map,
});
this.map.on("load", async () => {
if (this.species !== "-1") {
// await this.getIntrusionMsg(["=", "id", this.species]);
} else {
// await this.getIntrusionMsg();
}
// await this.addVertorLayer();
window.map = this.map;
this.addPoint();
this.$emit("load");
......@@ -474,20 +475,31 @@ export default {
let arr = [];
const addMap = {};
const dateMap = {};
const _data = res.data.map((item) => {
const _data = [];
res.data.forEach((item) => {
item.speciesCodes = item.物种序号
? item.物种序号
.split("、")
.map((a) => {
return `_${a}_`;
})
.join(",")
: "";
if (addMap[item.pname]) {
addMap[item.pname] += 1;
addMap[item.pname].push(item);
} else {
addMap[item.pname] = 1;
addMap[item.pname] = [item];
}
if (dateMap[item.发布时间.slice(0, 7)]) {
dateMap[item.发布时间.slice(0, 7)] += 1;
dateMap[item.发布时间.slice(0, 7)].push(item);
} else {
dateMap[item.发布时间.slice(0, 7)] = 1;
dateMap[item.发布时间.slice(0, 7)] = [item];
}
arr.push(item.发布时间);
return {
if (item.经度 && item.纬度) {
_data.push({
type: "Feature",
geometry: {
type: "Point",
......@@ -495,14 +507,9 @@ export default {
},
properties: {
...item,
speciesCodes: item.物种序号
.split("、")
.map((a) => {
return `_${a}_`;
})
.join(","),
},
};
});
}
});
console.log(addMap, dateMap);
......@@ -518,7 +525,12 @@ export default {
];
console.log(arr);
this.invadeSortByTime = arr;
this.invadeSortByTime = arr.sort((a, b) => {
const x = Number(a.split("-").join(""));
const y = Number(b.split("-").join(""));
console.log(x);
return x - y;
});
this.yuqingNum = _data.length;
this.dataCopy = _data;
......@@ -631,110 +643,6 @@ export default {
},
});
},
async addVertorLayer() {
const res = await this.$api.layer.aggregation(
"species_invade_waihaidian",
{ aggregates: [["_id", "count"]] }
);
console.log(res);
this.diaochaNum = res.data[0]._id_count;
this.map.addSource(this.vertorLayerId, {
tiles: [
"http://39.104.87.15/api/tileset/ias_inland_point/{z}/{x}/{y}.vector.pbf",
],
type: "vector",
maxzoom: 3,
});
this.map.addLayer({
id: this.vertorLayerId,
type: "circle",
source: this.vertorLayerId,
"source-layer": "layer",
layout: {
visibility: this.otherLayerStatus ? "visible" : "none",
},
paint: {
"circle-color": "rgba(9, 132, 227,.6)",
"circle-radius": 7,
"circle-stroke-color": "rgba(255,255,255,.2)",
"circle-stroke-width": 1,
},
});
const layerId = this.vertorLayerIdOutline;
// 动效
this.map.addLayer(
{
id: layerId,
source: this.vertorLayerId,
type: "circle",
"source-layer": "layer",
layout: {
visibility: this.otherLayerStatus ? "visible" : "none",
},
paint: {
"circle-radius": 0,
"circle-color": "rgba(9, 132, 227,0)",
},
},
this.vertorLayerId
);
let radius = 7;
let opacity = 0.5;
this.outlineTVertorimer = setInterval(() => {
if (radius > 9) {
radius = 6;
opacity = 0.3;
}
radius += 1;
opacity -= 0.05;
opacity = opacity.toFixed(2);
this.map.setPaintProperty(layerId, "circle-radius", radius);
this.map.setPaintProperty(
layerId,
"circle-color",
`rgba(9, 132, 227,${opacity})`
);
if (opacity === "0.00") {
this.map.setPaintProperty(layerId, "circle-radius", 6);
}
}, 200);
this.setPollutionFilter();
if (this.config.click) {
this.map.on("click", this.vertorLayerId, this.addVertorClick);
this.map.on("mouseenter", this.vertorLayerId, () => {
this.map.getCanvas().style.cursor = "pointer";
});
this.map.on("mouseleave", this.vertorLayerId, () => {
this.map.getCanvas().style.cursor = "";
});
}
},
addVertorClick(e) {
console.log(e, e.features);
const { geometry } = e.features[0];
if (this.clickMarker) {
this.clickMarker.remove();
}
const html = '<div id = "pop-detail"></div>';
this.clickMarker = new mapboxgl.Popup({
className: "map-popup",
})
.setHTML(html)
.setLngLat(geometry.coordinates)
.addTo(this.map);
const PopupListItem = Vue.extend(PopupList);
new PopupListItem({
propsData: {
list: e.features
.map((item) => {
return item.properties;
})
.slice(0, 9),
type: "table",
},
}).$mount("#pop-detail");
},
fly(config = { center: [108.53, 32.69], zoom: 3 }) {
this.map.flyTo(config);
},
......@@ -742,7 +650,7 @@ export default {
if (!item) {
this.$set(this.invadeFilter, "time", null);
this.setInvadeFilter();
this.curTimeIdx = -1;
this.curTimeIdx = null;
return;
}
this.curTimeIdx = idx;
......@@ -752,9 +660,14 @@ export default {
this.setInvadeFilter();
if (!flag) {
this.play = false;
this.showClose = true;
}
this.curTimeIdx = idx;
},
closeCurTime() {
this.$set(this.invadeFilter, "time", null);
this.setInvadeFilter();
},
setInvadeFilter() {
let filter = Object.values(this.invadeFilter).filter((item) => {
return item;
......@@ -801,55 +714,6 @@ export default {
}
},
async setPollutionFilter() {
if (this.map && this.map.getLayer(this.vertorLayerId)) {
const filter = [];
const filter1 = [];
// if (this.year !== '0') {
// filter.push(['==', 'year', this.year])
// }
if (this.addrMsg.code !== "-1") {
filter.push(["==", "PXZQDM", String(this.addrMsg.code)]);
filter1.push(["=", "pxzqdm", String(this.addrMsg.code)]);
}
if (![-1, "-1"].includes(this.species)) {
filter.push(["==", "id", String(this.species)]);
filter1.push(["=", "id", String(this.species)]);
}
let res = null;
let res1 = null;
if (filter.length === 1) {
res = filter[0];
res1 = filter1[0];
} else if (filter.length > 1) {
res = ["all", ...filter];
res1 = ["all", ...filter1];
}
const result = await this.$api.layer.aggregation(
"species_invade_waihaidian",
{ aggregates: [["_id", "count"]], filter: res1 }
);
console.log(result);
this.diaochaNum = result.data[0]._id_count;
console.log(res);
this.map.setFilter(this.vertorLayerId, res);
this.map.setFilter(this.vertorLayerIdOutline, res);
}
},
async getIntrusionMsg(filter) {
const params = {
returnGeometry: true,
};
filter && (params.filter = filter);
const res = await this.$api.layer.query("species_invade_yuqing", params);
if (res) {
this.addrDetail = res.data;
this.addPointData();
}
},
addPointData() {
if (this.map.getLayer("invade")) {
const _data = this.addrDetail.features.map((item) => {
......@@ -870,58 +734,33 @@ export default {
}
},
async onChange({ species = "-1", areaCode }) {
console.log(species, areaCode);
console.log(species, areaCode, "ecies, areaCod");
if (species == "-1") {
this.$set(this.invadeFilter, "species", null);
this.currentSpecies = null;
} else {
let filter = [
"!=",
["number", ["index-of", `_${species}_`, ["get", "speciesCodes"]]],
-1,
];
this.currentSpecies = species;
this.$set(this.invadeFilter, "species", filter);
}
if (areaCode == "-1") {
this.$set(this.invadeFilter, "area", null);
this.currentAreaCode = null;
} else {
let filter = ["==", ["get", "pcode"], areaCode];
this.currentAreaCode = areaCode;
this.$set(this.invadeFilter, "area", filter);
}
this.setInvadeFilter();
// console.log(species, areaCode);
// const filter = ["all"];
// if (![-1, "-1"].includes(species)) {
// this.species = species;
// filter.push(["=", "id", species]);
// this.setPollutionFilter();
// } else {
// this.species = species;
// this.setPollutionFilter();
// }
// if (areaCode.provinceCode !== "-1") {
// this.addrMsg = {
// name: areaCode.province,
// code: areaCode.provinceCode,
// };
// // filter.push(['=', 'province_code', areaCode.provinceCode])
// } else {
// this.addrMsg = { code: "-1" };
// }
// let res = null;
// if (filter.length === 2) {
// res = filter.pop();
// } else if (filter.length > 2) {
// res = filter;
// }
// // await this.getIntrusionMsg(res);
// this.setFilter();
// this.setPollutionFilter();
},
barYearClick({ name }) {
this.year = name;
// this.year = name;
},
barAddrClick({ name }) {
const data = this.invadeSort.find((item) => item.name === name);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment