dzhh-frontend/.svn/pristine/1b/1b2e87e78bc75c3195b0b6835090d698bff3376b.svn-base

<template>
    <div class="query" v-drag="'.query .ant-card-head'">
        <a-card v-show='value' title="查询" style="width: 350px; box-shadow: 0 0 5px #357ee5;">
            <a-icon slot="extra" type="close" style='cursor: pointer; color: #FFFFFF;' @click="$emit('input',false)"/>
            <a-input-group compact>
                <a-select v-model='queryType' style="width: 40%">
                    <a-select-option v-for="(item,index) in list" :value="item.id">
                        {{ item.queryName }}
                    </a-select-option>
                </a-select>
                <a-input-search allow-clear :loading="isLoading" style="width: 60%" v-model='keyword'
                                @search="handleSearch"
                                @pressEnter='handleSearch'/>
            </a-input-group>
            <a-list style='margin-top: 20px;' item-layout="horizontal" :data-source="data" :pagination="pagination">
                <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-list-item-meta @click="handleCoord(item)" :description="item.otherInfo">
                        <span slot="title">{{ item.name }}</span>
                        <a-avatar slot="avatar" class="result" :src="require(`@/assets/result${index+1}.png`)">
                        </a-avatar>
                    </a-list-item-meta>
                    <a-tag color="blue">
                        {{ item.layerName }}
                    </a-tag>
                    <!--          <a slot="actions">详情</a>-->
                </a-list-item>
            </a-list>
        </a-card>
        <locate-by-geoinfo ref="locateByGeoinfo"></locate-by-geoinfo>
    </div>
</template>

<script>
import {getAction, httpAction} from "../../../api/manage";
import LocateByGeoinfo from "./LocateByGeoinfo";


export default {
    name: 'queryTool',
    components: {LocateByGeoinfo},

    data() {
        return {
            map: '',
            visible: false,
            list: [{id: 'hhxx', name: '河湖信息'}, {id: 'hhhj', name: '河湖划界'}, {id: 'shgc', name: '涉河工程'}, {
                id: 'axgh',
                name: '岸线规划'
            },],
            isLoading: false,
            vectorLayer: '',
            queryType: '',
            lastType: '',
            keyword: '',
            data: [],
            onPage: false,
            pagination: {
                onChange: page => {
                    this.pagination.current = page;
                    this.onPage = true;
                    this.handleSearch();
                },
                disabled: false,
                pageSize: 10,
                total: 0,
                size: 'small',
                current: 1
            },

        }
    },
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true
        }
    },
    watch: {
        value(val) {
            if (val === false) {
                //清空搜索框
            } else {
            }
        }
    },
    inject: ['baseMap'],
    async created() {
        let {success, result: {records}} = await getAction(this.baseMap.queryUrl, {});
        if (success) {
            this.list = records;
            this.queryType = this.list[0].id;
        }
    },
    methods: {
        async handleSearch() {
            if (this.queryType && this.keyword) {
                if (this.queryType !== this.lastType) {
                    this.pagination.current = 1;
                }
                if (!this.onPage) {
                    this.pagination.current = 1;
                }
                this.lastType = this.queryType;
                this.isLoading = true;
                this.pagination.disabled = true;
                let queryItem = this.list.find((item) => {
                    return item.id === this.queryType;
                })
                this.onPage = false;

                let {success, message, result} = await getAction(queryItem.queryPort, {
                    queryInfo: this.keyword,
                    pageNo: this.pagination.current,
                    pageSize: 10
                });
                if (success) {
                    this.isLoading = false;
                    this.pagination.disabled = false;
                    if (result.total === 0 || result === '') {
                        this.$message.error('没有查询到信息');
                        this.data = [];
                        this.pagination.total = 0;
                        return;
                    }
                    this.data = result.records;
                    this.pagination.total = result.total;
                } else {
                    this.$message.info(message);
                }
            } else {
                this.$message.warn('请输入查询关键字！');
            }
        },
        handleCoord(item) {
            this.$refs.locateByGeoinfo.locate(item, this.baseMap.map);
        },
        clear() {
            this.$refs.locateByGeoinfo.clear();
        }
        /*createVectorLayer() {
          if (this.map === '' || this.vectorLayer === '') return
          const vectorSource = new VectorSource();
          this.vectorLayer = new VectorLayer({
            name: 'locMap',
            source: vectorSource,
            style: new Style({
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.6)',
              }),
              stroke: new Stroke({
                color: '#ff0000',
                lineDash: [6, 6],
                width: 2
              }),
              image: new CircleStyle({
                radius: 7,
                fill: new Fill({
                  color: '#ffcc33',
                }),
              }),
            }),
            zIndex: 100
          })
          this.map.addLayer(this.vectorLayer);
        }*/
    },

};
</script>

<style>
.query a > .anticon {
    /* vertical-align: 0.2em; */
}

.ant-list-item:hover {
    background: #e6f7ff;
    cursor: pointer;
}

.query .ant-avatar {
    /* background: url("https://img1.baidu.com/it/u=1159474645,508069395&fm=26&fmt=auto"); */
}

.query .ant-list-item {
    align-items: flex-start;
}

.query .ant-list-item-action {
    margin-left: 10px;
}

.ant-avatar.result > img {
    display: inline-block;
    height: auto;
    width: auto;
}

.query .ant-spin-nested-loading {
    max-height: 500px;
    overflow-y: auto;

}

#toolBar ::-webkit-scrollbar {
    width: 3px !important;
}

#toolBar ::-webkit-scrollbar {
    width: 3px !important;
    height: 0;
}

#toolBar ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background: #428fff;
}

.icon-close {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
}
</style>