From ce658042246b6425bbb015c2d271e2b3f9c9d83e Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 15 三月 2021 09:14:01 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master' into master
---
src/components/panel/RightSearchPanel.vue | 173 ++++--
src/components/panel/MenuTopic.vue | 1
src/components/table/enterprise.vue | 62 ++
src/conf/Topic.js | 18
vue.config.js | 10
public/index.html | 14
src/assets/css/map/map-panel-style.less | 92 +++
src/assets/images/map-pages/icon/map/warn.png | 0
src/components/table/components/IndexStatistics.vue | 263 ++++++++++
src/utils/dialogDrag.js | 80 +++
src/assets/css/map/map-popup.less | 13
src/views/MapTemplate.vue | 19
src/components/panel/LegendPanel.vue | 216 +++-----
src/views/popup/Dialog.vue | 37 +
src/assets/images/map-pages/icon/map/company.png | 0
src/assets/css/map/_map-variable.less | 5
/dev/null | 62 --
src/components/plugin/DialogDrag.js | 49 ++
src/components/table/summarySheets.vue | 21
src/main.js | 3
package.json | 2
src/components/panel/topicSearch/SewersSearch.vue | 49 +
src/App.vue | 5
src/components/table/components/Warn.vue | 232 +++++++++
24 files changed, 1,129 insertions(+), 297 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/public/index.html b/public/index.html
index 6c18cb7..396d79c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,5 +15,19 @@
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
+ <script type="text/javascript">
+ /* 杩欓噷鎴戜滑鍒╃敤浜嗕竴涓嚜鎵ц鍑芥暟 */
+ (function(){
+ change();
+ function change(){
+ console.log( document.documentElement.clientWidth*12/640 +'px')
+ //html鐨� font-size 鐨勫ぇ灏忓昂瀵�
+ //杩欓噷鐨刪tml瀛椾綋澶у皬鍒╃敤浜嗕竴涓畝鍗曠殑鏁板鍏紡锛屽綋鎴戜滑榛樿璁剧疆浠ュ睆骞�320px浣嶅熀鍑嗘鏃剁殑瀛椾綋澶у皬涓�20px(320 20px),閭ｄ箞娴忚鍣ㄧ獥鍙ｅぇ灏忔敼鍙樼殑鏃跺�欐柊鐨刪tml鐨刦ontSize锛坈lientWidth 鏂扮殑鍊硷級灏辨槸clientWidth*20/320
+ document.documentElement.style.fontSize = document.documentElement.clientWidth/12 +'px';
+ }
+ /* 鐩戝惉绐楀彛澶у皬鍙戠敓鏀瑰彉鏃�*/
+ window.addEventListener('resize',change,false);
+ })();
+ </script>
</body>
</html>
diff --git a/src/App.vue b/src/App.vue
index 6cd8911..89338ed 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,9 +13,9 @@
}
</script>
-<style>
+<style lang="less">
html, body, #app{
- color: #2c3e50;
+ color: @color;
height: 100vh;
width: 100vw;
margin: 0;
@@ -27,6 +27,7 @@
}
body{
-ms-overflow-style: none;
+ font-size: 12px;
}
</style>
diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less
index aad5b7b..caba7bb 100644
--- a/src/assets/css/map/_map-variable.less
+++ b/src/assets/css/map/_map-variable.less
@@ -1,4 +1,9 @@
@color:#00fff6;
@color-highlight:#fff700;
+@color-gray:#C0C4CC;
+@color-title:white;
+@color-over:white;
@background-color:rgba(0,16,30,.8);
@background-color-light:rgba(40,50,100,.4);
+@background-color-split:rgba(0,255,246,.14);
+@border-radius: .03rem;
diff --git a/src/assets/css/map/map-elem-ui.less b/src/assets/css/map/map-elem-ui.less
deleted file mode 100644
index 1f6fd20..0000000
--- a/src/assets/css/map/map-elem-ui.less
+++ /dev/null
@@ -1,62 +0,0 @@
-@import "_map-variable";
-.el-button--primary{
- color: @color;
- background-color: @background-color;
- border-color: @color;
-}
-
-.el-tabs{
- .el-tabs__item{
- padding: 0 10px;
- text-align: center;
- height: 20px;
- line-height: 20px;
- }
-}
-.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;
- }
-}
-.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;
- }
-}
diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less
new file mode 100644
index 0000000..94824fb
--- /dev/null
+++ b/src/assets/css/map/map-panel-style.less
@@ -0,0 +1,92 @@
+@import "_map-variable";
+.el-button--primary{
+ color: @color;
+ background-color: @background-color;
+ border-color: @color;
+}
+
+.el-tabs{
+ .el-tabs__item{
+ padding: 0 10px;
+ text-align: center;
+ height: 20px;
+ line-height: 20px;
+ }
+}
+.select-down {
+ border: none !important;
+ background-color: @background-color ;
+
+ //.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 ;
+ }
+
+
+}
+.map-input{
+ input{
+ border-radius: 0;
+ background-color: @background-color-light ;
+ border: solid 1px @color ;
+ }
+}
+
+.map-tooltip.is-dark{
+ font-size: .08333rem ;
+ color: @color-highlight ;
+ background: @background-color ;
+ border-radius: .03rem;
+ padding: .05rem ;
+}
+.map-btn-unactive{
+ color: @color ;
+ border: .00521rem solid @color ;
+ box-shadow: 0 0 .03rem @color ;
+}
+.map-btn-active{
+ color: @color-highlight ;
+ border: .00521rem solid @color-highlight ;
+ box-shadow: 0 0 .03rem @color-highlight ;
+}
+.map-btn-background{
+ background: @background-color;
+ //border: .00521rem solid @color;
+ //box-shadow: 0 0 .03rem @color;
+ //border-radius: .05208rem;
+}
+.map-background{
+ //color: @color;
+ border: .00521rem solid @color;
+ box-shadow: 0 0 .03rem @color;
+ background: @background-color;
+ //padding: .05rem !important;
+ border-radius: .05208rem;
+}
+.map-under-line {
+ height: 1px;
+ background: @background-color-split;
+ margin-block-start: 0;
+ margin-block-end: 0;
+}
diff --git a/src/assets/css/map/map-popup.less b/src/assets/css/map/map-popup.less
index 9384d92..d451294 100644
--- a/src/assets/css/map/map-popup.less
+++ b/src/assets/css/map/map-popup.less
@@ -6,12 +6,13 @@
background-color: @background-color;
/*background-color: transparent;*/
border: .00521rem solid @color;
- padding: .10417rem;
+ padding: .05rem;
//-webkit-box-shadow: 0 0 0.03125rem 0 @color;
//box-shadow: 0 0 0.03125rem 0 @color;
-webkit-box-shadow: 0 0 10px 0 @color;
- box-shadow: 0 0 10px @color;
- border-radius: 1rem;
+ box-shadow: 0 0 .03rem @color;
+ //border-radius: .03rem;
+ border-radius: 10px;
}
.leaflet-popup-tip-container {
@@ -22,15 +23,15 @@
content: "";
position: absolute;
left: 50%;
- bottom: -.3rem;
+ bottom: -.03rem;
-webkit-transform: translateX(-50%) rotate(
45deg
);
transform: translateX(-50%) rotate(
45deg
);
- width: .6rem;
- height: .6rem;
+ width: .06rem;
+ height: .06rem;
background-color: @background-color;
border-right: .00521rem solid @color;
border-bottom: .00521rem solid @color;
diff --git a/src/assets/images/map-pages/icon/map/company.png b/src/assets/images/map-pages/icon/map/company.png
new file mode 100644
index 0000000..28a279a
--- /dev/null
+++ b/src/assets/images/map-pages/icon/map/company.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/map/warn.png b/src/assets/images/map-pages/icon/map/warn.png
new file mode 100644
index 0000000..3533b7c
--- /dev/null
+++ b/src/assets/images/map-pages/icon/map/warn.png
Binary files differ
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index a70ef75..383aea2 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -1,28 +1,27 @@
<template>
<div class="legend-panel">
- <div class="legend-icon unactive" @click="legendChange()">
- <i class="el-icon-more-outline"></i>
- <span>鍥句緥</span>
- </div>
<transition name="fade">
- <div class="legend-content" v-show="legendControl">
+ <div :class="'legend-content map-background'" v-show="legendControl">
<div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
- <p>{{ item.title }}</p>
+ <p><span>{{ item.title }}</span></p>
+ <div :class="index === 5 ? '':'map-under-line'"></div>
<ul>
- <div v-for="(ite,inde) in item.items" :key="inde">
- <li>
- <img :src='ite.legendImage' alt=''>
- <span>{{ ite.legendContent }}</span>
- </li>
- </div>
+ <li v-for="(ite,inde) in item.items" :key="inde">
+ <img :src='ite.legendImage' alt=''>
+ <span>{{ ite.legendContent }}</span>
+ </li>
</ul>
- <div :class="index === 5 ? '':'under-line'"></div>
</div>
</div>
</transition>
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鍥句緥" placement="left">
+ <div :class="this.legendControl?'legend-btn map-btn-active':'legend-btn map-btn-unactive'"
+ @click="legendChange()">
+ <i class="el-icon-more-outline"></i>
+ </div>
+ </el-tooltip>
</div>
</template>
-
<script>
export default {
name: 'LegendPanel',
@@ -32,75 +31,6 @@
legendControl: false,
// 鍥鹃噷瀛樺偍鏁版嵁
legendContents: [
- {
- title: '棰勮',
- items: [
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦姗欒壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦榛勮壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦钃濊壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- }
- ]
- },
{
title: '浼佷笟',
items: [
@@ -214,7 +144,7 @@
}
</script>
-<style lang="less" scoped>
+<style lang="less">
.legend-panel {
position: absolute;
z-index: 502;
@@ -225,14 +155,35 @@
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
- align-items: flex-end;
+ //align-items: flex-end;
+ transition: all .5s;
- .legend-icon {
- width: 3.4rem;
- height: 1.6rem;
- border-radius: 0.3rem;
- background: white;
+ .legend-btn {
+ width: .2rem;
+ height: .2rem;
+ //font-size: .08333rem;
+ border: .00521rem solid @background-color-light;
+ border-radius: @border-radius;
text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ background: @background-color;
+ margin-top: .04167rem;
+ cursor: pointer;
+ //color: @color;
+ margin-left: auto;
+ font-size: 0.08333rem;
}
@keyframes bounce-in {
@@ -248,72 +199,81 @@
.fade-enter-active {
transform-origin: right bottom;
- animation: bounce-in .5s;
+ animation: bounce-in .2s;
}
.fade-leave-active {
transform-origin: right bottom;
- animation: bounce-in .5s reverse;
+ animation: bounce-in .2s reverse;
}
.legend-content {
- position: absolute;
- right: 0.3rem;
- bottom: 3rem;
- width: 30rem;
- border-radius: 1rem;
- background: #3c7699;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+
+ overflow: hidden;
+ min-height: 1.28646rem;
.legend-content-box {
+ font-size: 0.07292rem;
+ padding: .10417rem;
+ border-left: .00521rem solid @background-color-split;
+
p {
text-align: center;
- color: #ffffff;
- font-size: 14px;
+ margin: 0 !important;
+ //padding: 0;
+ //color: @color-title;
+ -webkit-margin-before: 0.3rem;
margin-block-start: 0.3rem;
+ -webkit-margin-after: 0.2rem;
margin-block-end: 0.2rem;
+ margin-bottom: 0.05208rem !important;
+
+ span {
+ color: @color-title;
+ font-size: .08333rem;
+ font-weight: 600;
+ }
}
ul {
list-style: none;
- display: flex;
flex-wrap: wrap;
- padding: 0;
+ margin: 0 !important;
+ padding: 0 !important;;
padding-inline: 0;
+ font-size: .08333rem;
- div {
- width: 25%;
+ li {
+ list-style: none;
display: flex;
- justify-content: center;
- margin: 0.1rem 0;
+ -webkit-box-align: center;
+ align-items: center;
+ margin: 0.05208rem 0;
- li {
- width: 100%;
- display: flex;
- justify-content: space-around;
- margin-left: 15px;
- margin-right: 15px;
+ img {
+ width: .08333rem;
+ height: .08333rem;
+ margin-right: .01042rem;
+ }
- img {
- height: 18px;
- width: 18px;
- }
-
- span {
- width: 80px;
- font-size: 12px;
- color: white;
- }
+ span {
+ color: @color;
}
}
}
}
- .under-line {
- height: 2px;
- background: #7bc5ef;
- margin-block-start: 0;
- margin-block-end: 0;
- }
}
}
</style>
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 650c599..ea52369 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,10 +1,22 @@
<template>
- <div id="right-panel">
+ <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 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 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 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>
+ </el-tooltip>
+ </ul>
+ </div>
</div>
<!-- <div class="panel-fold-btn" >-->
<!-- <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
@@ -29,7 +41,6 @@
</template>
<script>
-// import $ from 'jquery'
import EnvProtectSearch from './topicSearch/EnvProtectSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import { TopicList } from '../../conf/Topic'
@@ -40,6 +51,7 @@
components: { EnvProtectSearch, DischargeSearch },
data () {
return {
+ isShow: true,
topicMenu: [],
topicList: TopicList,
topicCheckedList: [],
@@ -52,8 +64,7 @@
toggleMonitorStyle: 'right:0px',
title: '姹￠洦姘寸缃�',
-
- isCollapse: false
+ isCollapse: true
}
},
computed: {},
@@ -66,7 +77,6 @@
this.topicList.forEach((item) => {
this.topicCheckedList.forEach((itm) => {
if (item.name === itm) {
- // item.checked = tr
this.topicMenu.push(item)
}
})
@@ -77,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 () {
@@ -90,8 +105,8 @@
// const el = document.getElementsByClassName('.btn-stretch')
// const el2 = document.getElementsByClassName('.panel-fold-btn')
// let = 'btn-stretch-active'
- // var rightControl = $('#right-panel')
- // var rightControl = document.getElementById('#right-panel')
+ // var rightControl = $('#panel-right')
+ // var rightControl = document.getElementById('#panel-right')
// const right = rightControl.css('right')
// const rightit = rightControl.ownerDocument.defaultView
// const right = rightit.getComputedStyle(rightit, null).right
@@ -130,31 +145,66 @@
</script>
<style lang="less">
-@import '@assets/css/map/_map-variable';
-#right-panel {
- width: 322px;
- //height: 573px;
- height: 100%;
+.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 {
+ display: inline-flex;
+ //width: 322px;
+ //height: 100%;
+ //position: absolute;
+ //right: 10px;
+ //top: 10px;
+ height: 0;
position: absolute;
- right: 10px;
- top: 10px;
+ top: .4rem;
+ right: .08333rem;
+ z-index: 501;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -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);
@@ -262,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;*/
@@ -285,8 +335,8 @@
}
.tab-item {
- width: 32px;
- height: 30px;
+ //width: .2rem;
+ //height: .2rem;
color: @color;
font-size: 12px;
background-color: #0B3B6D;
@@ -295,13 +345,16 @@
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;
+ position: relative;
+ position: relative;
+ }
+
}
.right-control {
@@ -309,11 +362,11 @@
//height: 573px;
height: 100%;
position: relative;
- top: 0;
- right: 0;
- z-index: 999;
- background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
- background-size: 100% 98%;
+ //top: 0;
+ //right: 0;
+ z-index: 500;
+ //background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
+ //background-size: 100% 98%;
}
.a{
transform: translateX(328px);
@@ -352,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/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue
index 9a67eea..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/components/plugin/DialogDrag.js b/src/components/plugin/DialogDrag.js
new file mode 100644
index 0000000..2972234
--- /dev/null
+++ b/src/components/plugin/DialogDrag.js
@@ -0,0 +1,49 @@
+import Vue from 'vue'
+
+// v-dialogDrag: 寮圭獥鎷栨嫿
+Vue.directive('dialogDrag', {
+ bind (el, binding, vnode, oldVnode) {
+ const dialogHeaderEl = el.querySelector('.el-dialog__header')
+ const dragDom = el.querySelector('.el-dialog')
+ dialogHeaderEl.style.cursor = 'move'
+
+ // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
+ const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+ dialogHeaderEl.onmousedown = (e) => {
+ // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - dialogHeaderEl.offsetLeft
+ const disY = e.clientY - dialogHeaderEl.offsetTop
+
+ // 鑾峰彇鍒扮殑鍊煎甫px 姝ｅ垯鍖归厤鏇挎崲
+ let styL, styT
+
+ // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫50% 绉诲姩涔嬪悗璧嬪�间负px
+ if (sty.left.includes('%')) {
+ styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+ styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+ } else {
+ styL = +sty.left.replace(/\px/g, '')
+ styT = +sty.top.replace(/\px/g, '')
+ }
+
+ document.onmousemove = function (e) {
+ // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+ const l = e.clientX - disX
+ const t = e.clientY - disY
+
+ // 绉诲姩褰撳墠鍏冪礌
+ dragDom.style.left = `${l + styL}px`
+ dragDom.style.top = `${t + styT}px`
+
+ // 灏嗘鏃剁殑浣嶇疆浼犲嚭鍘�
+ // binding.value({x:e.pageX,y:e.pageY})
+ }
+
+ document.onmouseup = function (e) {
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ }
+ }
+})
diff --git a/src/components/table/components/IndexStatistics.vue b/src/components/table/components/IndexStatistics.vue
new file mode 100644
index 0000000..f38b288
--- /dev/null
+++ b/src/components/table/components/IndexStatistics.vue
@@ -0,0 +1,263 @@
+<template>
+ <el-tabs v-model="activeName">
+ <el-tab-pane label="鎸囨爣缁熻" name="first"><el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="搴忓彿"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="date"
+ label="鍗曚綅鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="date"
+ label="宸ヤ笟鍙栨按閲�(m3)"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="date"
+ label="澶栨帓搴熸按閲�(m3)"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="date"
+ label="宸ヤ笟搴熸皵鎺掓斁閲�(m3)"
+ width="150">
+ </el-table-column>
+ <el-table-column label="COD(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="姘ㄦ爱(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="浜屾哀鍖栫～(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="姘哀鍖栫墿(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="VOCs(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍥哄簾(t)">
+ <el-table-column
+ prop="province"
+ label="绱浜х敓閲�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="褰撴湀浜х敓閲�"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ </el-table></el-tab-pane>
+ <el-tab-pane label="浼佷笟鎺掑悕" name="second"><el-table
+ :data="tableData"
+ style="width: 100%"
+ max-height="250">
+ <el-table-column
+ fixed
+ prop="date"
+ label="浼佷笟鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="搴熸按杈炬爣鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="province"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="搴熸皵杈炬爣鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鍚嶆"
+ width="300">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="浼犺緭鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="璁惧瀹屽ソ鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="鎺掑悕"
+ width="120">
+ </el-table-column>
+ </el-table></el-tab-pane>
+ <el-tab-pane label="鎺掓斁鐐规帓鍚�" name="third"><el-table
+ :data="tableData"
+ style="width: 100%"
+ max-height="250">
+ <el-table-column
+ fixed
+ prop="date"
+ label="鎺掓斁鐐瑰悕绉�"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎺掓斁绫诲瀷"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="province"
+ label="杈炬爣鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="city"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="浼犺緭鐜�"
+ width="300">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="璁惧瀹屽ソ鐜�"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="zip"
+ label="鍚嶆"
+ width="120">
+ </el-table-column>
+ </el-table></el-tab-pane>
+ </el-tabs>
+
+</template>
+
+<script>
+export default {
+ data () {
+ return {
+ activeName: 'first',
+ tableData: [{
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-02',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-04',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-01',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-08',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-06',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-07',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }]
+ }
+ }
+}
+</script>
diff --git a/src/components/table/components/Warn.vue b/src/components/table/components/Warn.vue
new file mode 100644
index 0000000..efc2577
--- /dev/null
+++ b/src/components/table/components/Warn.vue
@@ -0,0 +1,232 @@
+<template>
+ <el-tabs v-model="activeName">
+ <el-tab-pane label="瀹炴椂缁熻" name="first">
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="浼佷笟鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column label="搴熸按(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="搴熸皵(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍥哄簾(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="纭寲姘�(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍙噧姘斾綋(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ <el-tab-pane label="褰撴湀缁熻" name="second">
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="浼佷笟鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column label="搴熸按(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="搴熸皵(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍥哄簾(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="纭寲姘�(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍙噧姘斾綋(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ <el-tab-pane label="涓婃湀缁熻" name="third">
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="浼佷笟鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column label="搴熸按(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="搴熸皵(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="鎶ヨ"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍥哄簾(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="纭寲姘�(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍙噧姘斾綋(涓�)">
+ <el-table-column
+ prop="name"
+ label="棰勮"
+ width="120">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
+</template>
+
+<script>
+export default {
+ data () {
+ return {
+ activeName: 'first',
+ tableData: [{
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-02',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-04',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-01',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-08',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-06',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }, {
+ date: '2016-05-07',
+ name: '鐜嬪皬铏�',
+ province: '涓婃捣',
+ city: '鏅檧鍖�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
+ zip: 200333
+ }]
+ }
+ }
+}
+</script>
diff --git a/src/components/table/enterprise.vue b/src/components/table/enterprise.vue
new file mode 100644
index 0000000..f024ad2
--- /dev/null
+++ b/src/components/table/enterprise.vue
@@ -0,0 +1,62 @@
+<template>
+ <div class="enterprise-panel">
+ <div class="enterprise-function" @click="showWarnDialog()">
+ <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" width="32px">
+ </div>
+ <div class="enterprise-function" @click="showStatisDialog()">
+ <img src="@/assets/images/map-pages/icon/map/company.png" alt="" width="32px">
+ </div>
+ <Dialog ref="warnDialog" title="浼佷笟棰勮鎶ヨ鍒嗙被缁熻">
+ <warn></warn>
+ </Dialog>
+ <Dialog ref="indexStatisticsDialog" title="浼佷笟鎸囨爣鍒嗙被缁熻">
+ <index-statistics></index-statistics>
+ </Dialog>
+ </div>
+</template>
+
+<script>
+import Dialog from '../../views/popup/Dialog'
+import Warn from './components/Warn'
+import IndexStatistics from './components/IndexStatistics'
+export default {
+ name: 'Enterprise',
+ components: {
+ Dialog,
+ Warn,
+ IndexStatistics
+ },
+ data () {
+ return {
+ comp: Warn
+ }
+ },
+ methods: {
+ // 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
+ show () {
+ this.legendControl = !this.legendControl
+ },
+ showWarnDialog () {
+ this.$refs.warnDialog.show()
+ },
+ showStatisDialog () {
+ this.$refs.indexStatisticsDialog.show()
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.enterprise-panel{
+ position: absolute;
+ right: 5px;
+ top:5px;
+ z-index: 9999;
+
+ .enterprise-function{
+ width: 40px;
+ float: left;
+ cursor: pointer;
+ }
+}
+</style>
diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue
index 2a45071..e4bd2ef 100644
--- a/src/components/table/summarySheets.vue
+++ b/src/components/table/summarySheets.vue
@@ -1,17 +1,18 @@
<template>
<div class="summary-sheets">
+ <div id="summary">
<el-row type="flex" class="head-area" align="middle">
<el-col>
<span>浼佷笟鎸囨爣鍒嗙被缁熻</span>
</el-col>
<el-col class="head-area-button">
- <el-button style="float: right; padding: 3px 0" icon="el-icon-close" type="info"></el-button>
+ <el-button style="float: right; padding: 3px 0" icon="el-icon-close" type="info" @click="closebtn"></el-button>
</el-col>
</el-row>
<!-- <el-tabs class="tabs-text">-->
<el-row :gutter="20" class="el-rowscol">
<el-col>
- <el-tabs class="tabs-text" v-model="activeName" type="card" @tab-click="handleClick">
+ <el-tabs class="tabs-text" v-model="activeName" type="border-card" @tab-click="handleClick">
<el-tab-pane label="搴熸按" name="first">
<waste-water></waste-water>
</el-tab-pane>
@@ -27,6 +28,7 @@
</el-tabs>
</el-col>
</el-row>
+ </div>
</div>
</template>
@@ -51,6 +53,11 @@
methods: {
handleClick (tab, event) {
console.log(tab, event)
+ },
+ closebtn () {
+ const summary = document.getElementById('summary')
+ summary.style.display = 'none'
+ console.log(1)
}
}
}
@@ -58,12 +65,11 @@
<style>
.summary-sheets {
- /*overflow: hidden;*/
position: absolute;
top: 50px;
left: 50px;
- width: 850px;
- height: 265px;
+ /*width: 850px;*/
+ /*height: 265px;*/
border: #90c8e0 1px solid;
z-index:9999999;
background-color: rgba(26, 73, 81, 0.901960784313726);
@@ -82,8 +88,7 @@
.head-area-button{
margin-right: 5px;
}
- .el-rowscol{
- width: 100%;
- height: 100%;
+ .tabs-text{
+ background-color: rgba(26, 73, 81, 0.901960784313726);
}
</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 b2139c0..8ca4020 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,8 +8,11 @@
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-panel-style.less'
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
+import '@/utils/dialogDrag.js'
Vue.config.productionTip = false
diff --git a/src/utils/dialogDrag.js b/src/utils/dialogDrag.js
new file mode 100644
index 0000000..6f845f5
--- /dev/null
+++ b/src/utils/dialogDrag.js
@@ -0,0 +1,80 @@
+/* eslint-disable */
+import Vue from 'vue'
+
+// v-dialogDrag: 寮圭獥鎷栨嫿灞炴��
+Vue.directive('dialogDrag', {
+ bind (el, binding, vnode, oldVnode) {
+ const dialogHeaderEl = el.querySelector('.el-dialog__header')
+ const dragDom = el.querySelector('.el-dialog')
+ // dialogHeaderEl.style.cursor = 'move';
+ dialogHeaderEl.style.cssText += ';cursor:move;'
+ dragDom.style.cssText += ';top:0px;'
+
+ // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
+ const sty = (function () {
+ if (window.document.currentStyle) {
+ return (dom, attr) => dom.currentStyle[attr]
+ } else {
+ return (dom, attr) => getComputedStyle(dom, false)[attr]
+ }
+ })()
+
+ dialogHeaderEl.onmousedown = (e) => {
+ // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - dialogHeaderEl.offsetLeft
+ const disY = e.clientY - dialogHeaderEl.offsetTop
+
+ const screenWidth = document.body.clientWidth // body褰撳墠瀹藉害
+ const screenHeight = document.documentElement.clientHeight // 鍙鍖哄煙楂樺害(搴斾负body楂樺害锛屽彲鏌愪簺鐜涓嬫棤娉曡幏鍙�)
+
+ const dragDomWidth = dragDom.offsetWidth // 瀵硅瘽妗嗗搴�
+ const dragDomheight = dragDom.offsetHeight // 瀵硅瘽妗嗛珮搴�
+
+ const minDragDomLeft = dragDom.offsetLeft
+ const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+ const minDragDomTop = dragDom.offsetTop
+ const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
+
+ // 鑾峰彇鍒扮殑鍊煎甫px 姝ｅ垯鍖归厤鏇挎崲
+ let styL = sty(dragDom, 'left')
+ let styT = sty(dragDom, 'top')
+
+ // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫50% 绉诲姩涔嬪悗璧嬪�间负px
+ if (styL.includes('%')) {
+ styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+ styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+ } else {
+ styL = +styL.replace(/\px/g, '')
+ styT = +styT.replace(/\px/g, '')
+ };
+
+ document.onmousemove = function (e) {
+ // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+ let left = e.clientX - disX
+ let top = e.clientY - disY
+
+ // 杈圭晫澶勭悊
+ if (-(left) > minDragDomLeft) {
+ left = -(minDragDomLeft)
+ } else if (left > maxDragDomLeft) {
+ left = maxDragDomLeft
+ }
+
+ if (-(top) > minDragDomTop) {
+ top = -(minDragDomTop)
+ } else if (top > maxDragDomTop) {
+ top = maxDragDomTop
+ }
+
+ // 绉诲姩褰撳墠鍏冪礌
+ dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+ }
+
+ document.onmouseup = function (e) {
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ }
+ }
+})
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index ce5e3cc..4d8b9d7 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -11,8 +11,11 @@
<monitor-panel></monitor-panel>
<!-- <top-enterprise-panel></top-enterprise-panel>-->
<tool-box-panel ref="toolBox"></tool-box-panel>
- <menu-special></menu-special>
+<!-- <menu-special></menu-special>-->
<legend-panel></legend-panel>
+ <summary-sheets v-show="isShowbtn"></summary-sheets>
+ <enterprise></enterprise>
+ <el-button id="mapbtn" type="primary" icon="el-icon-c-scale-to-original" circle @click="isshowhidden"></el-button>
</div>
</template>
@@ -25,26 +28,31 @@
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import MonitorPanel from '@components/panel/RightSearchPanel'
// import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
+import summarySheets from '@components/table/summarySheets.vue'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
-import MenuSpecial from '@components/panel/MenuTopic'
+// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
+import Enterprise from '../components/table/enterprise'
export default {
name: 'MapTemplate',
components: {
+ Enterprise,
LegendPanel,
- MenuSpecial,
+ // MenuSpecial,
ToolBoxPanel,
// TopEnterprisePanel,
SgisLayerController,
MonitorPanel,
LcBasemap,
LcServiceLayer,
- Popup
+ Popup,
+ summarySheets
},
data () {
return {
+ isShowbtn: false,
map: null,
lcServiceLayerVisible: false,
basemapHelper: {},
@@ -63,6 +71,9 @@
})
},
methods: {
+ isshowhidden () {
+ this.isShowbtn = !this.isShowbtn
+ },
saveMapStatus () {
window.serviceLayerHelper = this.serviceLayerHelper
this.$store.commit('setMapObj', this.map)
diff --git a/src/views/popup/Dialog.vue b/src/views/popup/Dialog.vue
new file mode 100644
index 0000000..58e7407
--- /dev/null
+++ b/src/views/popup/Dialog.vue
@@ -0,0 +1,37 @@
+<template>
+ <el-dialog v-dialogDrag
+ :title="title"
+ :visible.sync="centerDialogVisible"
+ width="30%"
+ :modal="false"
+ :close-on-click-modal="false"
+ center>
+ <slot></slot>
+ </el-dialog>
+</template>
+<script>
+
+export default {
+ name: 'Dialog',
+ props: {
+ title: {
+ type: String,
+ default: '鏍囬'
+ }
+ },
+ data () {
+ return {
+ centerDialogVisible: false
+ }
+ },
+ methods: {
+ show () {
+ this.centerDialogVisible = true
+ }
+ }
+}
+
+</script>
+<style lang="less">
+
+</style>
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