From dedc31bf2e64bd6c977386a6e336af30ec826a4d Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期一, 01 三月 2021 20:20:06 +0800
Subject: [PATCH] 修改专题搜索面板样式
---
src/components/panel/RightSearchPanel.vue | 941 +++++++++++++++----------------------
src/assets/css/map/_map-variable.less | 1
src/components/panel/MenuTopic.vue | 100 ---
src/conf/Topic.js | 57 ++
src/assets/css/map/map-elem-ui.less | 31 +
src/components/panel/topicSearch/SewersSearch.vue | 178 +++++++
src/components/panel/topicSearch/EnvProtectSearch.vue | 0
src/conf/LayerSewers.js | 133 +++++
src/components/panel/topicSearch/DischargeSearch.vue | 0
src/store/modules/map.js | 7
10 files changed, 803 insertions(+), 645 deletions(-)
diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less
index 9bd1ac9..aad5b7b 100644
--- a/src/assets/css/map/_map-variable.less
+++ b/src/assets/css/map/_map-variable.less
@@ -1,3 +1,4 @@
@color:#00fff6;
@color-highlight:#fff700;
@background-color:rgba(0,16,30,.8);
+@background-color-light:rgba(40,50,100,.4);
diff --git a/src/assets/css/map/map-elem-ui.less b/src/assets/css/map/map-elem-ui.less
index 4d31a33..cec841d 100644
--- a/src/assets/css/map/map-elem-ui.less
+++ b/src/assets/css/map/map-elem-ui.less
@@ -4,3 +4,34 @@
background-color: @background-color;
border-color: @color;
}
+
+.select-down {
+ border: none !important;
+ background-color: @background-color !important;
+
+ //.el-scrollbar{
+ //
+ // background-color: @background-color !important;
+ // }
+ // .el-scrollbar__view .el-select-dropdown__list{
+ // background-color: @background-color !important;
+ // }
+ .el-select-dropdown__item.hover{
+ background-color: @background-color-light;
+ }
+ .el-select-dropdown__item {
+ color: @color;
+ //background-color: @background-color;
+ }
+ // .el-select-dropdown{
+ // border: none !important;
+ // background-color: @background-color !important;
+ // }
+ // .el-select-dropdown__empty{
+ // color: @color;
+ // background-color: @background-color;
+ // }
+ .popper__arrow::after{
+ border-bottom-color: @color !important;
+ }
+}
diff --git a/src/components/panel/MenuTopic.vue b/src/components/panel/MenuTopic.vue
index 845ef16..6f949fe 100644
--- a/src/components/panel/MenuTopic.vue
+++ b/src/components/panel/MenuTopic.vue
@@ -6,12 +6,12 @@
style=""
@click="toggle()">
<div id="menu-special-context" class="menu-special-context">
- <el-checkbox-button v-show="isShow" class="menu-special-item" v-model="specialAll.check" :checked="specialAll.checked" @change="checkedSpecialChangeAll(specialAll)">
- <div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="specialAll.icon" ></div>
- {{ specialAll.name }}</el-checkbox-button>
+ <el-checkbox-button v-show="isShow" class="menu-special-item" v-model="topicSelectAll.check" :checked="topicSelectAll.checked" @change="checkedSpecialChangeAll(topicSelectAll)">
+ <div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="topicSelectAll.icon" ></div>
+ {{ topicSelectAll.name }}</el-checkbox-button>
- <el-checkbox-group :indeterminate="isIndeterminate" v-show="isShow" v-model="checkedList" size="medium" @change="checkedGroupSpecialChange">
- <el-checkbox-button class="menu-special-item" v-for="item in specialList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
+ <el-checkbox-group :indeterminate="isIndeterminate" v-show="isShow" v-model="topicCheckedList" size="medium" @change="checkedGroupSpecialChange">
+ <el-checkbox-button class="menu-special-item" v-for="item in topicList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
<div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="item.icon" ></div>
{{item.name}}</el-checkbox-button>
</el-checkbox-group>
@@ -28,70 +28,16 @@
</template>
<script>
-
+import { TopicSelectAll, TopicList } from '../../conf/Topic'
export default {
name: 'MenuTopic',
data () {
return {
isShow: false,
isIndeterminate: true,
- checkedList: [],
- specialAll: {
- name: '鍏ㄩ��',
- check: false,
- icon: '/assets/images/menu/special.png'
- },
- specialList: [{
- name: '姹℃煋婧�',
- id: 1,
- check: false,
- icon: '/assets/images/menu/special.png'
- }, {
- name: '搴熸按鐩戞祴',
- id: 2,
- checked: false,
- icon: '/assets/images/menu/special.png'
- }, {
- name: '搴熸皵鐩戞祴',
- id: 3,
- checked: false,
- icon: '/assets/images/menu/special.png'
- }, {
- name: '鍥哄簾绠＄悊',
- id: 4,
- checked: false,
- icon: '/assets/images/menu/special.png'
- }, {
- name: '鐜椋庨櫓',
- id: 5,
- checked: false,
- icon: '/assets/images/menu/special.png'
- }, {
- name: '鍦熷￥鍙婂湴涓嬫按',
- id: 6,
- checked: false,
- icon: '/assets/images/menu/special.png'
- }, {
- name: '姹￠洦姘寸缃�',
- id: 7,
- checked: false,
- icon: '/assets/images/menu/special.png'
- }, {
- name: '棰勮鎶ヨ',
- id: 8,
- checked: false,
- icon: '/assets/images/menu/special.png'
- }, {
- name: '鎸囨爣缁熻',
- id: 9,
- checked: false,
- icon: '/assets/images/menu/special.png'
- }, {
- name: '搴旀�ュ湴鍥�',
- id: 10,
- checked: false,
- icon: '/assets/images/menu/special.png'
- }]
+ topicCheckedList: [],
+ topicSelectAll: TopicSelectAll,
+ topicList: TopicList
}
},
computed: {
@@ -99,33 +45,21 @@
methods: {
toggle () {
this.isShow = !this.isShow
- // console.log('toggle')
- // const el = document.getElementById('menu-special-context')
- // console.log(el.clientWidth + ':' + el.offsetHeight)
- // if (el.clientWidth > 0) {
- // el.style.width = '0'
- // } else {
- // el.style.width = 'auto'
- // }
},
checkedGroupSpecialChange (val) {
const len = val.length
- this.specialAll.check = len === this.specialList.length
- this.isIndeterminate = len > 0 && len < this.specialList.length
+ this.topicSelectAll.check = len === this.topicList.length
+ this.isIndeterminate = len > 0 && len < this.topicList.length
+ this.$store.commit('setTopic', this.topicCheckedList)
},
checkedSpecialChangeAll (val) {
- // this.checkedCities = val ? this.cities.map(item => item.id) : []
- // this.isIndeterminate = false
- // let list = []
- // if (val === true) {
- // list = this.specialList.map(item => item.name)
- // }
-
- this.checkedList = val.check ? this.specialList.map(item => item.name) : []
+ this.topicCheckedList = val.check ? this.topicList.map(item => item.name) : []
this.isIndeterminate = false
+ this.$store.commit('setTopic', this.topicCheckedList)
},
- checkedSpecialChange (item) {
- console.log(item)
+ checkedSpecialChange () {
+ console.log(this.topicCheckedList)
+ // this.$store.commit('setTopic', this.topicCheckedList)
}
}
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index dc1402f..fdbaae2 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,252 +1,76 @@
<template>
- <div id="right-panel">
- <div class="panel-tab">
- <div class="tab-gd" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
- <div class="tab-hb" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
- <div class="tab-pk" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
- </div>
- <div class="panel-fold-btn">
- <div class="btn-stretch" @click="toggleMonitorPanel"></div>
- </div>
+ <div id="right-panel">
+ <div class="panel-tab">
+ <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
+ <img :src="item.icon" style="width: 24px;height: 24px;"></div>
- <div class="right-control">
- <div class="el-message-box__header panel_header">
- <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
- </div>
- </div>
- <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
- <div class="monitor1" v-if="gdVisible">
- <div>
- <el-card class="search-panel">
- <el-form ref="form" :model="form" label-width="90px" class="search-form">
- <el-form-item label="绫诲瀷锛�">
- <el-select v-model="form.pipelineType" @change="handlePipelineType">
- <el-option
- v-for="item in pipelineTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="鏁版嵁绫诲瀷锛�">
- <el-select v-model="form.dataType">
- <el-option
- v-for="item in dataTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="妯＄硦鎼滅储锛�">
- <el-input v-model="form.key" size="mini"
- placeholder="鍦ㄦ杈撳叆鍏抽敭瀛�"></el-input>
- </el-form-item>
- <el-form-item>
- <input type="button" class="btn-ok" @click="handleSearch" value="鏌ヨ">
- <input type="button" class="btn-reset" @click="handleSearch" value="閲嶇疆">
- </el-form-item>
- </el-form>
- </el-card>
- <el-card class="search-result" style="height:271px;">
- <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
- <div class="B-TMD-table-list-title">
- <div class="B-TMD-table-list-head">
- <div class="B-TMD-table-list-title-y"
- :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
- <span>杩愬崟鍙凤細</span>
- <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
- :title="item.transNo">
- <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
- </span>
- </div>
- <div class="B-TMD-table-list-title-c">
- 杞藉叿鍙凤細
- <span id="plateNumber_p">
- <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
- </span>
- </div>
- </div>
- <div class="B-TMD-table-icons" style="float:right">
- <ul>
- <li class="B-TMD-table-list-title-y-adress"
- @click="handleLocation(item)"></li>
- <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
- </ul>
- </div>
- </div>
- <div class="B-TMD-table-list-content">
- <div>
- <span>鍙戣揣浼佷笟锛�</span>
- <span id="b_twe_consignment" :title="item.outWarehouseName">{{
- item.outWarehouseName == null ? "鏆傛棤" : item.outWarehouseName
- }}</span>
- </div>
- <div>
- <span>鎵� 杩� 鍟嗭細</span>
- <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
- </div>
- <div><span>鏀惰揣浼佷笟锛�</span> <span
- id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>
- </div>
- </div>
- <div class="B-TMD-table-list-bottom">
- <div class="B-TMD-table-list-bottom-name">
- 璐х墿鍚嶇О锛�<span :title="item.materialName">{{ item.materialName }}</span></div>
- </div>
- </div>
- </el-card>
-
- <el-card class="footer-page" v-if="total > 10">
- <el-pagination
- small
- @current-change="handlePage"
- :page-size=pageSize
- layout="prev, pager, next"
- :total=total
- :current-page=current
- class="warnPagination"
- >
- </el-pagination>
- </el-card>
- </div>
- </div>
- <div class="monitor2" v-if="hbVisible">
- <env-protect-search></env-protect-search>
- </div>
- <div class="monitor2" v-if="pkVisible">
- <discharge-search></discharge-search>
- </div>
- </div>
- </div>
+<!-- <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
+<!-- <div class="tab-item" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
</div>
+ <div class="panel-fold-btn">
+ <div class="btn-stretch" @click="toggleMonitorPanel"></div>
+ </div>
+
+ <div class="right-control">
+
+ <component :title="title" :is="gcComp"></component>
+ </div>
+ </div>
</template>
<script>
import $ from 'jquery'
-import EnvProtectSearch from './EnvProtectSearch'
-import DischargeSearch from './DischargeSearch'
+import EnvProtectSearch from './topicSearch/EnvProtectSearch'
+import DischargeSearch from './topicSearch/DischargeSearch'
+import { TopicList } from '../../conf/Topic'
+import SewersSearch from '@components/panel/topicSearch/SewersSearch'
export default {
name: 'MonitorPanel',
components: { EnvProtectSearch, DischargeSearch },
data () {
return {
+ topicMenu: [],
+ topicList: TopicList,
+ topicCheckedList: [],
isPanelVisible: false,
+ gcComp: SewersSearch,
+
gdVisible: true,
hbVisible: false,
pkVisible: false,
toggleMonitorStyle: 'right:0px',
- list: [],
- total: 0,
- title: '绠￠亾淇℃伅鏌ヨ',
- pipelineTypeOptions: [{
- value: '1',
- label: '绠＄嚎鏈綋'
- }, {
- value: '2',
- label: '闄勫睘璁炬柦'
- }],
- dataTypeOptions: [],
- attachOptions: [{
- value: '1',
- label: '闃�闂�'
- }, {
- value: '2',
- label: '绠″粖'
- }, {
- value: '3',
- label: '绠℃灦'
- }, {
- value: '4',
- label: '涓夐��'
- }, {
- value: '5',
- label: '鍥涢��'
- }, {
- value: '6',
- label: '寮ご'
- }],
- pipelineOptions: [{
- value: '1',
- label: '绠＄嚎'
- }, {
- value: '2',
- label: '闆ㄦ按绠℃'
- }, {
- value: '3',
- label: '鍚洂绠℃'
- }, {
- value: '4',
- label: '鍚补绠℃'
- }, {
- value: '5',
- label: '浜嬫晠姘寸娈�'
- }, {
- value: '6',
- label: '鍚⒈绠℃'
- }, {
- value: '7',
- label: '寰幆姘寸娈�'
- }, {
- value: '8',
- label: '鍑�鍖栨按绠℃'
- }, {
- value: '9',
- label: '鐢熸椿姹℃按绠℃'
- }],
- form: {
- transNo: null,
- carrierName: null,
- transMode: null,
- vehicleNo: null,
- orderState: null,
- size: 10,
- current: 1
- },
- pageSize: 10,
- current: 1,
- isWaybillHover: true,
- isRouteHover: false
+
+ title: '姹￠洦姘寸缃�'
+
}
},
computed: {},
- watch: {},
+ watch: {
+ '$store.state.map.topic.topicCheckedList': function (newVal, oldVal) {
+ console.log(oldVal)
+ console.log(newVal)
+ this.topicCheckedList = newVal
+ this.topicMenu = []
+ this.topicList.forEach((item) => {
+ this.topicCheckedList.forEach((itm) => {
+ if (item.name === itm) {
+ // item.checked = tr
+ this.topicMenu.push(item)
+ }
+ })
+ })
+ }
+ },
methods: {
handleClose (done) {
console.log(done)
},
- handleSearch () {
- },
- handlePipelineType (item) {
- console.log(item)
- if (item === '2') {
- this.dataTypeOptions = this.attachOptions
- } else if (item === '1') {
- this.dataTypeOptions = this.pipelineOptions
- }
- },
handlePage (page) {
},
handleGd () {
- this.gdVisible = true
- this.hbVisible = false
- this.pkVisible = false
this.title = '绠￠亾淇℃伅鏌ヨ'
- },
- handleHb () {
- this.gdVisible = false
- this.hbVisible = true
- this.pkVisible = false
- this.title = '鐜繚璁炬柦鏌ヨ'
- },
- handlePk () {
- this.gdVisible = false
- this.hbVisible = false
- this.pkVisible = true
- this.title = '鎺掑彛淇℃伅鏌ヨ'
},
toggleMonitorPanel () {
const el = $('.btn-stretch')
@@ -289,379 +113,372 @@
</script>
<style lang="less">
- #right-panel {
- width: 322px;
- //height: 573px;
- height: 100%;
- position: absolute;
- right: 10px;
- top: 10px;
+@import '@assets/css/map/_map-variable';
+#right-panel {
+ width: 322px;
+ //height: 573px;
+ height: 100%;
+ position: absolute;
+ right: 10px;
+ top: 10px;
- .el-card__body {
- padding: 7px;
- }
+ .el-card__body {
+ padding: 7px;
+ }
- .el-form-item__content {
- color: rgb(52, 224, 255);
- }
+ .el-form-item__content {
+ color: rgb(52, 224, 255);
+ }
- .el-picker-panel {
- background-color: #061e51 !important;
- }
+ .el-picker-panel {
+ background-color: #061e51 !important;
+ }
- .el-input__inner {
- border-radius: 0 !important;
- background-color: #061e51 !important;
- border: solid 1px #0e639e !important;
- }
+ .el-input__inner {
+ border-radius: 0 !important;
+ background-color: #061e51 !important;
+ border: solid 1px #0e639e !important;
+ }
- .el-form-item__label {
- color: rgb(52, 224, 255);
- }
+ .el-form-item__label {
+ color: rgb(52, 224, 255);
+ }
- .el-input__inner::placeholder {
- color: #9a9494;
- }
+ .el-input__inner::placeholder {
+ color: #9a9494;
+ }
- /* 璋锋瓕 */
+ /* 璋锋瓕 */
- .el-input__inner::-webkit-input-placeholder {
- color: #9a9494;
- }
+ .el-input__inner::-webkit-input-placeholder {
+ color: #9a9494;
+ }
- /* 鐏嫄 */
+ /* 鐏嫄 */
- .el-input__inner:-moz-placeholder {
- color: #9a9494;
- }
+ .el-input__inner:-moz-placeholder {
+ color: #9a9494;
+ }
- /*ie*/
+ /*ie*/
- .el-input__inner:-ms-input-placeholder {
- color: #9a9494;
- }
+ .el-input__inner:-ms-input-placeholder {
+ color: #9a9494;
+ }
- .warning {
- color: #dcc805;
- }
+ .warning {
+ color: #dcc805;
+ }
- #plateNumber_n a {
- color: rgb(52, 224, 255);
- }
+ #plateNumber_n a {
+ color: rgb(52, 224, 255);
+ }
- .offline {
- color: #9a9494;
- }
+ .offline {
+ color: #9a9494;
+ }
- .customInput {
- width: 118px;
- }
+ .customInput {
+ width: 118px;
+ }
- .btn-ok {
- margin-right: 10px;
- width: 4rem;
- background-color: #0B89B5;
- color: white;
- border: 0;
- }
+ .btn-ok {
+ margin-right: 10px;
+ width: 4rem;
+ background-color: #0B89B5;
+ color: white;
+ border: 0;
+ }
- .btn-reset {
- margin-right: 10px;
- width: 4rem;
- background-color: orange;
- color: white;
- border: 0;
- }
+ .btn-reset {
+ margin-right: 10px;
+ width: 4rem;
+ background-color: orange;
+ color: white;
+ border: 0;
+ }
- .component-fade-enter-active, .component-fade-leave-active {
- transition: opacity .5s ease;
- }
+ .component-fade-enter-active, .component-fade-leave-active {
+ transition: opacity .5s ease;
+ }
- .component-fade-enter, .component-fade-leave-to
- /* .component-fade-leave-active for below version 2.1.8 */ {
- opacity: 0;
- }
+ .component-fade-enter, .component-fade-leave-to
+ /* .component-fade-leave-active for below version 2.1.8 */ {
+ opacity: 0;
+ }
- .B-TMD-table-icons ul li {
- float: left;
- margin: 10px;
- list-style: none;
- }
+ .B-TMD-table-icons ul li {
+ float: left;
+ margin: 10px;
+ list-style: none;
+ }
- .B-TMD-table-list {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
+ .B-TMD-table-list {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- .B-TMD-table-list-title {
- width: 100%;
- height: 50px;
- }
+ .B-TMD-table-list-title {
+ width: 100%;
+ height: 50px;
+ }
- .B-TMD-table-list-head {
- width: 160px;
- float: left;
- padding-left: 5px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .panel-fold-btn{
- position: absolute;
- top:45%;
- //right: 320px;
- right: 290px;
- z-index: 1000;
- background-color: rgba(5,24,66,.8);
- border-radius: 10px 0 0 10px;
- .btn-stretch {
- width: 20px;
- height: 40px;
- background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
- cursor: pointer;
+ .B-TMD-table-list-head {
+ width: 160px;
+ float: left;
+ padding-left: 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .panel-fold-btn{
+ position: absolute;
+ top:45%;
+ //right: 320px;
+ right: 290px;
+ z-index: 1000;
+ background-color: rgba(5,24,66,.8);
+ border-radius: 10px 0 0 10px;
+ .btn-stretch {
+ width: 20px;
+ height: 40px;
+ background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
+ cursor: pointer;
- transform: rotateY(180deg);
- transform-origin: 50% 50%;
- transition: transform 1s linear;
- }
+ transform: rotateY(180deg);
+ transform-origin: 50% 50%;
+ transition: transform 1s linear;
+ }
+ }
+
+ .tab-item {
+ width: 32px;
+ height: 30px;
+ color: @color;
+ font-size: 12px;
+ background-color: #0B3B6D;
+ }
+ .tab-item:hover{
+ cursor: pointer;
+ }
+ .panel-tab {
+ position: absolute;
+ left: 0;
+ //height: 120px;
+ top: 0;
+ width: 32px;
+ z-index: 500;
+ background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
+ }
+
+ .right-control {
+ width: 290px;
+ //height: 573px;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 999;
+ background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
+ background-size: 100% 98%;
+ }
+
+ .panel_searchTotal {
+ font-size: 12px;
+ float: right;
+ }
+
+ .panel_header {
+ // background-color: #030D2E;
+ padding: 7px 15px 3px 20px;
+ }
+
+ .panel_title {
+ font-size: 12px;
+ margin: 0px;
+ padding: 0px;
+ color: #78c4ff;
+ font-weight: bold;
+ }
+
+ .el-message-box__content {
+ background-color: transparent;
+ }
+
+ .search-form .el-form-item {
+ margin: 0px;
+ }
+
+ .search-form .el-icon-search {
+ display: grid;
+ line-height: 30px;
+ font-size: 18px;
+ }
+
+ .search-panel {
+ border: #07325B;
+ background-color: #07325B !important;
+ margin-top: 0px;
+
+ .el-input__inner {
+ border-radius: 0px !important;
+ background-color: #061e51 !important;
+ }
+ }
+
+ input::-webkit-input-placeholder {
+ color: #569ee1;
+ }
+
+ input::-moz-placeholder {
+ color: #569ee1;
+ }
+
+ input::-ms-input-placeholder {
+ color: #569ee1;
+ }
+
+ input[type=text]:focus {
+ outline: 1px solid #17e4f6;
+ // box-shadow: 1px 0px 3px 0px #17e4f6;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ }
+
+ .search-result {
+ margin: 5px 0px 0px 0px;
+ padding: 0px;
+ border: #051842;
+ height: 290px;
+ overflow-y: scroll;
+ background-color: transparent !important;
+ margin-bottom: -8px !important;
+ }
+
+ .offline {
+ color: #64778B;
+ }
+
+ .B-TMD-table-list {
+ margin-top: 10px;
+ text-align: left;
+ padding-left: 10px;
+ //color: #64778B;
+ color: #34e0ff;
+ width: 100%;
+ line-height: 25px;
+ background: url('../../assets/images/map-pages/icon/dd.png') no-repeat;
+ }
+
+ .B-TMD-inp-button {
+ width: 46px;
+ height: 52px;
+ position: absolute;
+ bottom: 8px;
+ right: 16px;
+ background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
+ cursor: pointer;
+ }
+
+ .footer-page {
+ position: absolute;
+ background-color: transparent !important;
+ bottom: 10px !important;
+ margin-left: 0px;
+ border: none;
+
+ .warnPagination {
+ .btn-quicknext, .btn-quickprev {
+ color: #e4e8f1 !important;
+ background-color: transparent;
+ // border: 1px solid #25AECD;
+ border-left: 1px solid #25AECD;
+ border-bottom: 1px solid #25AECD;
+ border-top: 1px solid #25AECD;
+ color: #e4e8f1;
}
- .tab-gd {
- width: 32px;
- height: 30px;
- background-color: #0B3B6D;
- }
+ .el-pager li {
+ color: #e4e8f1;
+ background: transparent;
+ // border: 1px solid #25AECD;
+ border-left: 1px solid #25AECD;
+ border-bottom: 1px solid #25AECD;
+ border-top: 1px solid #25AECD;
+ }
- .tab-hb {
- width: 32px;
- height: 30px;
- background-color: #545454;
- }
+ .el-pager li.active {
+ border-color: #25AECD;
+ background-color: rgba(38, 222, 253, 0.3);
+ color: #e4e8f1;
+ }
- .tab-pk {
- width: 32px;
- height: 30px;
- background-color: #83a6c4;
- }
+ .el-pager li:hover {
+ border-color: #25AECD;
+ background-color: rgba(38, 222, 253, 0.3);
+ color: #34e0ff;
+ }
- .panel-tab {
- position: absolute;
- left: 0;
- height: 120px;
- top: 0;
- width: 32px;
- z-index: 500;
- background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
- }
+ .btn-prev {
+ background-color: transparent;
+ // border: 1px solid #25AECD;
+ border-left: 1px solid #25AECD;
+ border-bottom: 1px solid #25AECD;
+ border-top: 1px solid #25AECD;
+ color: #e4e8f1;
+ }
- .right-control {
- width: 290px;
- //height: 573px;
- height: 100%;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 999;
- background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
- background-size: 100% 98%;
- }
-
- .panel_searchTotal {
- font-size: 12px;
- float: right;
- }
-
- .panel_header {
- // background-color: #030D2E;
- padding: 7px 15px 3px 20px;
- }
-
- .panel_title {
- font-size: 12px;
- margin: 0px;
- padding: 0px;
- color: #78c4ff;
- font-weight: bold;
- }
-
- .el-message-box__content {
- background-color: transparent;
- }
-
- .search-form .el-form-item {
- margin: 0px;
- }
-
- .search-form .el-icon-search {
- display: grid;
- line-height: 30px;
- font-size: 18px;
- }
-
- .search-panel {
- border: #07325B;
- background-color: #07325B !important;
- margin-top: 0px;
-
- .el-input__inner {
- border-radius: 0px !important;
- background-color: #061e51 !important;
- }
- }
-
- input::-webkit-input-placeholder {
- color: #569ee1;
- }
-
- input::-moz-placeholder {
- color: #569ee1;
- }
-
- input::-ms-input-placeholder {
- color: #569ee1;
- }
-
- input[type=text]:focus {
- outline: 1px solid #17e4f6;
- // box-shadow: 1px 0px 3px 0px #17e4f6;
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
- }
-
- .search-result {
- margin: 5px 0px 0px 0px;
- padding: 0px;
- border: #051842;
- height: 290px;
- overflow-y: scroll;
- background-color: transparent !important;
- margin-bottom: -8px !important;
- }
-
- .offline {
- color: #64778B;
- }
-
- .B-TMD-table-list {
- margin-top: 10px;
- text-align: left;
- padding-left: 10px;
- //color: #64778B;
- color: #34e0ff;
- width: 100%;
- line-height: 25px;
- background: url('../../assets/images/map-pages/icon/dd.png') no-repeat;
- }
-
- .B-TMD-inp-button {
- width: 46px;
- height: 52px;
- position: absolute;
- bottom: 8px;
- right: 16px;
- background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
- cursor: pointer;
- }
-
- .footer-page {
- position: absolute;
- background-color: transparent !important;
- bottom: 10px !important;
- margin-left: 0px;
- border: none;
-
- .warnPagination {
- .btn-quicknext, .btn-quickprev {
- color: #e4e8f1 !important;
- background-color: transparent;
- // border: 1px solid #25AECD;
- border-left: 1px solid #25AECD;
- border-bottom: 1px solid #25AECD;
- border-top: 1px solid #25AECD;
- color: #e4e8f1;
- }
-
- .el-pager li {
- color: #e4e8f1;
- background: transparent;
- // border: 1px solid #25AECD;
- border-left: 1px solid #25AECD;
- border-bottom: 1px solid #25AECD;
- border-top: 1px solid #25AECD;
- }
-
- .el-pager li.active {
- border-color: #25AECD;
- background-color: rgba(38, 222, 253, 0.3);
- color: #e4e8f1;
- }
-
- .el-pager li:hover {
- border-color: #25AECD;
- background-color: rgba(38, 222, 253, 0.3);
- color: #34e0ff;
- }
-
- .btn-prev {
- background-color: transparent;
- // border: 1px solid #25AECD;
- border-left: 1px solid #25AECD;
- border-bottom: 1px solid #25AECD;
- border-top: 1px solid #25AECD;
- color: #e4e8f1;
- }
-
- .btn-next {
- background-color: transparent;
- border: 1px solid #25AECD;
- color: #e4e8f1;
- }
- }
- }
-
- ::-webkit-scrollbar {
- width: 7px;
- height: 5px !important;
- }
-
- ::-webkit-scrollbar-thumb {
- /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
- border-radius: 10px;
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
- background: #0661AE;
- border: 1px solid transparent;
- }
-
- ::-webkit-scrollbar-track {
- /*婊氬姩鏉￠噷闈㈣建閬�*/
- // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
- border-radius: 0px;
- background: #0E3565;
- }
-
- .selectFrom {
- color: #061e51;
- border: 1px solid #061e51 !important;
- background: #dcc805 !important;
-
- .el-select-dropdown__list {
- background: #061e51 !important;
- }
-
- .el-select-dropdown__item {
- color: #949494;
- background: #061e51 !important;
- }
-
- .el-select-dropdown__item.hover,
- .el-select-dropdown__item:hover {
- color: #fff;
- background: #061e51 !important;
- }
-
- .popper__arrow {
- background-color: #061e51 !important;
- }
- }
+ .btn-next {
+ background-color: transparent;
+ border: 1px solid #25AECD;
+ color: #e4e8f1;
+ }
}
+ }
+
+ ::-webkit-scrollbar {
+ width: 7px;
+ height: 5px !important;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
+ border-radius: 10px;
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+ background: #0661AE;
+ border: 1px solid transparent;
+ }
+
+ ::-webkit-scrollbar-track {
+ /*婊氬姩鏉￠噷闈㈣建閬�*/
+ // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
+ border-radius: 0px;
+ background: #0E3565;
+ }
+
+ .selectFrom {
+ color: #061e51;
+ border: 1px solid #061e51 !important;
+ background: #dcc805 !important;
+
+ .el-select-dropdown__list {
+ background: #061e51 !important;
+ }
+
+ .el-select-dropdown__item {
+ color: #949494;
+ background: #061e51 !important;
+ }
+
+ .el-select-dropdown__item.hover,
+ .el-select-dropdown__item:hover {
+ color: #fff;
+ background: #061e51 !important;
+ }
+
+ .popper__arrow {
+ background-color: #061e51 !important;
+ }
+ }
+}
</style>
diff --git a/src/components/panel/DischargeSearch.vue b/src/components/panel/topicSearch/DischargeSearch.vue
similarity index 100%
rename from src/components/panel/DischargeSearch.vue
rename to src/components/panel/topicSearch/DischargeSearch.vue
diff --git a/src/components/panel/EnvProtectSearch.vue b/src/components/panel/topicSearch/EnvProtectSearch.vue
similarity index 100%
rename from src/components/panel/EnvProtectSearch.vue
rename to src/components/panel/topicSearch/EnvProtectSearch.vue
diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue
new file mode 100644
index 0000000..22d6997
--- /dev/null
+++ b/src/components/panel/topicSearch/SewersSearch.vue
@@ -0,0 +1,178 @@
+<template>
+ <div id="sewers-search">
+ <div class="el-message-box__header panel_header">
+ <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
+ </div>
+ </div>
+ <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
+ <div class="box__content" v-if="gdVisible">
+ <div>
+ <el-card class="search-panel">
+ <el-form ref="form" :model="form" label-width="90px" class="search-form">
+ <el-form-item label="璁炬柦绫诲瀷锛�" size="mini">
+ <el-select v-model="form.pipelineType" @change="handlePipelineType" popper-class="select-down">
+ <el-option
+ v-for="item in pipelineTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏁版嵁绫诲瀷锛�">
+ <el-select v-model="form.dataType" size="mini" popper-class="select-down">
+ <el-option
+ v-for="item in dataTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+<!-- <el-form-item >-->
+ <el-input v-model="form.key" size="mini"
+ placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�">
+<!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>-->
+ <span><i class="el-icon-edit"></i></span>
+ </el-input>
+<!-- </el-form-item>-->
+<!-- <el-form-item>-->
+<!-- <input type="button" class="btn-ok" @click="handleSearch" value="鏌ヨ">-->
+<!-- <input type="button" class="btn-reset" @click="handleSearch" value="閲嶇疆">-->
+<!-- </el-form-item>-->
+ </el-form>
+ </el-card>
+ <el-card class="search-result" style="height:271px;">
+ <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
+ <div class="B-TMD-table-list-title">
+ <div class="B-TMD-table-list-head">
+ <div class="B-TMD-table-list-title-y"
+ :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
+ <span>杩愬崟鍙凤細</span>
+ <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
+ :title="item.transNo">
+ <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
+ </span>
+ </div>
+ <div class="B-TMD-table-list-title-c">
+ 杞藉叿鍙凤細
+ <span id="plateNumber_p">
+ <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
+ </span>
+ </div>
+ </div>
+ <div class="B-TMD-table-icons" style="float:right">
+ <ul>
+ <li class="B-TMD-table-list-title-y-adress"
+ @click="handleLocation(item)"></li>
+ <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
+ </ul>
+ </div>
+ </div>
+ <div class="B-TMD-table-list-content">
+ <div>
+ <span>鍙戣揣浼佷笟锛�</span>
+ <span id="b_twe_consignment" :title="item.outWarehouseName">{{
+ item.outWarehouseName == null ? "鏆傛棤" : item.outWarehouseName
+ }}</span>
+ </div>
+ <div>
+ <span>鎵� 杩� 鍟嗭細</span>
+ <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
+ </div>
+ <div><span>鏀惰揣浼佷笟锛�</span> <span
+ id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>
+ </div>
+ </div>
+ <div class="B-TMD-table-list-bottom">
+ <div class="B-TMD-table-list-bottom-name">
+ 璐х墿鍚嶇О锛�<span :title="item.materialName">{{ item.materialName }}</span></div>
+ </div>
+ </div>
+ </el-card>
+
+ <el-card class="footer-page" v-if="total > 10">
+ <el-pagination
+ small
+ @current-change="handlePage"
+ :page-size=pageSize
+ layout="prev, pager, next"
+ :total=total
+ :current-page=current
+ class="warnPagination"
+ >
+ </el-pagination>
+ </el-card>
+ </div>
+ </div>
+ <!-- <div class="monitor2" v-if="hbVisible">-->
+ <!-- <env-protect-search></env-protect-search>-->
+ <!-- </div>-->
+ <!-- <div class="monitor2" v-if="pkVisible">-->
+ <!-- <discharge-search></discharge-search>-->
+ <!-- </div>-->
+ </div>
+ </div>
+
+</template>
+
+<script>
+import { PipelineTypeOptions, OutletOptions, AttachOptions, PipelineOptions, EnvironmentOptions, SurroundingsOptions } from '@/conf/LayerSewers'
+
+export default {
+ name: 'SewersSearch',
+ data () {
+ return {
+ gdVisible: true,
+ list: [],
+ total: 0,
+ pipelineTypeOptions: PipelineTypeOptions,
+ outletOptions: OutletOptions,
+ dataTypeOptions: [],
+
+ attachOptions: AttachOptions,
+ pipelineOptions: PipelineOptions,
+ environmentOptions: EnvironmentOptions,
+ surroundingsOptions: SurroundingsOptions,
+ form: {
+ transNo: null,
+ carrierName: null,
+ transMode: null,
+ vehicleNo: null,
+ orderState: null,
+ size: 10,
+ current: 1
+ },
+ pageSize: 10,
+ current: 1,
+ isWaybillHover: true,
+ isRouteHover: false
+ }
+ },
+ props: ['title'],
+ methods: {
+ handlePipelineType (item) {
+ console.log(item)
+ if (item === '2') {
+ this.dataTypeOptions = this.outletOptions
+ } else if (item === '1') {
+ this.dataTypeOptions = this.pipelineOptions
+ } else if (item === '3') {
+ this.dataTypeOptions = this.attachOptions
+ } else if (item === '4') {
+ this.dataTypeOptions = this.environmentOptions
+ } else if (item === '5') {
+ this.dataTypeOptions = this.surroundingsOptions
+ }
+ },
+ handleSearch () {
+
+ }
+ }
+}
+</script>
+
+<style lang="less">
+@import '@assets/css/map/map-elem-ui';
+
+</style>
diff --git a/src/conf/LayerSewers.js b/src/conf/LayerSewers.js
index 5e8b4cc..987a9dd 100644
--- a/src/conf/LayerSewers.js
+++ b/src/conf/LayerSewers.js
@@ -375,3 +375,136 @@
]
}
]
+
+export const PipelineTypeOptions = [{
+ value: '1',
+ label: '绠＄嚎鏈綋'
+}, {
+ value: '2',
+ label: '鎺掑彛淇℃伅'
+}, {
+ value: '3',
+ label: '闄勫睘璁炬柦'
+}, {
+ value: '4',
+ label: '鐜繚璁炬柦'
+}, {
+ value: '5',
+ label: '鍛ㄨ竟鐜'
+}]
+
+export const OutletOptions = [{
+ value: '1',
+ label: '鍏ㄩ儴鎺掑彛'
+}, {
+ value: '2',
+ label: '鍐呮帓鍙�'
+}, {
+ value: '3',
+ label: '澶栨帓鍙�'
+}]
+
+export const AttachOptions = [
+ {
+ value: '1',
+ label: '鍏ㄩ儴璁炬柦'
+ }, {
+ value: '2',
+ label: '闃�闂�'
+ }, {
+ value: '3',
+ label: '绠″粖'
+ }, {
+ value: '4',
+ label: '绠℃灦'
+ }, {
+ value: '5',
+ label: '涓夐��'
+ }, {
+ value: '6',
+ label: '鍥涢��'
+ }, {
+ value: '7',
+ label: '寮ご'
+ }]
+
+export const PipelineOptions = [{
+ value: '1',
+ label: '鍏ㄩ儴绠＄嚎'
+}, {
+ value: '2',
+ label: '鐢熸椿姹℃按绠＄嚎'
+}, {
+ value: '3',
+ label: '鍚洂绠＄嚎'
+}, {
+ value: '4',
+ label: '闆ㄦ按绠＄嚎'
+}, {
+ value: '5',
+ label: '鍚补绠＄嚎'
+}, {
+ value: '6',
+ label: '浜嬫晠姘寸绾�'
+}, {
+ value: '7',
+ label: '鍚⒈绠＄嚎'
+}, {
+ value: '8',
+ label: '寰幆姘寸绾�'
+}, {
+ value: '9',
+ label: '鍑�鍖栨按绠＄嚎'
+}]
+
+export const EnvironmentOptions = [
+ {
+ value: '1',
+ label: '鍏ㄩ儴璁炬柦'
+ }, {
+ value: '2',
+ label: '闆ㄧ瀛�'
+ }, {
+ value: '3',
+ label: '闃茬伀鍫�'
+ }, {
+ value: '4',
+ label: '闆嗘按姹�'
+ }, {
+ value: '5',
+ label: '鏀堕泦缃�'
+ }, {
+ value: '6',
+ label: '鎴祦闂�'
+ }, {
+ value: '7',
+ label: '婧㈡祦鍫�'
+ }, {
+ value: '8',
+ label: '闅旀补姹�'
+ }, {
+ value: '9',
+ label: '娉�'
+ }]
+
+export const SurroundingsOptions = [
+ {
+ value: '1',
+ label: '鍏ㄩ儴鍛ㄨ竟鐜'
+ }, {
+ value: '2',
+ label: '鍖婚櫌'
+ }, {
+ value: '3',
+ label: '鏅尯'
+ }, {
+ value: '4',
+ label: '鑷劧淇濇姢鍖�'
+ }, {
+ value: '5',
+ label: '娑堥槻'
+ }, {
+ value: '6',
+ label: '姘翠綋'
+ }
+]
diff --git a/src/conf/Topic.js b/src/conf/Topic.js
new file mode 100644
index 0000000..fb1faa3
--- /dev/null
+++ b/src/conf/Topic.js
@@ -0,0 +1,57 @@
+export const TopicSelectAll = {
+ name: '鍏ㄩ��',
+ check: false,
+ icon: '/assets/images/menu/special.png'
+}
+
+export const TopicList = [{
+ name: '姹℃煋婧�',
+ id: 1,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+}, {
+ name: '搴熸按鐩戞祴',
+ id: 2,
+ checked: false,
+ icon: '/assets/images/menu/special.png'
+}, {
+ name: '搴熸皵鐩戞祴',
+ id: 3,
+ checked: false,
+ icon: '/assets/images/menu/special.png'
+}, {
+ name: '鍥哄簾绠＄悊',
+ id: 4,
+ checked: false,
+ icon: '/assets/images/menu/special.png'
+}, {
+ name: '鐜椋庨櫓',
+ id: 5,
+ checked: false,
+ icon: '/assets/images/menu/special.png'
+}, {
+ name: '鍦熷￥鍙婂湴涓嬫按',
+ id: 6,
+ checked: false,
+ icon: '/assets/images/menu/special.png'
+}, {
+ name: '姹￠洦姘寸缃�',
+ id: 7,
+ checked: false,
+ icon: '/assets/images/menu/special.png'
+}, {
+ name: '棰勮鎶ヨ',
+ id: 8,
+ checked: false,
+ icon: '/assets/images/menu/special.png'
+}, {
+ name: '鎸囨爣缁熻',
+ id: 9,
+ checked: false,
+ icon: '/assets/images/menu/special.png'
+}, {
+ name: '搴旀�ュ湴鍥�',
+ id: 10,
+ checked: false,
+ icon: '/assets/images/menu/special.png'
+}]
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 6016809..341fb4b 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -18,6 +18,10 @@
datas: {
sewers: []
},
+ topic: {
+ currentTopic: '',
+ topicCheckedList: []
+ },
config: config,
serviceLayers: config.mapConfig.Layers
}
@@ -49,6 +53,9 @@
},
toggleServiceLayerFilter (state) {
state.showServiceLayerFilter = !state.showServiceLayerFilter
+ },
+ setTopic (state, obj) {
+ state.topic.topicCheckedList = obj
}
}
const actions = {}
--
Gitblit v1.8.0