From e05684a5b3308d3751cd5f10bf144b2118617acf Mon Sep 17 00:00:00 2001
From: wangqi <magical1908@outlook.com>
Date: 星期一, 15 三月 2021 11:51:51 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/panel/RightSearchPanel.vue | 139 ++++++++++++++++-----------
src/assets/css/map/_map-variable.less | 1
src/components/panel/MenuTopic.vue | 1
src/conf/Topic.js | 18 ---
vue.config.js | 10 +
src/main.js | 2
src/assets/css/map/map-panel-style.less | 63 +++++++++---
src/components/panel/ToolBoxPanel.vue | 2
package.json | 2
src/components/panel/LegendPanel.vue | 1
src/components/panel/topicSearch/SewersSearch.vue | 49 ++++++++-
src/App.vue | 1
12 files changed, 185 insertions(+), 104 deletions(-)
diff --git a/package.json b/package.json
index 1e6e4b7..1004223 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,9 @@
"nprogress": "^0.2.0",
"rbush": "^3.0.1",
"screenfull": "^3.3.3",
+ "style-resources-loader": "^1.4.1",
"vue": "^2.6.11",
+ "vue-cli-plugin-style-resources-loader": "^0.1.4",
"vue-count-to": "^1.0.13",
"vue-focus": "^2.1.0",
"vue-fullscreen": "^2.2.0",
diff --git a/src/App.vue b/src/App.vue
index 24ecc4b..89338ed 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,6 @@
</script>
<style lang="less">
-@import '@assets/css/map/_map-variable';
html, body, #app{
color: @color;
height: 100vh;
diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less
index f65e118..caba7bb 100644
--- a/src/assets/css/map/_map-variable.less
+++ b/src/assets/css/map/_map-variable.less
@@ -1,5 +1,6 @@
@color:#00fff6;
@color-highlight:#fff700;
+@color-gray:#C0C4CC;
@color-title:white;
@color-over:white;
@background-color:rgba(0,16,30,.8);
diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less
index a07b76c..5faaab9 100644
--- a/src/assets/css/map/map-panel-style.less
+++ b/src/assets/css/map/map-panel-style.less
@@ -11,11 +11,34 @@
text-align: center;
height: 20px;
line-height: 20px;
+
+ color: #00fff6;
+ cursor: pointer;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ }
+}
+.el-tabs__header{
+ font-size: .08333rem;
+ line-height: .10938rem;
+ background: rgba(0,255,246,.14);
+}
+.el-dialog{
+ border: 0.00521rem solid @color;
+ box-shadow: 0 0 0.03rem @color;
+ background: rgba(0, 16, 30, 0.8);
+ border-radius: 0.05208rem;
+
+ .el-dialog__title{
+ padding: .03125rem .08333rem;
+ color: @color;
+ cursor: pointer;
+ flex-shrink: 0;
}
}
.select-down {
border: none !important;
- background-color: @background-color !important;
+ background-color: @background-color ;
//.el-scrollbar{
//
@@ -40,27 +63,33 @@
// background-color: @background-color;
// }
.popper__arrow::after{
- border-bottom-color: @color !important;
+ border-bottom-color: @color ;
}
}
-.sewers-search{
- display: block;
- //width: calc(100% - 10px);
- height:512px;
- .search-btn{
-
- }
- //location-btn{
- //
- //}
-
- .location-btn:hover,.el-input__icon:hover{
- color: @color;
- cursor: pointer;
+.el-table{
+ color: #00fff6;
+}
+.el-table th, .el-table tr{
+ background: transparent;
+}
+.el-table thead {
+ color: #ffffff;
+ font-weight: 500;
+}
+.el-table, .el-table__expanded-cell {
+ background-color: transparent;
+}
+.el-table thead.is-group th{
+ background-color: transparent;
+}
+.map-input{
+ input{
+ border-radius: 0;
+ background-color: @background-color-light ;
+ border: solid 1px @color ;
}
}
-
.map-tooltip.is-dark{
font-size: .08333rem ;
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index f7329bc..383aea2 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -145,7 +145,6 @@
</script>
<style lang="less">
-@import '@assets/css/map/_map-variable';
.legend-panel {
position: absolute;
z-index: 502;
diff --git a/src/components/panel/MenuTopic.vue b/src/components/panel/MenuTopic.vue
index 5b2018b..bf13eeb 100644
--- a/src/components/panel/MenuTopic.vue
+++ b/src/components/panel/MenuTopic.vue
@@ -66,7 +66,6 @@
</script>
<style lang="less" >
-@import '@assets/css/map/_map-variable';
.menu-special {
position: absolute;
left: 1rem;
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 13b6e48..ea52369 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,18 +1,21 @@
<template>
- <div class="panel-right">
+ <div class="panel-right" v-show="isShow">
<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 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="container">
- <ul class="module-wrap"
- style="padding-top: 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
- <li class="active module-wrap__box">
- <div class="module-wrap__box-item">
- <!----><img src="../../assets/images/map-pages/icon/dd.png" class="icon">
- </div><!---->
+ <ul v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
+ <li style=" ">
+<!-- <span>{{item.name}}</span>-->
+
+<!-- <div >-->
+ <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
+<!-- </div>-->
</li>
- </ul><!----><!---->
+ </el-tooltip>
+ </ul>
</div>
</div>
<!-- <div class="panel-fold-btn" >-->
@@ -38,7 +41,6 @@
</template>
<script>
-// import $ from 'jquery'
import EnvProtectSearch from './topicSearch/EnvProtectSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import { TopicList } from '../../conf/Topic'
@@ -49,6 +51,7 @@
components: { EnvProtectSearch, DischargeSearch },
data () {
return {
+ isShow: true,
topicMenu: [],
topicList: TopicList,
topicCheckedList: [],
@@ -61,8 +64,7 @@
toggleMonitorStyle: 'right:0px',
title: '姹￠洦姘寸缃�',
-
- isCollapse: false
+ isCollapse: true
}
},
computed: {},
@@ -75,7 +77,6 @@
this.topicList.forEach((item) => {
this.topicCheckedList.forEach((itm) => {
if (item.name === itm) {
- // item.checked = tr
this.topicMenu.push(item)
}
})
@@ -86,7 +87,12 @@
handleClose (done) {
console.log(done)
},
-
+ selected (val) {
+ console.log(val)
+ this.topicList.forEach((itm) => {
+ itm.checked = val.name === itm.name
+ })
+ },
handlePage (page) {
},
handleGd () {
@@ -139,17 +145,42 @@
</script>
<style lang="less">
-@import '@assets/css/map/_map-variable';
+.module-wrap{
+ width: 0.15rem;
+ height: 0.15rem;
+ padding: .04167rem;
+ //padding: .00521rem;
+ background: rgba(0,16,30,.5);
+ border-radius: .03125rem;
+ border: .00521rem solid rgba(255,247,0,.5);
+ margin: .04167rem 0;
+ font-size: .08333rem;
+ -webkit-transition: all .2s linear;
+ transition: all .2s linear;
+ cursor: pointer;
+ position: relative;
+ line-height: 0.15rem;
+ li{
+ margin: 0.00521rem 0;
+ text-align: center;
+ img{
+ width: 0.1rem;
+ height: 0.1rem;
+
+ }
+ }
+}
.panel-right {
- width: 322px;
+ display: inline-flex;
+ //width: 322px;
//height: 100%;
//position: absolute;
//right: 10px;
//top: 10px;
height: 0;
position: absolute;
- top: .60417rem;
- right: .15625rem;
+ top: .4rem;
+ right: .08333rem;
z-index: 501;
display: -webkit-box;
display: -ms-flexbox;
@@ -158,22 +189,22 @@
-ms-flex-align: start;
align-items: flex-start;
- .el-card__body {
- padding: 7px;
- }
- .el-form-item__content {
- color: rgb(52, 224, 255);
- }
-
- .el-picker-panel {
- background-color: #061e51 !important;
- }
-
- .el-input__inner {
- border-radius: 0 !important;
- background-color: #061e51 !important;
- border: solid 1px #0e639e !important;
- }
+ //.el-card__body {
+ // padding: 7px;
+ //}
+ //.el-form-item__content {
+ // color: rgb(52, 224, 255);
+ //}
+ //
+ //.el-picker-panel {
+ // background-color: #061e51 !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);
@@ -281,8 +312,8 @@
background-color: rgba(5,24,66,.8);
border-radius: 10px 0 0 10px;
.btn-stretch {
- width: 20px;
- height: 40px;
+ //width: 20px;
+ //height: 40px;
background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
cursor: pointer;
/*margin-left: -20px;*/
@@ -304,8 +335,8 @@
}
.tab-item {
- width: 32px;
- height: 30px;
+ //width: .2rem;
+ //height: .2rem;
color: @color;
font-size: 12px;
background-color: #0B3B6D;
@@ -314,13 +345,9 @@
cursor: pointer;
}
.panel-tab {
- position: absolute;
- left: 0;
- //height: 120px;
- top: 0;
- width: 32px;
+ position: relative;
z-index: 500;
- background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
+ margin-right: .025rem;
.container{
max-height: 3.125rem;
overflow: hidden;
@@ -378,16 +405,16 @@
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;
- }
- }
+ //.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;
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index 1b9fd88..ac33f0f 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -264,7 +264,7 @@
justify-content: space-around;
.init-choose {
- background: #305B62;
+ background: @background-color;
width: 35px;
height: 35px;
border-radius: 50%;
diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue
index cc64bb0..b9d023e 100644
--- a/src/components/panel/topicSearch/SewersSearch.vue
+++ b/src/components/panel/topicSearch/SewersSearch.vue
@@ -1,12 +1,12 @@
<template>
- <div class="sewers-search">
+ <div :class="'sewers-search map-background'">
<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">
+ <div class="search-panel ">
<el-form ref="form" :model="form" label-width="90px" class="search-form">
<el-form-item label="璁炬柦绫诲瀷锛�" size="mini" class="search-panel-item">
- <el-select v-model="form.pipelineType" @change="handlePipelineType" popper-class="select-down">
+ <el-select style="width: 100%" :popper-append-to-body="false" v-model="form.pipelineType" @change="handlePipelineType" :popper-class="'select-down'">
<el-option
v-for="item in pipelineTypeOptions"
:key="item.value"
@@ -16,7 +16,7 @@
</el-select>
</el-form-item>
<el-form-item :label="form.pipelineType+'锛�'" size="mini">
- <el-select v-model="form.dataType" @change="handleDataType" popper-class="select-down">
+ <el-select style="width: 100%" :popper-append-to-body="false" v-model="form.dataType" @change="handleDataType" :popper-class="'select-down'">
<el-option
v-for="item in dataTypeOptions"
:key="item.value"
@@ -38,7 +38,7 @@
<!-- <input type="button" class="btn-reset" @click="handleSearch" value="閲嶇疆">-->
<!-- </el-form-item>-->
</el-form>
- </el-card>
+ </div>
<el-scrollbar style="height:100%">
<el-card class="search-result" >
<div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
@@ -187,6 +187,41 @@
}
</script>
-<style lang="less">
-//@import '@assets/css/map/map-elem-ui';
+<style lang="less" scoped>
+.sewers-search{
+ position: relative;
+ width: 1.79167rem;
+ height: 3.4375rem;
+ overflow: hidden;
+ .search-panel{
+ background-color: transparent;
+ border: 1px solid @background-color-split;
+ padding: 10px;
+
+ /deep/ input {
+ border-radius: 0;
+ background-color: @background-color-split ;
+ border: solid 1px @color ;
+ color: @color-gray;
+ font-size: 0.01rem;
+ .el-select .el-input.is-focus .el-input__inner{
+ border-color: @color;
+ }
+ }
+ /deep/ input:focus{
+ border-color: @color;
+ }
+ }
+ .search-btn{
+
+ }
+ //location-btn{
+ //
+ //}
+
+ .location-btn:hover,.el-input__icon:hover{
+ color: @color;
+ cursor: pointer;
+ }
+}
</style>
diff --git a/src/conf/Topic.js b/src/conf/Topic.js
index a8e25e4..07f0f3f 100644
--- a/src/conf/Topic.js
+++ b/src/conf/Topic.js
@@ -52,22 +52,4 @@
checked: false,
icon: '/assets/images/menu/special.png',
comp: 'envProtectSearch'
-}, {
- name: '棰勮鎶ヨ',
- id: 8,
- checked: false,
- icon: '/assets/images/menu/special.png',
- comp: 'sewersSearch'
-}, {
- name: '鎸囨爣缁熻',
- id: 9,
- checked: false,
- icon: '/assets/images/menu/special.png',
- comp: 'envProtectSearch'
-}, {
- name: '搴旀�ュ湴鍥�',
- id: 10,
- checked: false,
- icon: '/assets/images/menu/special.png',
- comp: 'sewersSearch'
}]
diff --git a/src/main.js b/src/main.js
index 5f7bf42..8ca4020 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,7 +8,7 @@
import echartsDarkTheme from '@/styles/theme-dark/echarts/theme.json'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
-import './assets/css/map/_map-variable.less'
+import '@assets/css/map/_map-variable.less'
import '@assets/css/map/map-panel-style.less'
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
diff --git a/vue.config.js b/vue.config.js
index be07b5a..07df932 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,5 @@
const appConfig = require('./src/app.config')
-
+const path = require('path')
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? `/${appConfig.projectName}/` : '/',
configureWebpack: config => {
@@ -16,6 +16,14 @@
},
parallel: require('os').cpus().length > 1, // 鏋勫缓鏃跺紑鍚杩涚▼澶勭悊babel缂栬瘧
productionSourceMap: false,
+ pluginOptions: {
+ 'style-resources-loader': {
+ preProcessor: 'less',
+ patterns: [
+ path.resolve(__dirname, './src/assets/css/map/_map-variable.less')
+ ]
+ }
+ },
devServer: {
// host: 'localhost',
// open: true,
--
Gitblit v1.8.0