Commit b6325792 authored by 范加坤's avatar 范加坤

feat: 图表过滤

parent 2f638850
......@@ -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;
......
......@@ -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>
......
......@@ -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"
v-for="(value, key) in speciesTypeList"
:key="key"
@click="checkSpeciesType(key)">
{{value}}
<div
class="select-item"
v-for="(value, key) in speciesTypeList"
:key="key"
@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: '环境危害'
}
]
}
code: "6",
value: "环境危害",
},
],
},
],
data: []
}
},
props: {
},
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;
}
......
......@@ -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>
......
......@@ -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) => {
add.push(JSON.stringify({ pcode: item.pcode, pname: item.pname }));
item.物种序号.split("、").forEach((i) => {
arr.push(i);
});
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) => {
return JSON.parse(item);
});
},
// 获取物种入侵详情
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;
}
this.addList = [...new Set(add)]
.map((item) => {
return JSON.parse(item);
})
.sort((a, b) => {
return a.pcode - b.pcode;
});
},
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) {
......
This diff is collapsed.
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