|
|
@@ -1,25 +1,47 @@
|
|
|
<template>
|
|
|
-<!-- 地点查询 -->
|
|
|
-<div class='searchDivAll'>
|
|
|
- <div class="bottonList">
|
|
|
- <span class="bottonListSpan" style="padding-left: 5px; color: #fff">搜索</span>
|
|
|
- <div @click="closeSeachStatus" style="float: right; cursor: pointer; margin-right: 10px; color: #25c7e3">
|
|
|
- <CloseOutlined type="delete-outlined" title="关闭" />
|
|
|
+ <!-- 地点查询 -->
|
|
|
+ <div class="searchDivAll">
|
|
|
+ <div class="bottonList">
|
|
|
+ <span class="bottonListSpan" style="padding-left: 5px; color: #fff">搜索站点</span>
|
|
|
+ <div @click="closeSeachStatus" style="float: right; cursor: pointer; margin-right: 10px; color: #25c7e3">
|
|
|
+ <CloseOutlined type="delete-outlined" title="关闭" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="searchInfoDiv">
|
|
|
- <div class="inputDiv">
|
|
|
+ <div class="searchInfoDiv">
|
|
|
+ <div class="inputDiv">
|
|
|
+ <a-select
|
|
|
+ optionFilterProp="label"
|
|
|
+ size="large"
|
|
|
+ v-model:value="selectValue"
|
|
|
+ show-search
|
|
|
+ :showArrow="false"
|
|
|
+ class="searchInput"
|
|
|
+ style="height: 40px"
|
|
|
+ placeholder="请输入站点名称"
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ <a-select-option v-for="(item, index) in dataList" :key="index" :value="item.stcd" :label="item.st_name">{{
|
|
|
+ item.st_name
|
|
|
+ }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <span class="searchBotton" @click="getTypeList">搜索</span>
|
|
|
+ </div>
|
|
|
+ <!-- <a-input-group compact>
|
|
|
+ <div class="inputDiv">
|
|
|
<a-input
|
|
|
class="searchInput"
|
|
|
allow-clear
|
|
|
@change="clearData"
|
|
|
- placeholder="请输入关键字"
|
|
|
+ placeholder="请输入站点名称"
|
|
|
v-model:value="key"
|
|
|
>
|
|
|
+
|
|
|
</a-input>
|
|
|
- <span class="searchBotton" @click="getTypeList">搜索</span>
|
|
|
+
|
|
|
</div>
|
|
|
- <div v-show="showList" class="dataContent">
|
|
|
+ </a-input-group> -->
|
|
|
+
|
|
|
+ <!-- <div v-show="showList" class="dataContent">
|
|
|
<div class="dataListDiv">
|
|
|
<div class="typeList">
|
|
|
<template v-for="(item, index) in dataList" :key="'typeItem_' + index">
|
|
|
@@ -47,198 +69,242 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
-</div>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { SearchOutlined,CloseOutlined } from '@ant-design/icons-vue';
|
|
|
- import { ref, reactive, onMounted, onUnmounted, defineComponent } from 'vue';
|
|
|
- import { getLocalInfo, getTotalLocalInfo } from '/@/api/map/getData.ts';
|
|
|
- import { message } from 'ant-design-vue';
|
|
|
- import TFMapUitl from '/@/utils/TFMapUitl.ts';
|
|
|
- import waterLocation from '/@/views/map/drainageBasin/waterLocation.js';
|
|
|
- export default defineComponent({
|
|
|
- name: 'searchInfo',
|
|
|
- components: { SearchOutlined ,CloseOutlined},
|
|
|
- setup(_,ctx) {
|
|
|
- const key = ref('');
|
|
|
- let currentListDom = ref(null);
|
|
|
- let pageInfo = null;
|
|
|
- let type = ref('');
|
|
|
- let searchAction = true;
|
|
|
- initPageInfo();
|
|
|
- //初始化翻页
|
|
|
- function initPageInfo() {
|
|
|
- pageInfo = {
|
|
|
- size: 10,
|
|
|
- current: 1,
|
|
|
- total: 0,
|
|
|
- };
|
|
|
- type.value = '';
|
|
|
- }
|
|
|
- //滑动条监听,到底部的时候重新请求数据
|
|
|
- function listenerScroll(e) {
|
|
|
- if (e && e.target && e.target.clientHeight + e.target.scrollTop >= e.target.scrollHeight) {
|
|
|
- //判断是否滑动到底部
|
|
|
- if (pageInfo.total != 0 && pageInfo.total == currentData.length) {
|
|
|
- //当前数据总数与currentData数据总数一致时不进行查询
|
|
|
- return;
|
|
|
- } else {
|
|
|
- pageInfo.current++;
|
|
|
- getDataList();
|
|
|
- }
|
|
|
+import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
|
|
+import { ref, reactive, onMounted, onUnmounted, defineComponent } from 'vue';
|
|
|
+import { getLocalInfo, getTotalLocalInfo } from '/@/api/map/getData.ts';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+import TFMapUitl from '/@/utils/TFMapUitl.ts';
|
|
|
+import waterLocation from '/@/views/map/drainageBasin/waterLocation.js';
|
|
|
+import { useBasicStore } from '/@/store/modules/basicData';
|
|
|
+export default defineComponent({
|
|
|
+ name: 'searchInfo',
|
|
|
+ components: { SearchOutlined, CloseOutlined },
|
|
|
+ setup(_, ctx) {
|
|
|
+ const selectValue = ref('');
|
|
|
+ const key = ref('');
|
|
|
+ let currentListDom = ref(null);
|
|
|
+ let pageInfo = null;
|
|
|
+ let type = ref('');
|
|
|
+ let searchAction = true;
|
|
|
+ initPageInfo();
|
|
|
+ //初始化翻页
|
|
|
+ function initPageInfo() {
|
|
|
+ pageInfo = {
|
|
|
+ size: 10,
|
|
|
+ current: 1,
|
|
|
+ total: 0,
|
|
|
+ };
|
|
|
+ type.value = '';
|
|
|
+ }
|
|
|
+ //滑动条监听,到底部的时候重新请求数据
|
|
|
+ function listenerScroll(e) {
|
|
|
+ if (e && e.target && e.target.clientHeight + e.target.scrollTop >= e.target.scrollHeight) {
|
|
|
+ //判断是否滑动到底部
|
|
|
+ if (pageInfo.total != 0 && pageInfo.total == currentData.length) {
|
|
|
+ //当前数据总数与currentData数据总数一致时不进行查询
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ pageInfo.current++;
|
|
|
+ getDataList();
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
const closeSeachStatus = () => {
|
|
|
- TFMapUitl.clearPointLocation_list(window.map);
|
|
|
ctx.emit('closeSeachStatus');
|
|
|
};
|
|
|
- //注册滑动事件
|
|
|
- onMounted((e) => {
|
|
|
- currentListDom.value.addEventListener('scroll', listenerScroll);
|
|
|
- });
|
|
|
- //取消滑动事件
|
|
|
- onUnmounted((e) => {
|
|
|
- try {
|
|
|
- currentListDom.value.removeEventListener('scroll', listenerScroll);
|
|
|
- } catch (error) {}
|
|
|
- });
|
|
|
+ const basicStore = useBasicStore();
|
|
|
+ //注册滑动事件
|
|
|
+ onMounted((e) => {
|
|
|
+ // currentListDom.value.addEventListener('scroll', listenerScroll);
|
|
|
+ // 将数据放入
|
|
|
+ dataList.value=basicStore.getStDetailArrStore
|
|
|
+ });
|
|
|
+ //取消滑动事件
|
|
|
+ onUnmounted((e) => {
|
|
|
+ // try {
|
|
|
+ // currentListDom.value.removeEventListener('scroll', listenerScroll);
|
|
|
+ // } catch (error) {}
|
|
|
+ });
|
|
|
+ const dataList = ref([
|
|
|
+ // { st_name: '羊村', stcd: 90610001 },
|
|
|
+ // { st_name: '羊1村', stcd: 906100101 },
|
|
|
+ // { st_name: '羊2村', stcd: 9061001012 },
|
|
|
+ ]);
|
|
|
+ let showList = ref(true);
|
|
|
+ let currentIndex = ref(0);
|
|
|
+ let currentItemIndex = ref(-1);
|
|
|
+ let currentData = reactive([]);
|
|
|
|
|
|
- const dataList = reactive([]);
|
|
|
- let showList = ref(false);
|
|
|
- let currentIndex = ref(0);
|
|
|
- let currentItemIndex = ref(-1);
|
|
|
- let currentData = reactive([]);
|
|
|
+ let lastSeachInfo = null;
|
|
|
+ /**
|
|
|
+ * 查询分类统计数据
|
|
|
+ */
|
|
|
+ function getTypeList() {
|
|
|
+ console.log(selectValue.value, 'lllljj');
|
|
|
+ if (!selectValue.value) {
|
|
|
+ message.info('请输入查询关键字');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ mapJump();
|
|
|
|
|
|
- let lastSeachInfo=null;
|
|
|
- /**
|
|
|
- * 查询分类统计数据
|
|
|
- */
|
|
|
- function getTypeList() {
|
|
|
- lastSeachInfo=key.value+"";
|
|
|
- if (!searchAction) {
|
|
|
- return;
|
|
|
+ // searchAction = false;
|
|
|
+ // 搜索返回的数组
|
|
|
+
|
|
|
+ // dataList.splice(0, dataList.length);
|
|
|
+ // const searchInfo=key.value+"";
|
|
|
+ // getTotalLocalInfo({ name: key.value }).then((res) => {
|
|
|
+ // if (res.code == 1) {
|
|
|
+ // dataList.push(...res.result);
|
|
|
+ // let all = 0;
|
|
|
+ // res.result.forEach((item) => {
|
|
|
+ // all += item.value;
|
|
|
+ // });
|
|
|
+ // dataList.unshift({
|
|
|
+ // type: '全部',
|
|
|
+ // value: all,
|
|
|
+ // });
|
|
|
+ // changeList(dataList[0], 0);
|
|
|
+ // showList.value = true;
|
|
|
+ // }
|
|
|
+ // searchAction = true;
|
|
|
+ // if(lastSeachInfo!=searchInfo){//最后记录的查询条件和查询的内容不符合的时候,再次进行查询
|
|
|
+ // getTypeList();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ // 跳转
|
|
|
+ function mapJump() {
|
|
|
+ basicStore.getStDetailArrStore.forEach((i) => {
|
|
|
+ if (i.stcd == selectValue.value) {
|
|
|
+ console.log(i, 887);
|
|
|
+ // siteDetail(i);
|
|
|
+ // 高亮点
|
|
|
+ if (window.breathMarker) {
|
|
|
+ window.breathMarker.update();
|
|
|
+ window.breathMarker.breathe();
|
|
|
+ window.breathMarker = null;
|
|
|
+ }
|
|
|
+ window.breathMarker = map.findOverlay(`gcd&${i.stcd}`);
|
|
|
+ window.breathMarker.breathe(0, 0.3);
|
|
|
}
|
|
|
- if (!key.value) {
|
|
|
- message.info('请输入查询关键字');
|
|
|
- return;
|
|
|
+ });
|
|
|
+ map.flyTo(
|
|
|
+ {
|
|
|
+ destination: {
|
|
|
+ x: e.lng,
|
|
|
+ y: e.lat,
|
|
|
+ z: 5000,
|
|
|
+ },
|
|
|
+ orientation: {
|
|
|
+ heading: 6.283185307179586,
|
|
|
+ pitch: -1.5688928482139568,
|
|
|
+ roll: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 1,
|
|
|
+ () => {
|
|
|
+ // siteDetail(i);
|
|
|
}
|
|
|
- searchAction = false;
|
|
|
- dataList.splice(0, dataList.length);
|
|
|
- const searchInfo=key.value+"";
|
|
|
- getTotalLocalInfo({ name: key.value }).then((res) => {
|
|
|
- if (res.code == 1) {
|
|
|
- dataList.push(...res.result);
|
|
|
- let all = 0;
|
|
|
- res.result.forEach((item) => {
|
|
|
- all += item.value;
|
|
|
- });
|
|
|
- dataList.unshift({
|
|
|
- type: '全部',
|
|
|
- value: all,
|
|
|
- });
|
|
|
- changeList(dataList[0], 0);
|
|
|
- showList.value = true;
|
|
|
- }
|
|
|
- searchAction = true;
|
|
|
- if(lastSeachInfo!=searchInfo){//最后记录的查询条件和查询的内容不符合的时候,再次进行查询
|
|
|
- getTypeList();
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 查询数据
|
|
|
- */
|
|
|
- function getDataList() {
|
|
|
- const params = { name: key.value, size: pageInfo.size, current: pageInfo.current };
|
|
|
- if (type.value && type.value != '全部' && type.value != '') {
|
|
|
- params.type = type.value;
|
|
|
- }
|
|
|
- getLocalInfo(params).then((res) => {
|
|
|
- if (res.code == 1) {
|
|
|
- pageInfo.total = res.result.total;
|
|
|
- currentData.push(...res.result.records);
|
|
|
- }
|
|
|
- });
|
|
|
+ /**
|
|
|
+ * 查询数据
|
|
|
+ */
|
|
|
+ function getDataList() {
|
|
|
+ const params = { name: key.value, size: pageInfo.size, current: pageInfo.current };
|
|
|
+ if (type.value && type.value != '全部' && type.value != '') {
|
|
|
+ params.type = type.value;
|
|
|
}
|
|
|
+ getLocalInfo(params).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ pageInfo.total = res.result.total;
|
|
|
+ currentData.push(...res.result.records);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 清空currentData的数据
|
|
|
- */
|
|
|
- function clearDataList() {
|
|
|
- currentData.splice(0, currentData.length); //清空数据
|
|
|
- initPageInfo(); //初始化翻页条件
|
|
|
- currentItemIndex.value = -1;
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 清空currentData的数据
|
|
|
+ */
|
|
|
+ function clearDataList() {
|
|
|
+ currentData.splice(0, currentData.length); //清空数据
|
|
|
+ initPageInfo(); //初始化翻页条件
|
|
|
+ currentItemIndex.value = -1;
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 当前查看的数据
|
|
|
- */
|
|
|
- function changeList(item, index) {
|
|
|
- currentIndex.value = index;
|
|
|
- clearDataList();
|
|
|
- type.value = item.type;
|
|
|
- getDataList();
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 当前查看的数据
|
|
|
+ */
|
|
|
+ function changeList(item, index) {
|
|
|
+ currentIndex.value = index;
|
|
|
+ clearDataList();
|
|
|
+ type.value = item.type;
|
|
|
+ getDataList();
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 关闭查询
|
|
|
- */
|
|
|
- function clearData() {
|
|
|
- if (!key.value) {
|
|
|
- showList.value = false;
|
|
|
- dataList.splice(0, dataList.length - 1);
|
|
|
- clearDataList();
|
|
|
- TFMapUitl.clearPointLocation_list(window.map);
|
|
|
- } else {
|
|
|
- getTypeList();
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 关闭查询
|
|
|
+ */
|
|
|
+ function clearData() {
|
|
|
+ if (!key.value) {
|
|
|
+ showList.value = false;
|
|
|
+ dataList.splice(0, dataList.length - 1);
|
|
|
+ clearDataList();
|
|
|
+ TFMapUitl.clearPointLocation_list(window.map);
|
|
|
+ } else {
|
|
|
+ getTypeList();
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 定位
|
|
|
- */
|
|
|
- function goTo(i, index) {
|
|
|
- currentItemIndex.value = index;
|
|
|
- if(i.type=='流域'||i.type=='河段'){
|
|
|
- waterLocation.goTo(i.id);
|
|
|
- }else{
|
|
|
- let op = {
|
|
|
- destination: { x: i.x, y: i.y, z: 15000 },
|
|
|
- orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
|
|
|
- };
|
|
|
- map.flyTo(op, 1, () => {
|
|
|
- TFMapUitl.mapPointLocation_list([i.x, i.y]);
|
|
|
- });
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 定位
|
|
|
+ */
|
|
|
+ function goTo(i, index) {
|
|
|
+ currentItemIndex.value = index;
|
|
|
+ if (i.type == '流域' || i.type == '河段') {
|
|
|
+ waterLocation.goTo(i.id);
|
|
|
+ } else {
|
|
|
+ let op = {
|
|
|
+ destination: { x: i.x, y: i.y, z: 15000 },
|
|
|
+ orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
|
|
|
+ };
|
|
|
+ map.flyTo(op, 1, () => {
|
|
|
+ TFMapUitl.mapPointLocation_list([i.x, i.y]);
|
|
|
+ });
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- return {
|
|
|
- key,
|
|
|
- getDataList,
|
|
|
- dataList,
|
|
|
- showList,
|
|
|
- currentIndex,
|
|
|
- currentItemIndex,
|
|
|
- currentData,
|
|
|
- currentListDom,
|
|
|
- getTypeList,
|
|
|
- changeList,
|
|
|
- goTo,
|
|
|
- type,
|
|
|
- clearData,
|
|
|
- closeSeachStatus
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
+ return {
|
|
|
+ key,
|
|
|
+ getDataList,
|
|
|
+ dataList,
|
|
|
+ showList,
|
|
|
+ currentIndex,
|
|
|
+ currentItemIndex,
|
|
|
+ currentData,
|
|
|
+ currentListDom,
|
|
|
+ getTypeList,
|
|
|
+ changeList,
|
|
|
+ goTo,
|
|
|
+ type,
|
|
|
+ clearData,
|
|
|
+ closeSeachStatus,
|
|
|
+ selectValue
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.searchDivAll{
|
|
|
+.searchDivAll {
|
|
|
// box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);
|
|
|
// border: 1px solid #1778ab;
|
|
|
position: absolute;
|
|
|
@@ -248,12 +314,12 @@
|
|
|
width: 400px;
|
|
|
|
|
|
border: 1px solid #0b5d7c;
|
|
|
- background: #031A26;
|
|
|
+ background: #031a26;
|
|
|
opacity: 0.86;
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
.searchDivAll:after {
|
|
|
- content: "";
|
|
|
+ content: '';
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
@@ -262,13 +328,12 @@
|
|
|
border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.bottonList {
|
|
|
position: relative;
|
|
|
padding-top: 5px;
|
|
|
padding-bottom: 5px;
|
|
|
font-size: 16px;
|
|
|
- background: #031A26;
|
|
|
+ background: #031a26;
|
|
|
width: 100%;
|
|
|
border-bottom: 1px solid #0b5d7c;
|
|
|
.bottonListSpan {
|
|
|
@@ -276,97 +341,100 @@
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
- .searchInfoDiv {
|
|
|
- position: relative;
|
|
|
- padding: 10px;
|
|
|
- .inputDiv {
|
|
|
+.searchInfoDiv {
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
+ .inputDiv {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ height: 40px;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .searchBotton {
|
|
|
+ // background: linear-gradient(270deg, #1ec3ee 0%, #0f88fe 100%);
|
|
|
+ background: linear-gradient(270deg, rgb(30 195 238 / 50%) 0%, rgb(15 136 254 / 50%) 100%);
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 16px;
|
|
|
+ width: 70px;
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .searchInput {
|
|
|
+ height: 100%;
|
|
|
+ width: calc(100% - 70px);
|
|
|
+ border: 1px solid rgba(15, 136, 254, 0.4);
|
|
|
+ border-radius: unset;
|
|
|
+ border-top-left-radius: 4px;
|
|
|
+ border-bottom-left-radius: 4px;
|
|
|
+ color: white;
|
|
|
+ font-size: 16px;
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
+ }
|
|
|
+ &::-moz-placeholder {
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
+ }
|
|
|
+ &::-moz-placeholder {
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
+ }
|
|
|
+ &:-ms-input-placeholder {
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dataContent {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ .dataListDiv {
|
|
|
display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
flex-direction: row;
|
|
|
- height: 40px;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
- line-height: 40px;
|
|
|
+ position: relative;
|
|
|
+ top: 3px;
|
|
|
}
|
|
|
- .searchBotton {
|
|
|
- // background: linear-gradient(270deg, #1ec3ee 0%, #0f88fe 100%);
|
|
|
- background: linear-gradient(270deg, rgb(30 195 238 / 50%) 0%, rgb(15 136 254 / 50%) 100%);
|
|
|
- height: 100%;
|
|
|
- display: block;
|
|
|
+ .typeList {
|
|
|
+ width: 140px;
|
|
|
+ background: #0b3b61;
|
|
|
font-size: 16px;
|
|
|
- width: 70px;
|
|
|
- color: white;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .searchInput {
|
|
|
- height: 100%;
|
|
|
- width: calc(100% - 70px);
|
|
|
- border: 1px solid rgba(15,136,254,0.40); ;
|
|
|
- border-radius: unset;
|
|
|
- border-top-left-radius: 4px;
|
|
|
+ padding: 7px 5px 7px 5px;
|
|
|
border-bottom-left-radius: 4px;
|
|
|
- color: white;
|
|
|
- font-size: 16px;
|
|
|
- &::-webkit-input-placeholder {
|
|
|
- color: rgba(255, 255, 255, 0.4);
|
|
|
- }
|
|
|
- &::-moz-placeholder {
|
|
|
- color: rgba(255, 255, 255, 0.4);
|
|
|
- }
|
|
|
- &::-moz-placeholder {
|
|
|
- color: rgba(255, 255, 255, 0.4);
|
|
|
- }
|
|
|
- &:-ms-input-placeholder {
|
|
|
- color: rgba(255, 255, 255, 0.4);
|
|
|
- }
|
|
|
+ border-top-left-radius: 4px;
|
|
|
}
|
|
|
- .dataContent {
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- .dataListDiv {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- flex-direction: row;
|
|
|
- position: relative;
|
|
|
- top: 3px;
|
|
|
- }
|
|
|
- .typeList {
|
|
|
- width: 140px;
|
|
|
- background: #0b3b61;
|
|
|
- font-size: 16px;
|
|
|
- padding: 7px 5px 7px 5px;
|
|
|
- border-bottom-left-radius: 4px;
|
|
|
- border-top-left-radius: 4px;
|
|
|
- }
|
|
|
- .typeItem {
|
|
|
- padding: 5px;
|
|
|
- &:hover {
|
|
|
- background: #0b548e;
|
|
|
- }
|
|
|
- }
|
|
|
- .currentDiv {
|
|
|
+ .typeItem {
|
|
|
+ padding: 5px;
|
|
|
+ &:hover {
|
|
|
background: #0b548e;
|
|
|
- color: #0afdfa;
|
|
|
- }
|
|
|
- .dataItem {
|
|
|
- padding: 5px;
|
|
|
- font-size: 16px;
|
|
|
- &:hover {
|
|
|
- background: #0b548e;
|
|
|
- }
|
|
|
- }
|
|
|
- .currentList {
|
|
|
- width: calc(100% - 140px);
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 7px 5px 7px 5px;
|
|
|
- background: #04233d;
|
|
|
- border-bottom-right-radius: 4px;
|
|
|
- border-top-right-radius: 4px;
|
|
|
}
|
|
|
- .dataType {
|
|
|
- opacity: 0.5;
|
|
|
+ }
|
|
|
+ .currentDiv {
|
|
|
+ background: #0b548e;
|
|
|
+ color: #0afdfa;
|
|
|
+ }
|
|
|
+ .dataItem {
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ &:hover {
|
|
|
+ background: #0b548e;
|
|
|
}
|
|
|
}
|
|
|
+ .currentList {
|
|
|
+ width: calc(100% - 140px);
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 7px 5px 7px 5px;
|
|
|
+ background: #04233d;
|
|
|
+ border-bottom-right-radius: 4px;
|
|
|
+ border-top-right-radius: 4px;
|
|
|
+ }
|
|
|
+ .dataType {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
+::v-deep(.ant-select-show-search.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
</style>
|