From 3f519e47a8248ca240aba8e4459f047bb65bf5af Mon Sep 17 00:00:00 2001
From: wangrui <zephyrs0894@163.com>
Date: 星期三, 16 十二月 2020 16:09:17 +0800
Subject: [PATCH] 默认的两个组件都加载成功！
---
src/components/panel/MonitorPanel.vue | 799 +++++++++++++++++++++++++++++++++++++++++++++++
src/main.js | 1
src/store/index.js | 2
src/views/MapTemplate.vue | 4
src/components/LayerController/LayerController.vue | 30 +
src/components/panel/MonitorHZ.vue | 154 +++++++++
src/App.vue | 2
7 files changed, 983 insertions(+), 9 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 3c017ad..010714e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,5 +30,7 @@
color: #2c3e50;
padding: 0px;
margin: 0px;
+
+ text-align: left;
}
</style>
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index 1255f2a..3234beb 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -14,9 +14,9 @@
</div>
</div>
</div>
- <div class="body" id="panelContent">
+ <div class="bodyBox" id="panelContent">
<div id="panelInnerContent" style="height: auto; overflow: hidden;">
-
+ fdsafdsaf
</div>
</div>
@@ -29,6 +29,8 @@
import '@assets/css/map/magic.min.css'
import presets from './layerControllerPresets'
import $ from 'jquery'
+
+import iconSetting from '@/assets/images/map-pages/icon/setting.png'
export default {
name: 'LayerController',
@@ -49,6 +51,9 @@
},
data() {
return {
+ icons:{
+ setting:iconSetting
+ },
panelSwitch: {
main: true // 涓荤獥鍙�
}
@@ -147,7 +152,7 @@
height: 22px;
margin-top: 4px;
margin-left: 2px;
- background: url(/assets/images/map-page/icon/setting.png);
+ background-image: url(/assets/images/map-pages/icon/setting.png);
}
.titleText{
float: left;
@@ -157,6 +162,7 @@
line-height: 20px;
font-weight: bold;
margin-top: 6px;
+ text-align: left;
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;
}
@@ -189,6 +195,14 @@
color: white;
}
}
+
+ .bodyBox{
+ background-color: rgba(0x04, 0x52, 0x7f, 0.6);
+ border: 1px solid #10488c;
+ margin-top: -1px;
+ height: auto;
+ }
+
.switchHeadUp{
width: 22px;
height: 16px;
@@ -196,7 +210,7 @@
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
- background: url(/assets/images/map-page/icon/xljt1.png);
+ background-image: url(/assets/images/map-pages/icon/xljt1.png);
transform: rotateX(0deg);
transform-origin: 50% 50%;
transition: transform 0.5s linear 0s;
@@ -221,22 +235,22 @@
position: absolute;
}
.horn-tl{
- background: url(/assets/images/map-page/cosmetics/horn_tl.png) center center no-repeat;
+ background-image: url(/assets/images/map-pages/cosmetics/horn_tl.png) center center no-repeat;
left: -1px;
top: -1px;
}
.horn-tr{
- background: url(/assets/images/map-page/cosmetics/horn_tr.png) center center no-repeat;
+ background-image: url(/assets/images/map-pages/cosmetics/horn_tr.png) center center no-repeat;
right: -1px;
top: -1px;
}
.horn-bl{
- background: url(/assets/images/map-page/cosmetics/horn_bl.png) center center no-repeat;
+ background-image: url(/assets/images/map-pages/cosmetics/horn_bl.png) center center no-repeat;
left: -1px;
bottom: -1px;
}
.horn-br{
- background: url(/assets/images/map-page/cosmetics/horn_br.png) center center no-repeat;
+ background-image: url(/assets/images/map-pages/cosmetics/horn_br.png) center center no-repeat;
right: -1px;
bottom: -1px;
}
diff --git a/src/components/panel/MonitorHZ.vue b/src/components/panel/MonitorHZ.vue
new file mode 100644
index 0000000..618b666
--- /dev/null
+++ b/src/components/panel/MonitorHZ.vue
@@ -0,0 +1,154 @@
+<template>
+ <div class="monitorHz">
+ <el-card class="search-panel" style="background: #07325b;">
+ <el-form ref="form" :model="form" label-width="80px" class="search-form">
+ <el-form-item label="杞藉叿鍙凤細">
+ <el-input v-model="form.name" placeholder="鍦ㄦ杈撳叆杞藉叿鍙�"></el-input>
+ </el-form-item>
+ <el-row :gutter="20">
+ <el-col :span="4">
+ <el-row>
+ <el-form-item label="鏃堕棿锛�">
+ <el-date-picker
+ v-model="form.name"
+ type="date"
+ style="width: 118px;"
+ placeholder="閫夋嫨鏃ユ湡">
+ </el-date-picker>
+ </el-form-item>
+ </el-row>
+ <el-row>
+ <el-form-item>
+ <el-date-picker
+ v-model="form.name"
+ type="date"
+ style="width: 118px;"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ </el-form-item>
+ </el-row>
+ </el-col>
+ <el-col :span="2">
+ <div class="B-TMD-inp-button" @click="handleSearch"></div>
+ </el-col>
+ </el-row>
+ </el-form>
+ </el-card>
+ <el-card class="search-result" style="height:360px;">
+ <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
+ <el-row :gutter="20">
+ <el-col :span="2" style="padding-left: 15px">
+ {{ index+1 }}銆�
+ </el-col>
+ <el-col :span="15" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+ {{ item.processorName }}
+ <br/>
+ {{ item.startAddress }}
+ </el-col>
+ <el-col :span="6">
+ <a class="el-icon-location" style="font-size: 18px;margin-left:5px"
+ @click="handleLocation(item.dispatchNo,item.vno,item.eid,item.lng,item.lat)"></a>
+ <a class="el-icon-connection" style="font-size: 18px;margin-left:5px"></a>
+ </el-col>
+ </el-row>
+ </div>
+ </el-card>
+ <el-card class="footer-page" v-if="total > 10">
+ <el-pagination
+ small
+ :current-page.sync="currentPage1"
+ @current-change="handleSearch"
+ :page-size="10"
+ layout="prev, pager, next"
+ :total="1000"
+ class="warnPagination"
+ >
+ </el-pagination>
+ </el-card>
+ </div>
+</template>
+
+<script>
+ export default {
+ name: 'MonitorAreaTips',
+ components: {},
+ data() {
+ return {
+ isPanelVisible: false,
+ total: 0,
+ list: [],
+ form: {
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: ''
+ }
+ }
+ },
+ methods: {
+ handleClose(done) {
+ console.log(done)
+ },
+ handleClick(tab, event) {
+ console.log(tab, event)
+ },
+ handleSearch() {
+
+ }
+ },
+ mounted() {
+ this.handleSearch()
+ }
+ }
+</script>
+
+<style lang="less">
+ .monitorHz {
+ .el-message-box__content {
+ background-color: #030D2E;
+ }
+
+ .search-form .el-form-item {
+ margin: 0px;
+ }
+
+ .search-form .el-icon-search {
+ display: grid;
+ line-height: 30px;
+ font-size: 18px;
+ }
+
+ .search-panel {
+ border: #07325B;
+ background-color: #07325B;
+ }
+
+ .search-result {
+ margin: 5px 0px 0px 0px;
+ padding: 0px;
+ border: #051842;
+ overflow-y: scroll;
+ background-color: #051842;
+ }
+
+ .B-TMD-table-list {
+ margin-top: 10px;
+ text-align: left;
+ padding-left: 10px;
+ color: #328EB5;
+ width: 100%;
+ line-height: 25px;
+ background-color: #0B3B6D;
+ }
+
+ .footer-page {
+ position: absolute;
+ bottom: 5px;
+ }
+ }
+</style>
diff --git a/src/components/panel/MonitorPanel.vue b/src/components/panel/MonitorPanel.vue
new file mode 100644
index 0000000..0cf8fa7
--- /dev/null
+++ b/src/components/panel/MonitorPanel.vue
@@ -0,0 +1,799 @@
+<template>
+ <div id="right-panel">
+ <div class="panel-tab">
+ <ul>
+ <li id="test" @click="toggleMonitorPanel">
+ <div class="btn-stretch"></div>
+ </li>
+ <li class="B-TMT-tab-div" @click="showHZ">
+ <div class="B-TMT-tab-waybill" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
+ </li>
+ <li class="B-TMT-tab-div:hover" @click="showWayBill">
+ <div class="B-TMT-tab-route" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
+ </li>
+ </ul>
+ </div>
+ <div class="right-control">
+ <div class="el-message-box__header panel_header">
+ <div class="el-message-box__title panel_title"><!----><span>鐩戞帶闈㈡澘</span>
+ <div class="panel_searchTotal">鍏�<span style="color: #f5c228;margin:0 5px">{{ total }}</span>鏉¤褰�
+ </div>
+ </div>
+ </div>
+ <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
+ <div class="monitor1" v-if="wayBillVisible">
+ <div>
+ <el-card class="search-panel">
+ <el-form ref="form" :model="form" label-width="90px" class="search-form">
+ <el-form-item label="鍗曞彿锛�">
+ <el-input v-model="form.transNo" size="mini" placeholder="鍦ㄦ杈撳叆濮旀墭鍗曞彿"></el-input>
+ </el-form-item>
+ <el-form-item label="鎵胯繍鍟嗭細">
+ <el-input v-model="form.carrierName" size="mini" placeholder="鍦ㄦ杈撳叆鎵胯繍鍟�"></el-input>
+ </el-form-item>
+ <el-form-item label="杩愯緭鏂瑰紡锛�">
+ <el-select size="mini" v-model="form.transMode" popper-class="selectFrom"
+ placeholder="鍏ㄩ儴">
+ <el-option
+ v-for="item in ysfsList"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍙戣繍鏃堕棿锛�">
+ 浠�
+ <el-date-picker
+ v-model="form.fysj"
+ type="date"
+ style="width: 110px;"
+ placeholder="閫夋嫨鏃ユ湡"
+ :popper-append-to-body="false">
+ </el-date-picker>
+ 鍒扮幇鍦�
+ </el-form-item>
+ <el-row :gutter="20">
+ <el-col :span="17">
+ <el-row>
+ <el-form-item label="杞藉叿鍙凤細">
+ <el-input v-model="form.vehicleNo" size="mini"
+ placeholder="鍦ㄦ杈撳叆杞藉叿鍙�" class="customInput"></el-input>
+ </el-form-item>
+ </el-row>
+ <el-row>
+ <el-form-item label="鐘舵�侊細">
+ <el-select size="mini" v-model="form.orderState"
+ popper-class="selectFrom" placeholder="鍏ㄩ儴"
+ class="customInput">
+ <el-option
+ v-for="item in ztList"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-row>
+ </el-col>
+ <el-col :span="3">
+ <div class="B-TMD-inp-button" @click="handleSearch"></div>
+ </el-col>
+ </el-row>
+ </el-form>
+ </el-card>
+ <el-card class="search-result" style="height:271px;">
+ <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
+ <div class="B-TMD-table-list-title">
+ <div class="B-TMD-table-list-head">
+ <div class="B-TMD-table-list-title-y"
+ :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
+ <span>杩愬崟鍙凤細</span>
+ <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
+ :title="item.transNo">
+ <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
+ </span>
+ </div>
+ <div class="B-TMD-table-list-title-c">
+ 杞藉叿鍙凤細
+ <span id="plateNumber_p">
+ <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
+ </span>
+ </div>
+ </div>
+ <div class="B-TMD-table-icons" style="float:right">
+ <ul>
+ <li class="B-TMD-table-list-title-y-adress"
+ @click="handleLocation(item)"></li>
+ <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
+ </ul>
+ </div>
+ </div>
+ <div class="B-TMD-table-list-content">
+ <div>
+ <span>鍙戣揣浼佷笟锛�</span>
+ <span id="b_twe_consignment" :title="item.outWarehouseName">{{ item.outWarehouseName == null ? "鏆傛棤" : item.outWarehouseName }}</span>
+ </div>
+ <div>
+ <span>鎵� 杩� 鍟嗭細</span>
+ <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
+ </div>
+ <div><span>鏀惰揣浼佷笟锛�</span> <span
+ id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div>
+ </div>
+ <div class="B-TMD-table-list-bottom">
+ <div class="B-TMD-table-list-bottom-name">
+ 璐х墿鍚嶇О锛�<span :title="item.materialName">{{ item.materialName }}</span></div>
+ </div>
+ </div>
+ </el-card>
+
+ <el-card class="footer-page" v-if="total > 10">
+ <el-pagination
+ small
+ @current-change="handlePage"
+ :page-size=pageSize
+ layout="prev, pager, next"
+ :total=total
+ :current-page=current
+ class="warnPagination"
+ >
+ </el-pagination>
+ </el-card>
+ </div>
+ </div>
+ <div class="monitor2" v-if="hzVisible">
+ <monitor-h-z></monitor-h-z>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import $ from 'jquery'
+ import MonitorHZ from './MonitorHZ'
+ import mapApi from '@/api/mapApi'
+ import { mapState } from 'vuex'
+
+ const ysfsList = [{
+ value: '鍏ㄩ儴',
+ label: '鍏ㄩ儴'
+ }, {
+ value: '鍏矾',
+ label: '鍏矾'
+ }, {
+ value: '閾佽矾',
+ label: '閾佽矾'
+ }, {
+ value: '姘磋矾',
+ label: '姘磋矾'
+ }]
+ const ztList = [{
+ value: '鍏ㄩ儴',
+ label: '鍏ㄩ儴'
+ }, {
+ value: '鍏ㄩ儴鍗歌揣',
+ label: '鍏ㄩ儴鍗歌揣'
+ }, {
+ value: '鍦ㄩ��',
+ label: '鍦ㄩ��'
+ }]
+ export default {
+ name: 'MonitorPanel',
+ components: { MonitorHZ },
+ data() {
+ return {
+ isPanelVisible: false,
+ wayBillVisible: true,
+ hzVisible: false,
+ toggleMonitorStyle: 'right:0px',
+ list: [],
+ total: 0,
+ ysfsList,
+ ztList,
+ form: {
+ transNo: null,
+ carrierName: null,
+ transMode: null,
+ vehicleNo: null,
+ orderState: null,
+ size: 10,
+ current: 1
+ },
+ pageSize: 10,
+ current: 1,
+ isWaybillHover: true,
+ isRouteHover: false
+ }
+ },
+ computed: {
+ ...mapState({
+ currentCorpType: state => state.currentCorpType,
+ currentCorp: state => state.currentCorp
+ }),
+ layerHelper() {
+ return this.$store.layerHelper
+ }
+ },
+ watch: {
+ currentCorpType: async function(val) {
+ let params = {
+ transNo: '',
+ carrierName: '',
+ transMode: '',
+ vehicleNo: '',
+ orderState: '',
+ vehicleStatus: '',
+ orgCode: this.currentCorp,
+ ownerSectorCode: val,
+ size: 10,
+ current: 1
+ }
+ let datas = await this.handleGetDatas(params)
+ this.list = datas.data.records
+ this.total = datas.data.total
+ },
+ currentCorp: async function(val) {
+ let params = {
+ transNo: '',
+ carrierName: '',
+ transMode: '',
+ vehicleNo: '',
+ orderState: '',
+ vehicleStatus: '',
+ orgCode: val,
+ ownerSectorCode: this.currentCorpType,
+ size: 10,
+ current: 1
+ }
+ let datas = await this.handleGetDatas(params)
+ this.list = datas.data.records
+ this.total = datas.data.total
+ }
+ },
+ methods: {
+ handleClose(done) {
+ console.log(done)
+ },
+ async handlePage(page) {
+ console.log(page)
+ let params = {
+ transNo: '',
+ carrierName: '',
+ transMode: '',
+ vehicleNo: '',
+ orderState: '',
+ vehicleStatus: '',
+ orgCode: this.currentCorp,
+ ownerSectorCode: this.currentCorpType,
+ size: this.pageSize,
+ current: page
+ }
+ let datas = await this.handleGetDatas(params)
+ this.list = datas.data.records
+ this.total = datas.data.total
+ },
+ handleLocation(item) {
+ window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat)
+ },
+ toggleMonitorPanel() {
+ let el = $('.btn-stretch')
+ // let cs = 'btn-stretch-active'
+ var rightControl = $('#right-panel')
+ let right = rightControl.css('right')
+ if (right === '10px') {
+ rightControl.animate({
+ right: '-290px'
+ })
+ el.css({
+ 'transform': 'rotateY(180deg)',
+ 'transform-origin': '50% 50%',
+ 'transition': 'transform 1s linear'
+ })
+ } else {
+ rightControl.animate({
+ right: '10px'
+ })
+ el.css({
+ 'transform': 'rotateY(0deg)',
+ 'transform-origin': '50% 50%',
+ 'transition': 'transform 1s linear'
+ })
+ }
+ },
+ async handleSearch() {
+ // this.list = wayBillData.data
+ // this.total = wayBillData.data.length
+ let params = {
+ transNo: this.form.transNo,
+ carrierName: this.form.carrierName,
+ transMode: this.form.transMode,
+ vehicleNo: this.form.vehicleNo,
+ orderState: this.form.orderState,
+ vehicleStatus: '',
+ orgCode: this.orgCodeStrings,
+ size: this.pageSize,
+ current: this.current
+ }
+ let datas = await this.handleGetDatas(params)
+ this.list = datas.data.pager.records
+ this.total = datas.data.pager.total
+ },
+ async handleInit() {
+ // this.list = wayBillData.data
+ // this.total = wayBillData.data.length
+ let params = {
+ transNo: '',
+ carrierName: '',
+ transMode: '',
+ vehicleNo: '',
+ orderState: '',
+ vehicleStatus: '',
+ orgCode: this.currentCorp,
+ ownerSectorCode: this.currentCorpType,
+ size: 10,
+ current: 1
+ }
+ let datas = await this.handleGetDatas(params)
+ this.list = datas.data.records
+ this.total = datas.data.total
+ },
+ async handleSetOrgCodeStrings() {
+ let orgCodes = await this.handleGetOrgCode()
+ let orgCodesString = ''
+ for (let i = 0; i < orgCodes.data.length; i++) {
+ let org = orgCodes.data[i]
+ orgCodesString += org.orgCode + ','
+ }
+ this.orgCodeStrings = orgCodesString.substring(0, orgCodesString.length - 1)
+ },
+ async handleGetOrgCode() {
+ let params = {
+ orgSector: this.currentCorpType,
+ serviceType: ''
+ }
+ let datas = await mapApi.getOrganizationompanyList(params)
+ return datas
+ },
+ async handleGetDatas(params) {
+ let datas = await mapApi.getTransOrderlist(params)
+ return datas
+ },
+ showHZ() {
+ this.wayBillVisible = true
+ this.hzVisible = false
+ this.isWaybillHover = true
+ this.isRouteHover = false
+ },
+ showWayBill() {
+ this.hzVisible = true
+ this.wayBillVisible = false
+ this.isWaybillHover = false
+ this.isRouteHover = true
+ }
+ },
+ mounted() {
+ this.handleInit()
+ }
+ }
+</script>
+
+<style lang="less">
+ #right-panel {
+ width: 323px;
+ height: 573px;
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+
+ .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);
+ }
+
+ .el-input__inner::placeholder {
+ color: #9a9494;
+ }
+
+ /* 璋锋瓕 */
+
+ .el-input__inner::-webkit-input-placeholder {
+ color: #9a9494;
+ }
+
+ /* 鐏嫄 */
+
+ .el-input__inner:-moz-placeholder {
+ color: #9a9494;
+ }
+
+ /*ie*/
+
+ .el-input__inner:-ms-input-placeholder {
+ color: #9a9494;
+ }
+
+ .warning {
+ color: #dcc805;
+ }
+
+ #plateNumber_n a {
+ color: rgb(52, 224, 255);
+ }
+
+ .offline {
+ color: #9a9494;
+ }
+
+ .customInput {
+ width: 118px;
+ }
+
+ .component-fade-enter-active, .component-fade-leave-active {
+ transition: opacity .5s ease;
+ }
+
+ .component-fade-enter, .component-fade-leave-to
+ /* .component-fade-leave-active for below version 2.1.8 */ {
+ opacity: 0;
+ }
+
+ .B-TMD-table-icons ul li {
+ float: left;
+ margin: 10px;
+ list-style: none;
+ }
+
+ .B-TMD-table-list {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .B-TMD-table-list-title {
+ width: 100%;
+ height: 50px;
+ }
+
+ .B-TMD-table-list-head {
+ width: 160px;
+ float: left;
+ padding-left: 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .B-TMD-table-list-title-y-adress {
+ width: 16px;
+ height: 22px;
+ display: block;
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat 0 -90px;
+ cursor: pointer;
+ }
+
+ .B-TMD-table-list-title-y-car {
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat -45px 0;
+ width: 38px;
+ height: 38px;
+ display: block;
+ margin-top: 2px !important;
+ }
+
+ .B-TMD-table-list-title-y-car-offline {
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat -90px 0;
+ width: 38px;
+ height: 38px;
+ display: block;
+ margin-top: 2px !important;
+ }
+
+ .B-TMD-table-list-title-y-car-warning {
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat 0 0;
+ width: 38px;
+ height: 38px;
+ display: block;
+ margin-top: 2px !important;
+ }
+
+ .btn-stretch {
+ width: 20px;
+ height: 28px;
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat -408px 0;
+ margin-left: 10px;
+ margin-top: 3px;
+ cursor: pointer;
+
+ transform: rotateY(180deg);
+ transform-origin: 50% 50%;
+ transition: transform 1s linear;
+ }
+
+ .btn-stretch-active {
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat -440px 0;
+ }
+
+ .panel-tab {
+ position: absolute;
+ left: 0;
+ height: 120px;
+ top: 0;
+ width: 40px;
+ z-index: 500;
+ background-color: #030D2E;
+ background: url('/assets/images/map-page/icon/caidan.png') no-repeat;
+ }
+
+ .B-TMT-tab-div {
+ width: 29px;
+ height: 29px;
+ margin-left: 3px;
+ margin-top: 10px;
+ cursor: pointer;
+ :hover {
+ cursor: pointer;
+ // background: url("");
+ }
+ }
+
+ .B-TMT-tab-waybill {
+ width: 29px !important;
+ height: 29px !important;
+ margin-top: 0 !important;
+ margin-left: 0 !important;
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat -320px 0;
+ }
+
+ .B-TMT-tab-route {
+ width: 20px;
+ height: 19px;
+ margin-left: 5px;
+ margin-top: 6px;
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat -169px 0;
+ }
+
+ .B-TMT-tab-waybill-isActive, .B-TMT-tab-waybill:hover {
+ width: 29px !important;
+ height: 29px !important;
+ margin-top: 0 !important;
+ margin-left: -1px !important;
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat -361px 0 !important;
+ }
+
+ .B-TMT-tab-route-isActive, .B-TMT-tab-route:hover {
+ width: 32px !important;
+ height: 29px !important;
+ margin-top: 0 !important;
+ margin-left: -1px !important;
+ background: url('/assets/images/map-page/icon/icon.png') no-repeat -197px 0 !important;
+ }
+
+ .panel-tab ul {
+ list-style: none;
+ }
+
+ .panel-tab ul li {
+ height: 30px;
+ }
+
+ .right-control {
+ width: 290px;
+ height: 573px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 999;
+ background: url('/assets/images/map-pages/icon/bgc.png') no-repeat;
+ }
+
+ .panel_searchTotal {
+ font-size: 12px;
+ float: right;
+ }
+
+ .panel_header {
+ // background-color: #030D2E;
+ padding: 7px 15px 3px 20px;
+ }
+
+ .panel_title {
+ font-size: 12px;
+ margin: 0px;
+ padding: 0px;
+ color: #78c4ff;
+ font-weight: bold;
+ }
+
+ .el-message-box__content {
+ background-color: transparent;
+ }
+
+ .search-form .el-form-item {
+ margin: 0px;
+ }
+
+ .search-form .el-icon-search {
+ display: grid;
+ line-height: 30px;
+ font-size: 18px;
+ }
+
+ .search-panel {
+ border: #07325B;
+ background-color: #07325B !important;
+ margin-top: 0px;
+
+ .el-input__inner {
+ border-radius: 0px !important;
+ background-color: #061e51 !important;
+ }
+ }
+
+ input::-webkit-input-placeholder {
+ color: #569ee1;
+ }
+
+ input::-moz-input-placeholder {
+ color: #569ee1;
+ }
+
+ input::-ms-input-placeholder {
+ color: #569ee1;
+ }
+
+ input[type=text]:focus {
+ outline: 1px solid #17e4f6;
+ // box-shadow: 1px 0px 3px 0px #17e4f6;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ }
+
+ .search-result {
+ margin: 5px 0px 0px 0px;
+ padding: 0px;
+ border: #051842;
+ height: 290px;
+ overflow-y: scroll;
+ background-color: transparent !important;
+ margin-bottom: -8px !important;
+ }
+
+ .offline {
+ color: #64778B;
+ }
+
+ .B-TMD-table-list {
+ margin-top: 10px;
+ text-align: left;
+ padding-left: 10px;
+ //color: #64778B;
+ color: #34e0ff;
+ width: 100%;
+ line-height: 25px;
+ background: url('/assets/images/map-pages/icon/dd.png') no-repeat;
+ }
+
+ .B-TMD-inp-button {
+ width: 46px;
+ height: 52px;
+ position: absolute;
+ bottom: 8px;
+ right: 16px;
+ background: url('/assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
+ cursor: pointer;
+ }
+
+ .footer-page {
+ position: absolute;
+ background-color: transparent !important;
+ bottom: 10px !important;
+ margin-left: 0px;
+ border: none;
+
+ .warnPagination {
+ .btn-quicknext, .btn-quickprev {
+ color: #e4e8f1 !important;
+ background-color: transparent;
+ // border: 1px solid #25AECD;
+ border-left: 1px solid #25AECD;
+ border-bottom: 1px solid #25AECD;
+ border-top: 1px solid #25AECD;
+ color: #e4e8f1;
+ }
+ .el-pager li {
+ color: #e4e8f1;
+ background: transparent;
+ // border: 1px solid #25AECD;
+ border-left: 1px solid #25AECD;
+ border-bottom: 1px solid #25AECD;
+ border-top: 1px solid #25AECD;
+ }
+
+ .el-pager li.active {
+ border-color: #25AECD;
+ background-color: rgba(38, 222, 253, 0.3);
+ color: #e4e8f1;
+ }
+
+ .el-pager li:hover {
+ border-color: #25AECD;
+ background-color: rgba(38, 222, 253, 0.3);
+ color: #34e0ff;
+ }
+
+ .btn-prev {
+ background-color: transparent;
+ // border: 1px solid #25AECD;
+ border-left: 1px solid #25AECD;
+ border-bottom: 1px solid #25AECD;
+ border-top: 1px solid #25AECD;
+ color: #e4e8f1;
+ }
+ .btn-next {
+ background-color: transparent;
+ border: 1px solid #25AECD;
+ color: #e4e8f1;
+ }
+ }
+ }
+
+ ::-webkit-scrollbar{
+ width: 7px;
+ height: 5px !important;
+ }
+ ::-webkit-scrollbar-thumb {
+ /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
+ border-radius: 10px;
+ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
+ background : #0661AE;
+ border: 1px solid transparent;
+ }
+ ::-webkit-scrollbar-track {
+ /*婊氬姩鏉￠噷闈㈣建閬�*/
+ // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
+ border-radius: 0px;
+ background : #0E3565;
+ }
+ .selectFrom {
+ color: #061e51;
+ border: 1px solid #061e51 !important;
+ background: #dcc805 !important;
+
+ .el-select-dropdown__list {
+ background: #061e51 !important;
+ }
+
+ .el-select-dropdown__item {
+ color: #949494;
+ background: #061e51 !important;
+ }
+
+ .el-select-dropdown__item.hover,
+ .el-select-dropdown__item:hover {
+ color: #fff;
+ background: #061e51 !important;
+ }
+
+ .popper__arrow {
+ background-color: #061e51 !important;
+ }
+ }
+ }
+</style>
diff --git a/src/main.js b/src/main.js
index 82425e2..9884502 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@
import echarts from 'echarts'
import echartsDarkTheme from '@/styles/theme-dark/echarts/theme.json'
import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
diff --git a/src/store/index.js b/src/store/index.js
index dad3e82..11ade1d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,6 +6,8 @@
export default new Vuex.Store({
state: {
+ currentCorp: null,
+ currentCorpType: null,
L: null,
map: null, // 瀹炰緥鍖栫殑map
layerHelper: {}, // 鍥惧眰鎺у埗鍣ㄥ疄鐜板姪鎵嬬▼搴�
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 1c1a4c2..b45b042 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -2,6 +2,7 @@
<div class="full-screen">
<div id="map" ref="rootmap"></div>
<sgis-layer-controller :preset="'warningPreset'"></sgis-layer-controller>
+ <monitor-panel></monitor-panel>
</div>
</template>
@@ -9,11 +10,12 @@
import 'leaflet/dist/leaflet.css'
import Sgis from '@src/Sgis'
import SgisLayerController from '@components/LayerController/LayerController'
+import MonitorPanel from '@components/panel/MonitorPanel'
import { mapMutations, mapState } from 'vuex'
export default {
name: 'MapTemplate',
- components: {SgisLayerController, },
+ components: {SgisLayerController, MonitorPanel},
datas:{
...mapState("/",{})
},
--
Gitblit v1.8.0