From 1bbce96c3e694c834a830b2c038f9303e35895b5 Mon Sep 17 00:00:00 2001 From: YANGDL <114714267@qq.com> Date: 星期五, 12 三月 2021 20:57:29 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/components/plugin/Editable.js | 10 src/components/plugin/MeaSure.js | 6 src/components/table/enterprise.vue | 62 + src/components/panel/BaseNavMenuItem.vue | 56 + src/assets/images/map-pages/icon/map/warn.png | 0 src/components/panel/ToolBoxPanel.vue | 336 ++++---- src/components/table/components/IndexStatistics.vue | 262 +++++++ src/views/MapTemplate.vue | 15 src/components/plugin/MakeTation.js | 72 + src/components/LayerController/LayerController.vue | 388 +++++----- src/components/helpers/ServiceLayerHelper.js | 31 src/views/popup/Dialog.vue | 37 + src/components/table/components/SolidWaste.vue | 113 +++ src/assets/images/map-pages/icon/map/company.png | 0 src/components/plugin/DialogDrag.js | 49 + src/components/table/summarySheets.vue | 94 ++ src/components/table/components/AirQuality.vue | 99 ++ src/components/table/components/WasteWater.vue | 162 ++++ src/components/table/components/WasteGas.vue | 170 ++++ src/components/panel/bounced/TextBounced.vue | 20 src/components/table/components/Warn.vue | 231 ++++++ 21 files changed, 1,799 insertions(+), 414 deletions(-) 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/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue index e6a8076..1219e4b 100644 --- a/src/components/LayerController/LayerController.vue +++ b/src/components/LayerController/LayerController.vue @@ -1,19 +1,17 @@ <template> - <div class="float-panel"> - <!-- <i class="horn horn-br"></i>--> - <!-- <i class="horn horn-bl"></i>--> - <div class="title-text-border" @click="switchPanel"> - <div class="title-icon"></div> - <div class="title-text">鍥惧眰鎺у埗</div> - </div> - <transition name="el-fade-in-linear"> - <div class="body-box" id="panelContent" :style="{ width:width }"> - <div v-show="isShow"> - <slot></slot> - </div> - </div> - </transition> + <div class="float-panel"> + <div class="title-text-border" @click="switchPanel"> + <div class="title-icon"></div> + <div class="title-text">鍥惧眰鎺у埗</div> </div> + <transition name="el-fade-in-linear"> + <div class="body-box" id="panelContent" :style="{ width:width }"> + <div v-show="isShow"> + <slot></slot> + </div> + </div> + </transition> + </div> </template> <script> @@ -93,198 +91,198 @@ <style lang="less"> - .float-panel { - position: absolute; - top: 80px; - height: auto; - font-size: 11px; - z-index: 1000; +.float-panel { + position: absolute; + top: 80px; + height: auto; + font-size: 11px; + z-index: 1000; - div { - color: #90c8e0; - } + div { + color: #90c8e0; + } - .title-border { - width: 100%; - height: 28px; - background: #10488c; - -webkit-clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px); - clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px); - position: relative; - } + .title-border { + width: 100%; + height: 28px; + background: #10488c; + -webkit-clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px); + clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px); + position: relative; + } - .title-border:before { - content: ""; - display: block; - position: absolute; - width: 6px; - height: 6px; - top: 0; - left: 0; - background-color: #38c8ef; - } + .title-border:before { + content: ""; + display: block; + position: absolute; + width: 6px; + height: 6px; + top: 0; + left: 0; + background-color: #38c8ef; + } - .title-border:after { - content: ""; - display: block; - position: absolute; - width: 6px; - height: 6px; - top: 9px; - right: 0; - background-color: #38c8ef; - -webkit-clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px); - clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px); - } + .title-border:after { + content: ""; + display: block; + position: absolute; + width: 6px; + height: 6px; + top: 9px; + right: 0; + background-color: #38c8ef; + -webkit-clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px); + clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px); + } - .title-text-border { - width: 30px; - height: 120px; - float: left; - background: #091331; - // -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px); - // clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px); - } + .title-text-border { + width: 30px; + height: 120px; + float: left; + background: #091331; + // -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px); + // clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px); + } - .title-icon { - float: left; - width: 22px; - height: 22px; - margin-top: 4px; - margin-left: 2px; - background-image: url(../../assets/images/map-pages/icon/setting.png); - } + .title-icon { + float: left; + width: 22px; + height: 22px; + margin-top: 4px; + margin-left: 2px; + background-image: url(../../assets/images/map-pages/icon/setting.png); + } - .title-text { - width: 25px; - color: #00d0f9; - font-weight: bold; - margin-top: 6px; - text-align: center; - font-size: 14px; - filter: brightness(100%); - text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5; - } + .title-text { + width: 25px; + color: #00d0f9; + font-weight: bold; + margin-top: 6px; + text-align: center; + font-size: 14px; + filter: brightness(100%); + text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5; + } - .title-line { - display: inline-block; - width: 120px; - height: 1px; - // margin-top: 14px; - margin-left: 4px; - background-color: #04527f; - line-height: 5px; - vertical-align: middle; - } + .title-line { + display: inline-block; + width: 120px; + height: 1px; + // margin-top: 14px; + margin-left: 4px; + background-color: #04527f; + line-height: 5px; + vertical-align: middle; + } - .title-point { - display: inline-block; - width: 5px; - height: 5px; - // margin-top: 12px; - background-color: #04527f; - line-height: 5px; - vertical-align: middle; - } + .title-point { + display: inline-block; + width: 5px; + height: 5px; + // margin-top: 12px; + background-color: #04527f; + line-height: 5px; + vertical-align: middle; + } - .title-button { - float: right; - width: 28px; - height: 28px; - cursor: pointer; + .title-button { + float: right; + width: 28px; + height: 28px; + cursor: pointer; - :hover { - font-weight: bold; - color: white; - } - } - - .body-box { - background-color: rgba(44, 62, 80, 0.6); - border: 1px solid #10488c; - margin-top: -1px; - margin-left: 30px; - height: auto; - } - - .switch-head-up { - width: 22px; - height: 16px; - float: right; - margin-top: 10px; - margin-right: 10px; - cursor: pointer; - background-image: url(../../assets/images/map-pages/icon/xljt1.png); - transform: rotateX(0deg); - transform-origin: 50% 50%; - transition: transform 0.5s linear 0s; - } - - .switch-head-down { - transform: rotateX(180deg); - transform-origin: 50% 50%; - transition: transform 0.5s linear 0s; - } - - select { - background: transparent; - margin: 6px; - border: .5px solid #569EB7; - width: 150px; - color: #569EB7; - padding: 0 16px; - } - - .horn { - width: 6px; - height: 6px; - float: left; - position: absolute; - } - - .horn-tl { - background-image: url(../../assets/images/map-pages/cosmetics/horn_tl.png); - left: -1px; - top: -1px; - } - - .horn-tr { - background-image: url(../../assets/images/map-pages/cosmetics/horn_tr.png); - right: -1px; - top: -1px; - } - - .horn-bl { - background-image: url(../../assets/images/map-pages/cosmetics/horn_bl.png); - left: -1px; - bottom: -1px; - } - - .horn-br { - background-image: url(../../assets/images/map-pages/cosmetics/horn_br.png); - right: -1px; - bottom: -1px; - } - - ::-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; - } + :hover { + font-weight: bold; + color: white; } + } + + .body-box { + background-color: rgba(44, 62, 80, 0.6); + border: 1px solid #10488c; + margin-top: -1px; + margin-left: 30px; + height: auto; + } + + .switch-head-up { + width: 22px; + height: 16px; + float: right; + margin-top: 10px; + margin-right: 10px; + cursor: pointer; + background-image: url(../../assets/images/map-pages/icon/xljt1.png); + transform: rotateX(0deg); + transform-origin: 50% 50%; + transition: transform 0.5s linear 0s; + } + + .switch-head-down { + transform: rotateX(180deg); + transform-origin: 50% 50%; + transition: transform 0.5s linear 0s; + } + + select { + background: transparent; + margin: 6px; + border: .5px solid #569EB7; + width: 150px; + color: #569EB7; + padding: 0 16px; + } + + .horn { + width: 6px; + height: 6px; + float: left; + position: absolute; + } + + .horn-tl { + background-image: url(../../assets/images/map-pages/cosmetics/horn_tl.png); + left: -1px; + top: -1px; + } + + .horn-tr { + background-image: url(../../assets/images/map-pages/cosmetics/horn_tr.png); + right: -1px; + top: -1px; + } + + .horn-bl { + background-image: url(../../assets/images/map-pages/cosmetics/horn_bl.png); + left: -1px; + bottom: -1px; + } + + .horn-br { + background-image: url(../../assets/images/map-pages/cosmetics/horn_br.png); + right: -1px; + bottom: -1px; + } + + ::-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; + } +} </style> diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js index 26bd028..6a2ff71 100644 --- a/src/components/helpers/ServiceLayerHelper.js +++ b/src/components/helpers/ServiceLayerHelper.js @@ -140,11 +140,10 @@ * @param res */ loadGeojson (res, opt) { - var that = this var icon = opt.icon - const featureGroup = that.L.featureGroup() + const featureGroup = this.L.featureGroup() const featureList = [] - const geojson = that.L.geoJSON(res.features, { + const geojson = this.L.geoJSON(res.features, { style: function (feature) { return { fill: styles.defaultLineStyle.fill, @@ -157,8 +156,8 @@ dashSpeed: styles.defaultLineStyle.dashSpeed } }, - pointToLayer: function (geoJsonPoint, latlng) { - return that.L.canvasMarker(latlng, + pointToLayer: (geoJsonPoint, latlng) => { + return this.L.canvasMarker(latlng, { img: { // url: 'assets/images/map/marker-icon.png', @@ -167,21 +166,19 @@ } }) }, - onEachFeature: function (feature, layer) { - console.log(feature) - console.log(layer) + onEachFeature: (feature, layer) => { featureList.push(layer) - layer.bindPopup(function (layer) { - that.popupComp.setDatas(layer) - that.popupComp.setShow() - return that.popupComp.$el + layer.bindPopup((layer) => { + this.popupComp.setDatas(layer) + this.popupComp.setShow() + return this.popupComp.$el }, { className: 's-map-popup', minWidth: 300, closeButton: false, autoClose: false }) - .bindTooltip(function (layer) { + .bindTooltip((layer) => { const nameId = layer.feature.id let name = '' if (nameId.indexOf('涓夐��') !== -1 || nameId.indexOf('鍥涢��') !== -1 || nameId.indexOf('绐ㄤ簳') !== -1) { @@ -194,7 +191,7 @@ } return name }, { direction: 'bottom', offset: [0, 15], sticky: true }) - .on('mouseover', function (e) { + .on('mouseover', (e) => { const type = e.target.feature.geometry.type if (type === 'LineString' || type === 'MultiLineString') { layer.setStyle({ weight: 8, color: '#00ffff' }) @@ -208,7 +205,7 @@ layer.bringToFront() } - }).on('mouseout', function (e) { + }).on('mouseout', (e) => { const type = e.target.feature.geometry.type if (type === 'LineString' || type === 'MultiLineString') { layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color }) @@ -225,8 +222,8 @@ } }) store.commit('addSewersDatas', geojson) - featureGroup.addTo(that.map) - that.setZIndex(featureGroup) + featureGroup.addTo(this.map) + this.setZIndex(featureGroup) return featureGroup } diff --git a/src/components/panel/BaseNavMenuItem.vue b/src/components/panel/BaseNavMenuItem.vue new file mode 100644 index 0000000..69330e9 --- /dev/null +++ b/src/components/panel/BaseNavMenuItem.vue @@ -0,0 +1,56 @@ +<template> + <div class="base-nav-menu"> + <template v-for="(item,index) in menuList"> + <template v-if="item.items && item.items.length"> + <el-submenu :index="item.index" :key="index"> + <template slot="title" v-if="item.icon"> + <img :src="item.icon" :title="item.label"/> + </template> + <template slot="title" v-else>{{item.label}}</template> + <base-nav-menu-item v-for="child in item.items" :key="child.title" :menuList='[child]'></base-nav-menu-item> + </el-submenu> + </template> + <template v-else> + <el-menu-item :index="item.index" :key="index"> + {{ item.label }} + </el-menu-item> + </template> + </template> + </div> +</template> + +<script> + +export default { + name: 'BaseNavMenuItem', + data () { + return {} + }, + props: { + menuList: Array + } +} +</script> + +<style lang="less" scoped> +.base-nav-menu { + height: 38px; + line-height: 38px; + display: flex; + align-items: center; + justify-content: space-around; + outline: none; + border: none; + + .el-submenu { + .el-submenu__title { + border-radius: 50%; + + .el-icon-arrow-down { + display: none; + } + + } + } +} +</style> diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue index 7e6489e..1b9fd88 100644 --- a/src/components/panel/ToolBoxPanel.vue +++ b/src/components/panel/ToolBoxPanel.vue @@ -1,32 +1,33 @@ <template> <div class="lefttop-toolbox-panel"> - <div class="init-choose" @click="changeSelect()"> - <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt=""> + <div> + <div class="init-choose" @click="changeSelect()"> + <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt=""/> + </div> + <el-menu class="el-menu" + mode="horizontal" + :collapse="isCollapse" + unique-opened + @open="handleOpen" + @close="handleClose" + @select="handleSelect" + v-show='selectGroup' + > + <base-nav-menu-item :menuList='menuList'></base-nav-menu-item> + </el-menu> </div> - <div class="el-select-dropdown" v-show='selectGroup'> - <el-dropdown @command="handleCommand" trigger="click" v-for="(item,i) in imgLists" :key="i" :value="total"> - <transition name="fade"> - <img :src="item.title" :title="item.alt"/> - </transition> - <el-dropdown-menu> - <el-dropdown-item v-for="(ite,index) in item.items" :key="index" :command='ite.headings'> - <span>{{ ite.headings }}</span> - </el-dropdown-item> - </el-dropdown-menu> - </el-dropdown> - </div> - <!-- // 寮规--> - <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced> + <!--鏂囧瓧鏍囨敞寮规--> + <!-- <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>--> </div> </template> <script> -import circle from '@/assets/images/map-pages/icon/toolbox/circle.png' -import fullscreen from '@/assets/images/map-pages/icon/toolbox/fullscreen.png' -import legend from '@/assets/images/map-pages/icon/toolbox/legend.png' -import location from '@/assets/images/map-pages/icon/toolbox/location.png' -import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png' -import square from '@/assets/images/map-pages/icon/toolbox/square.png' +// import legend from '@/assets/images/map-pages/icon/toolbox/legend.png' +// import square from '@/assets/images/map-pages/icon/toolbox/square.png' +import circle from '@assets/images/map-pages/icon/toolbox/circle.png' +import location from '@assets/images/map-pages/icon/toolbox/location.png' +import polygon from '@assets/images/map-pages/icon/toolbox/polygon.png' +import fullscreen from '@assets/images/map-pages/icon/toolbox/fullscreen.png' // 娴嬮噺鐨勬柟娉� import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css' @@ -36,78 +37,128 @@ import MakeTation from '@components/plugin/MakeTation' // 灏佽鐨勯�夋嫨寮规 -import TextBounced from '@components/panel/bounced/TextBounced' +import BaseNavMenuItem from '@components/panel/BaseNavMenuItem' export default { name: 'ToolBoxPanel', - components: { TextBounced }, + components: { BaseNavMenuItem }, data () { return { - isPanelVisible: false, - total: 0, - activeTools: {}, - imgLists: [ + menuList: [ { - title: circle, - alt: '鏍囩粯', + icon: circle, + label: '鏍囩粯', + index: '1', items: [ - { headings: '绾挎爣缁�' }, - { headings: '闈㈡爣缁�' }, - { headings: '绠ご鏍囩粯' } + { + index: '1-1', + label: '鐐规爣缁�' + }, + { + index: '1-2', + label: '绾挎爣缁�' + }, + { + index: '1-3', + label: '闈㈡爣缁�', + items: [ + { + index: '1-3-1', + label: '鍦嗗舰' + }, + { + index: '1-3-2', + label: '澶氳竟褰�' + }, + { + index: '1-3-3', + label: '鐭╁舰' + } + ] + } ] }, { - title: square, - alt: '鏍囨敞', + icon: location, + label: '鍒囨崲搴曞浘', + index: '2', items: [ - { headings: '鐐规爣娉�' }, - { headings: '绾挎爣娉�' }, - { headings: '闈㈡爣娉�' }, - { headings: '鏂囧瓧鏍囨敞' }, - { headings: '鍥炬爣鏍囨敞' } + { + label: '褰卞儚鍥�', + index: '2-1', + items: [ + { + index: '2-1-1', + label: '褰卞儚妯欐敞' + } + ] + }, + { + label: '鐭㈤噺鍥�', + index: '2-2', + items: [ + { + index: '2-2-1', + label: '鐭㈤噺妯欐敞' + } + ] + }, + { + label: '鍦板舰鍥�', + index: '2-3', + items: [ + { + index: '2-3-1', + label: '鍦板舰妯欐敞' + } + ] + } ] }, { - title: legend, - alt: '娴嬮噺', + icon: polygon, + label: '绠$綉', + index: '3', items: [ - { headings: '璺濈娴嬮噺' }, - { headings: '闈㈢Н娴嬮噺' } + { + index: '3-1', + label: '杩為�氭�у垎鏋�' + }, + { + index: '3-2', + label: '鐖嗙鍒嗘瀽' + }, + { + index: '3-3', + label: '娴佸悜鍒嗘瀽' + }, + { + index: '3-4', + label: '妯柇闈㈠垎鏋�' + } ] }, { - title: location, - alt: '鍒囨崲搴曞浘', + icon: fullscreen, + label: '涓嬭浇', + index: '4', items: [ - { headings: '褰卞儚鍥�' }, - { headings: '鐭㈤噺鍥�' }, - { headings: '鍦板舰鍥�' } - ] - }, - { - title: polygon, - alt: '绠$綉', - items: [ - { headings: '杩為�氭�у垎鏋�' }, - { headings: '鐖嗙鍒嗘瀽' }, - { headings: '娴佸悜鍒嗘瀽' }, - { headings: '妯柇闈㈠垎鏋�' } - ] - }, - { - title: fullscreen, - alt: '涓嬭浇', - items: [ - { headings: '鍏ㄥ睆' }, - { headings: 'A4妯悜' }, - { headings: 'A4绾靛悜' } + { + index: '4-1', + label: '鍏ㄥ睆' + }, + { + index: '4-2', + label: 'A4妯悜' + }, + { + index: '4-3', + label: 'A4绾靛悜' + } ] } ], - form: { - regionType: '', - enterprise: '' - }, + isCollapse: false, selectGroup: false, drawLayer: null, map: null, @@ -117,19 +168,20 @@ } }, methods: { + handleOpen () { + }, + handleClose () { + }, + handleSelect (index, indexPath) { + + }, gitBounced (params) { this.bouncedText = params }, changeSelect () { this.selectGroup = !this.selectGroup }, - handleClose (done) { - console.log(done) - }, - handleClick (tab, event) { - console.log(tab, event) - }, - handleCommand (command) { + handleSelects (command) { console.log(command) switch (command) { case '鍏ㄥ睆': @@ -163,17 +215,17 @@ case '绾挎爣缁�': this.drawLayer = this.map.editTools.startPolyline() this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) + Measure.startMeasureLen(this.map, this.L) break case '闈㈡爣缁�': this.drawLayer = this.map.editTools.startPolygon() this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) break - case '绠ご鏍囩粯': - this.drawLayer = this.map.editTools.startPolylineArrow() - this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) + case '澶氳竟褰�': + alert('澶氳竟褰�') break - case '鐐规爣娉�': - MakeTation.StartCircleAnnotation(this.map, this.L) + case '鐐规爣缁�': + MakeTation.StartPointAnnotation(this.map, this.L) break case '鍥炬爣鏍囨敞': this.drawLayer = this.map.editTools.startIcon() @@ -190,93 +242,71 @@ Measure.startMeasureArea(this.map, this.L) break } - }, - loadData () { - } - }, - mounted () { - this.loadData() - }, - created () { - } } </script> <style lang="less"> + .lefttop-toolbox-panel { position: absolute; - left: 5px; - top: 5px; + left: 15px; + top: 15px; z-index: 999; - display: flex; - .init-choose { - //margin: 15px 5px; - background: #305B62; - //margin-top: 15px; - width: 35px; - height: 38px; - border-radius: 50%; - border: 2px skyblue solid; + div { + width: 100%; + height: 55px; + line-height: 55px; display: flex; align-items: center; - justify-content: center; - z-index: 999; - } + justify-content: space-around; - .el-select-dropdown { - position: absolute; - z-index: 1; - width: 250px; - height: 35px; - display: flex; - align-items: center; - justify-content: space-evenly; - background: #305B62; - border-radius: 15px; - padding-inline: 10px; - padding-inline-start: 30px; - - .el-dropdow { - width: 20%; + .init-choose { + background: #305B62; + width: 35px; + height: 35px; + border-radius: 50%; + border: 2px skyblue solid; + display: flex; + align-items: center; + justify-content: center; + z-index: 999; } - @keyframes bounce-in { - 0% { - transform: scale(0); - opacity: 0.3; - } - 100% { - transform: scale(1); - opacity: 1; - } - } - - .fade-enter-active { - transform-origin: left center; - animation: bounce-in .2s; - } - - .fade-leave-active { - transform-origin: left; - animation: bounce-in .2s reverse; + .el-menu { + width: 80%; + background: none; + z-index: 1; + border: none; + background: #305B62; + border-radius: 50px; } } - .el-select-dropdown:last-child { - margin-left: 10px; - } - - .el-dropdown-link { - cursor: pointer; - color: #409EFF; - } - - .el-icon-arrow-down { - font-size: 12px; - } + //.transition { + // @keyframes bounce-in { + // 0% { + // transform: scale(0); + // opacity: 0.3; + // } + // 100% { + // transform: scale(1); + // opacity: 1; + // } + // } + // + // .fade-enter-active { + // transform-origin: left center; + // animation: bounce-in .2s; + // } + // + // .fade-leave-active { + // transform-origin: left; + // animation: bounce-in .2s reverse; + // } + //} } </style> diff --git a/src/components/panel/bounced/TextBounced.vue b/src/components/panel/bounced/TextBounced.vue index d5dde64..6ccfe85 100644 --- a/src/components/panel/bounced/TextBounced.vue +++ b/src/components/panel/bounced/TextBounced.vue @@ -16,7 +16,7 @@ <li class="bounced-box-choose"> <span>棰滆壊锛�</span> <select v-model='bouncedSelect' @click="changeLabelTextSelect()"> - <option v-for="(item,index) in selectOptions" :key="index" :value="item">{{ item }}</option> + <option v-for="(item,index) in selectOptions" :key="index" :value="item.value">{{ item.text }}</option> </select> </li> </ul> @@ -32,8 +32,21 @@ data () { return { bouncedText: '', - bouncedSelect: '绾㈣壊', - selectOptions: ['绾㈣壊', '钃濊壊', '榛勮壊'] + bouncedSelect: 'red', + selectOptions: [ + { + value: 'red', + text: '绾㈣壊' + }, + { + value: 'blue', + text: '钃濊壊' + }, + { + value: 'yellow', + text: '榛勮壊' + } + ] } }, methods: { @@ -43,6 +56,7 @@ changeLabelTextSelect () { // this.bouncedSelect = item console.log('鑾峰彇棰滆壊') + MakeTation.setContentColor(this.bouncedSelect) }, ChangeText () { MakeTation.setContentText(this.bouncedText) 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 姝e垯鍖归厤鏇挎崲 + 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/plugin/Editable.js b/src/components/plugin/Editable.js index bd287f5..d39de14 100644 --- a/src/components/plugin/Editable.js +++ b/src/components/plugin/Editable.js @@ -306,16 +306,6 @@ line.enableEdit(this.map).newShape(latlng) return line }, - // 绠ご鏍囩粯 - startPolylineArrow: function (latlng, options) { - const lineArrow = this.createPolyline([], { - color: 'black', - weight: 3, - opacity: 1.0 - }) - lineArrow.enableEdit(this.map).newShape(latlng) - return lineArrow - }, // 馃崅method startPolygon(latlng: L.LatLng, options: hash): L.Polygon // Start drawing a Polygon. If `latlng` is given, a first point will be added. In any case, continuing on user click. diff --git a/src/components/plugin/MakeTation.js b/src/components/plugin/MakeTation.js index 9aedc5e..189619f 100644 --- a/src/components/plugin/MakeTation.js +++ b/src/components/plugin/MakeTation.js @@ -20,14 +20,20 @@ TextAnnotation.layers = L.layerGroup() map.on('click', TextAnnotation.click).on('dblclick', TextAnnotation.dblclick) }, - setContent :function (changeContent) { - console.log(changeContent) + // 璁剧疆鏀瑰彉鏂囧瓧鍐呭 + setContent: function (changeContent) { + // console.log(changeContent) TextAnnotation.changeContent = changeContent }, + // 璁剧疆鏀瑰彉鏂囧瓧棰滆壊 + setColor: function (changeColor) { + // console.log(changeColor) + TextAnnotation.changeColor = changeColor + }, click: function (e) { - console.log(TextAnnotation.changeContent) + // console.log(TextAnnotation.changeContent) let labIcon = L.divIcon({ - html: '<div style="color: red;font-size: 18px;">' + TextAnnotation.changeContent + '</div>', + html: '<div style="color:' + TextAnnotation.changeColor + ';font-size: 18px;">' + TextAnnotation.changeContent + '</div>', iconSize: [100, 40], iconAnchor: [0, 0], className: '' @@ -52,7 +58,7 @@ } // 娣诲姞 鐐� 鐨勬爣娉� -var CircleAnnotation = { +let pointAnnotation = { points: [], color: 'yellow', L: null, @@ -61,54 +67,60 @@ polyline: null, marker: null, init: function (map, L) { - // console.log(L) - CircleAnnotation.L = L - CircleAnnotation.map = map - CircleAnnotation.points = [] - CircleAnnotation.polyline = null - CircleAnnotation.marker = null - CircleAnnotation.layers = L.layerGroup() - map.on('click', CircleAnnotation.click).on('dblclick', CircleAnnotation.dblclick) + pointAnnotation.L = L + pointAnnotation.map = map + pointAnnotation.points = [] + pointAnnotation.polyline = null + pointAnnotation.marker = null + pointAnnotation.layers = L.layerGroup() + map.on('click', pointAnnotation.click).on('dblclick', pointAnnotation.dblclick) }, click: function (e) { - // var myIcon = L.divIcon({className: 'my-div-icon'}); let marker = L.marker(e.latlng) - marker.addTo(CircleAnnotation.map) + marker.addTo(pointAnnotation.map) + // pointAnnotation.map.panBy(L.point(e.latlng)) }, dblclick: function (e) { - CircleAnnotation.map.off('click', CircleAnnotation.click).off('dblclick', CircleAnnotation.dblclick) + pointAnnotation.map.off('click', pointAnnotation.click).off('dblclick', pointAnnotation.dblclick) }, destory: function () { - if (CircleAnnotation.polyline) { - CircleAnnotation.map.removeLayer(CircleAnnotation.polyline) + if (pointAnnotation.polyline) { + pointAnnotation.map.removeLayer(pointAnnotation.polyline) } - if (CircleAnnotation.marker) { - CircleAnnotation.marker.remove() + if (pointAnnotation.marker) { + pointAnnotation.marker.remove() } - if (CircleAnnotation.layers) { - CircleAnnotation.layers.clearLayers() + if (pointAnnotation.layers) { + pointAnnotation.layers.clearLayers() } } } +// 娣诲姞鏂囧瓧鏍囨敞 const startMakeText = function (map, L) { TextAnnotation.init(map, L) } - -const StartCircleAnnotation = function (map, L) { - CircleAnnotation.init(map, L) -} - +// 鏂囧瓧鏍囨敞鐨� 鍐呭绀捐缃� const setContentText = function (text) { TextAnnotation.setContent(text) +} +// 鏂囧瓧鏍囨敞鍐呭鐨� 棰滆壊 璁剧疆 +const setContentColor = function (color) { + TextAnnotation.setColor(color) +} + +// 鐐� 鏍囨敞 +const StartPointAnnotation = function (map, L) { + pointAnnotation.init(map, L) } const clearText = function () { startMakeText.destory() } export default { - startMakeText, clearText, - StartCircleAnnotation, - setContentText + startMakeText, + setContentText, + setContentColor, + StartPointAnnotation } diff --git a/src/components/plugin/MeaSure.js b/src/components/plugin/MeaSure.js index b6730f1..2c05000 100644 --- a/src/components/plugin/MeaSure.js +++ b/src/components/plugin/MeaSure.js @@ -77,14 +77,14 @@ var distanceMeasure = { points: [], // markers:[], - color: 'red', + color: 'blue', L: null, map: null, layers: null, polyline: null, marker: null, init: function (map, L) { - console.log(L) + // console.log(L) distanceMeasure.L = L distanceMeasure.map = map distanceMeasure.points = [] @@ -127,8 +127,6 @@ console.log('鍙屽嚮缁撴潫', e) distanceMeasure.polyline.addTo(distanceMeasure.layers) distanceMeasure.close(e.latlng) -//distanceMeasure.polygon.enableEdit(); -//map.on('editable:vertex:drag editable:vertex:deleted', distanceMeasure.polygon.updateMeasurements, distanceMeasure.polygon); distanceMeasure.map.off('click', distanceMeasure.click).off('mousemove', distanceMeasure.mousemove).off('dblclick', distanceMeasure.dblclick) }, destory: function () { diff --git a/src/components/table/components/AirQuality.vue b/src/components/table/components/AirQuality.vue new file mode 100644 index 0000000..b0dc855 --- /dev/null +++ b/src/components/table/components/AirQuality.vue @@ -0,0 +1,99 @@ +<template> + <div class="AirQuality"> + <el-table + class="tableBox" + :data="tableData" + :header-cell-style="tableHeaderColor" + :cell-style="rowClass" + border + > + <el-table-column + width="30px" + label="" + > + <template> + <i class="el-icon-caret-right"></i> + <span style="margin-left: 10px"></span> + </template> + </el-table-column> + <el-table-column + label="搴忓彿" + width="60px" + type="index"> + </el-table-column> + <el-table-column + prop="UserName" + label="浼佷笟鍚嶇О" + width="120px"> + </el-table-column> + <el-table-column + prop="AQI" + label="AQI" + width="200px"> + </el-table-column> + <el-table-column + prop="MajorPollutant" + label="棣栬姹℃煋鐗� " + width="200px"> + </el-table-column> + <el-table-column + prop="AirQualityCategory" + label="绌烘皵璐ㄩ噺绫诲埆" + width="200px"> + </el-table-column> + <el-table-column + prop="RegionalColor" + label="鍖哄煙棰滆壊" + width="200px"> + </el-table-column> + </el-table> + </div> +</template> + +<script> +export default { + name: 'AirQuality', + data () { + return { + tableData: [{ + UserName: '闆嗗洟鍚嶇О', + AQI: '', + MajorPollutant: '', + AirQualityCategory: '閲嶅害姹℃煋 浜斾釜', + RegionalColor: '' + }, { + UserName: '鍖椾含鐭虫补', + AQI: '152', + MajorPollutant: '', + AirQualityCategory: '涓害姹℃煋', + RegionalColor: '鍥涚骇绾㈣壊' + }, { + UserName: '澶╂触鐭冲寲', + AQI: '105', + MajorPollutant: '', + AirQualityCategory: '杞诲害姹℃煋', + RegionalColor: '涓夌骇姗欒壊' + }, { + UserName: '璐靛窞鐭虫补', + AQI: '35', + MajorPollutant: '', + AirQualityCategory: '浼�', + RegionalColor: '涓�绾х豢鑹�' + }] + } + }, + methods: { + tableHeaderColor ({ row, column, owIndex, columnIndex }) { + return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px' + }, + // 琛ㄥご鏍峰紡璁剧疆 + rowClass () { + return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px' + } + } +} +</script> + +<style scoped> + +</style> diff --git a/src/components/table/components/IndexStatistics.vue b/src/components/table/components/IndexStatistics.vue new file mode 100644 index 0000000..b8e8127 --- /dev/null +++ b/src/components/table/components/IndexStatistics.vue @@ -0,0 +1,262 @@ +<template> + <el-tabs> + <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 { + 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/SolidWaste.vue b/src/components/table/components/SolidWaste.vue new file mode 100644 index 0000000..14a9020 --- /dev/null +++ b/src/components/table/components/SolidWaste.vue @@ -0,0 +1,113 @@ +<template> + <div class="Solid-Waste"> + <el-table + class="tableBox" + :data="tableData" + :header-cell-style="tableHeaderColor" + :cell-style="rowClass" + > + <el-table-column + width="30px" + label="" + > + <template> + <i class="el-icon-caret-right"></i> + <span style="margin-left: 10px"></span> + </template> + </el-table-column> + <el-table-column + label="搴忓彿" + width="60px" + type="index"> + </el-table-column> + <el-table-column + prop="UserName" + label="浼佷笟鍚嶇О" + width="120px"> + </el-table-column> + <el-table-column + prop="WasteWaters" + label="宸ヤ笟澶栨帓搴熸按閲忥紙m鲁锛�" + width="200px"> + </el-table-column> + <el-table-column label="浜х敓閲� 锛堝惃锛�"> + <el-table-column + prop="AddOutPut" + label="涓�鑸浐搴�" + width="100px"> + </el-table-column> + <el-table-column + prop="MonthOutPut" + label="鍗遍櫓搴熺墿" + width="100px"> + </el-table-column> + </el-table-column> + <el-table-column label="璐瓨鐘舵�侊紙涓級"> + <el-table-column + prop="normal" + label="姝e父" + width="100px"> + </el-table-column> + <el-table-column + prop="warning" + label="棰勮" + width="100px"> + </el-table-column> + </el-table-column> + </el-table> + </div> +</template> + +<script> +export default { + name: 'SolidWaste', + data () { + return { + tableData: [{ + UserName: '闆嗗洟鍚嶇О', + WasteWaters: '', + AddOutPut: '', + MonthOutPut: '', + normal: '', + warning: '' + }, { + UserName: '澶╂触鐭冲寲', + WasteWaters: '116.6', + AddOutPut: '58.3', + MonthOutPut: '13.1', + warning: '13.1', + normal: '21' + }, { + UserName: 'xxxx鐐煎寲3', + WasteWaters: '116.6', + MonthOutPut: '13.1', + warning: '13.1', + normal: '21' + }, { + UserName: 'xxxx4', + WasteWaters: '116.6', + AddOutPut: '58.3', + MonthOutPut: '13.1', + warning: '13.1', + normal: '21' + }] + } + }, + methods: { + tableHeaderColor ({ row, column, owIndex, columnIndex }) { + return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px' + }, + // 琛ㄥご鏍峰紡璁剧疆 + rowClass () { + return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px' + } + } +} +</script> + +<style scoped> +.Solid-Waste{ + width: 100%; + height: 100%; +} +</style> diff --git a/src/components/table/components/Warn.vue b/src/components/table/components/Warn.vue new file mode 100644 index 0000000..31c3e3d --- /dev/null +++ b/src/components/table/components/Warn.vue @@ -0,0 +1,231 @@ +<template> + <el-tabs> + <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 { + 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/WasteGas.vue b/src/components/table/components/WasteGas.vue new file mode 100644 index 0000000..1068b8b --- /dev/null +++ b/src/components/table/components/WasteGas.vue @@ -0,0 +1,170 @@ +<template> + <div class="Waste-water"> + <el-table + class="tableBox" + :data="tableData" + :header-cell-style="tableHeaderColor" + :cell-style="rowClass" + > + <el-table-column + width="30px" + label="" + > + <template> + <i class="el-icon-caret-right"></i> + <span style="margin-left: 10px"></span> + </template> + </el-table-column> + <el-table-column + label="搴忓彿" + width="45px" + type="index"> + </el-table-column> + <el-table-column + prop="UserName" + label="浼佷笟鍚嶇О" + width="120px"> + </el-table-column> + <el-table-column + prop="WasteWaters" + label="宸ヤ笟澶栨帓搴熸按閲忥紙m鲁锛�" + width="100px"> + </el-table-column> + <el-table-column label="浜屾哀鍖栫~ (t)"> + <el-table-column + prop="AddOutPut" + label="绱浜х敓閲�" + width="70px"> + </el-table-column> + <el-table-column + prop="MonthOutPut" + label="褰撴湀鐢熶骇閲�" + width="70px"> + </el-table-column> + </el-table-column> + <el-table-column label="姘ㄦ哀鍖栫墿 (t)"> + <el-table-column + prop="NH4NPut" + label="绱浜х敓閲�" + width="70px"> + </el-table-column> + <el-table-column + prop="NH4NMonth" + label="褰撴湀鐢熶骇閲�" + width="70px"> + </el-table-column> + </el-table-column> + <el-table-column label="VOCs (t)"> + <el-table-column + prop="NH4NPut" + label="绱浜х敓閲�" + width="70px"> + </el-table-column> + <el-table-column + prop="NH4NMonth" + label="褰撴湀鐢熶骇閲�" + width="70px"> + </el-table-column> + </el-table-column> + <el-table-column label="鎺掓斁鍙f娴嬬姸鎬�"> + <el-table-column + prop="normal" + label="姝e父" + width="60px"> + </el-table-column> + <el-table-column + prop="overProof" + label="瓒呮爣" + width="60px"> + </el-table-column> + <el-table-column + prop="Abnormal" + label="寮傚父" + width="60px"> + </el-table-column> + <el-table-column + prop="StopProduction" + label="鍋滀骇" + width="60px"> + </el-table-column> + <el-table-column + prop="deficiency" + label="缂哄け" + width="60px"> + </el-table-column> + </el-table-column> + </el-table> + </div> +</template> + +<script> +export default { + name: 'WasteGas', + data () { + return { + tableData: [{ + UserName: '闆嗗洟鍚嶇О', + WasteWaters: '', + AddOutPut: '', + MonthOutPut: '', + NH4NPut: '', + NH4NMonth: '', + normal: '', + overProof: '', + Abnormal: '', + StopProduction: '', + deficiency: '' + }, { + UserName: '澶╂触鐭冲寲', + WasteWaters: '116.6', + AddOutPut: '58.3', + MonthOutPut: '13.1', + NH4NPut: '58.3', + NH4NMonth: '13.1', + normal: '21', + overProof: '2', + Abnormal: '2', + StopProduction: '2', + deficiency: '2' + }, { + UserName: 'xxxx鐐煎寲3', + WasteWaters: '116.6', + MonthOutPut: '13.1', + NH4NPut: '58.3', + NH4NMonth: '13.1', + normal: '21', + overProof: '2', + Abnormal: '2', + StopProduction: '2', + deficiency: '2' + }, { + UserName: 'xxxx4', + WasteWaters: '116.6', + AddOutPut: '58.3', + MonthOutPut: '13.1', + NH4NPut: '58.3', + NH4NMonth: '13.1', + normal: '21', + overProof: '2', + Abnormal: '2', + StopProduction: '2', + deficiency: '2' + + }] + } + }, + methods: { + tableHeaderColor ({ row, column, owIndex, columnIndex }) { + return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px' + }, + // 琛ㄥご鏍峰紡璁剧疆 + rowClass () { + return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px' + } + } +} +</script> + +<style scoped> + +</style> diff --git a/src/components/table/components/WasteWater.vue b/src/components/table/components/WasteWater.vue new file mode 100644 index 0000000..a196886 --- /dev/null +++ b/src/components/table/components/WasteWater.vue @@ -0,0 +1,162 @@ +<template> + <div class="waste-water"> +<!-- <el-row>--> +<!-- <el-col>--> + <el-table + class="tableBox" + :data="tableData" + :header-cell-style="tableHeaderColor" + :cell-style="rowClass" + > + <el-table-column + width="30px" + label="" + > + <template> + <i class="el-icon-caret-right"></i> + <span style="margin-left: 10px"></span> + </template> + </el-table-column> + <el-table-column + label="搴忓彿" + width="45px" + type="index"> + </el-table-column> + <el-table-column + prop="UserName" + label="浼佷笟鍚嶇О" + width="120px"> + </el-table-column> + <el-table-column + prop="WasteWaters" + label="澶栨帓搴熸按閲忥紙m鲁锛�" + width="100px"> + </el-table-column> + <el-table-column label="COD (t)"> + <el-table-column + prop="AddOutPut" + label="绱浜х敓閲�" + width="70px"> + </el-table-column> + <el-table-column + prop="MonthOutPut" + label="褰撴湀鐢熶骇閲�" + width="70px"> + </el-table-column> + </el-table-column> + <el-table-column label="姘ㄦ爱 (t)"> + <el-table-column + prop="NH4NPut" + label="绱浜х敓閲�" + width="70px"> + </el-table-column> + <el-table-column + prop="NH4NMonth" + label="褰撴湀鐢熶骇閲�" + width="70px"> + </el-table-column> + </el-table-column> + <el-table-column label="鎺掓斁鍙f娴嬬粺璁$姸鎬�"> + <el-table-column + prop="normal" + label="姝e父" + width="60px"> + </el-table-column> + <el-table-column + prop="overProof" + label="瓒呮爣" + width="60px"> + </el-table-column> + <el-table-column + prop="Abnormal" + label="寮傚父" + width="60px"> + </el-table-column> + <el-table-column + prop="StopProduction" + label="鍋滀骇" + width="60px"> + </el-table-column> + <el-table-column + prop="deficiency" + label="缂哄け" + width="60px"> + </el-table-column> + </el-table-column> + </el-table> +<!-- </el-col>--> +<!-- </el-row>--> + </div> +</template> + +<script> +export default { + name: 'WasteWater', + data () { + return { + tableData: [{ + UserName: '闆嗗洟鍚嶇О', + WasteWaters: '', + AddOutPut: '', + MonthOutPut: '', + NH4NPut: '', + NH4NMonth: '', + normal: '', + overProof: '', + Abnormal: '', + StopProduction: '', + deficiency: '' + }, { + UserName: '澶╂触鐭冲寲', + WasteWaters: '116.6', + AddOutPut: '58.3', + MonthOutPut: '13.1', + NH4NPut: '58.3', + NH4NMonth: '13.1', + normal: '21', + overProof: '2', + Abnormal: '2', + StopProduction: '2', + deficiency: '2' + }, { + UserName: 'xxxx鐐煎寲3', + WasteWaters: '116.6', + MonthOutPut: '13.1', + NH4NPut: '58.3', + NH4NMonth: '13.1', + normal: '21', + overProof: '2', + Abnormal: '2', + StopProduction: '2', + deficiency: '2' + }, { + UserName: 'xxxx4', + WasteWaters: '116.6', + AddOutPut: '58.3', + MonthOutPut: '13.1', + NH4NPut: '58.3', + NH4NMonth: '13.1', + normal: '21', + overProof: '2', + Abnormal: '2', + StopProduction: '2', + deficiency: '2' + + }] + } + }, + methods: { + tableHeaderColor ({ row, column, owIndex, columnIndex }) { + return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px' + }, + // 琛ㄥご鏍峰紡璁剧疆 + rowClass () { + return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px' + } + } +} +</script> + +<style scoped> + +</style> 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 new file mode 100644 index 0000000..e4bd2ef --- /dev/null +++ b/src/components/table/summarySheets.vue @@ -0,0 +1,94 @@ +<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" @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="border-card" @tab-click="handleClick"> + <el-tab-pane label="搴熸按" name="first"> + <waste-water></waste-water> + </el-tab-pane> + <el-tab-pane label="搴熸皵" name="second"> + <waste-gas></waste-gas> + </el-tab-pane> + <el-tab-pane label="鍥哄簾" name="third"> + <solid-waste></solid-waste> + </el-tab-pane> + <el-tab-pane label="绌烘皵璐ㄩ噺" name="fourth"> + <AirQuality></AirQuality> + </el-tab-pane> + </el-tabs> + </el-col> + </el-row> + </div> + </div> +</template> + +<script> +import WasteWater from '@/components/table/components/WasteWater.vue' +import WasteGas from './components/WasteGas' +import SolidWaste from './components/SolidWaste' +import AirQuality from './components/AirQuality' +export default { + name: 'summary sheet.vue', + components: { + WasteWater, + WasteGas, + SolidWaste, + AirQuality + }, + data () { + return { + activeName: 'first' + } + }, + methods: { + handleClick (tab, event) { + console.log(tab, event) + }, + closebtn () { + const summary = document.getElementById('summary') + summary.style.display = 'none' + console.log(1) + } + } +} +</script> + +<style> + .summary-sheets { + position: absolute; + top: 50px; + left: 50px; + /*width: 850px;*/ + /*height: 265px;*/ + border: #90c8e0 1px solid; + z-index:9999999; + background-color: rgba(26, 73, 81, 0.901960784313726); + /*color: #fff;*/ + } + .head-area{ + color: #fff; + width: 100%; + height: 40px; + background-color: #002433; + font-size: 16px; + border-bottom: #90c8e0 2px solid; + padding-left: 16px; + /*line-height: 40px;*/ + } + .head-area-button{ + margin-right: 5px; + } + .tabs-text{ + background-color: rgba(26, 73, 81, 0.901960784313726); + } +</style> diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index 363515c..4d8b9d7 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -13,6 +13,9 @@ <tool-box-panel ref="toolBox"></tool-box-panel> <!-- <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,14 +28,17 @@ 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 LegendPanel from '@components/panel/LegendPanel' +import Enterprise from '../components/table/enterprise' export default { name: 'MapTemplate', components: { + Enterprise, LegendPanel, // MenuSpecial, ToolBoxPanel, @@ -41,10 +47,12 @@ 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) @@ -81,7 +92,7 @@ this.basemapHelper.initBasemap(this.config, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘 this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 鍒濆鍖栦笟鍔″簳鍥惧姪鎵� - console.log(this.$refs.popup.$el) + console.log('-------' + this.$refs.popup.$el) this.serviceLayerHelper.initServiceLayers(this.config, this.$refs.popup) this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵� diff --git a/src/views/popup/Dialog.vue b/src/views/popup/Dialog.vue new file mode 100644 index 0000000..af997fd --- /dev/null +++ b/src/views/popup/Dialog.vue @@ -0,0 +1,37 @@ +<template> + <el-dialog + :title="title" + :visible.sync="centerDialogVisible" + width="30%" + :modal="false" + center> + <slot></slot> + </el-dialog> +</template> +<script> +// import '@/assets/css/map/map-popup.scss' + +export default { + name: 'Dialog', + props: { + title: { + type: String, + default: '鏍囬' + } + }, + data () { + return { + centerDialogVisible: false + } + }, + methods: { + show () { + this.centerDialogVisible = true + } + } +} + +</script> +<style lang="less"> + +</style> -- Gitblit v1.8.0