派生自 wuyushui/SewerAndRainNetwork

YANGDL
2021-01-05 aefcaf1f54fb0913dc672e0444e68bee0d585d9c
src/components/panel/MonitorPanel.vue
@@ -26,13 +26,27 @@
                        <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-select v-model="form.pipelineType" @change="handlePipelineType">
                    <el-option
                        v-for="item in pipelineTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                                </el-form-item>
                                <el-form-item label="数据类型:">
                                    <el-input v-model="form.carrierName" size="mini" placeholder="在此输入承运商"></el-input>
                  <el-select v-model="form.dataType">
                    <el-option
                        v-for="item in dataTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                                </el-form-item>
                                <el-form-item label="模糊搜索:">
                                    <el-input v-model="form.vehicleNo" size="mini"
                  <el-input v-model="form.key" size="mini"
                                                          placeholder="在此输入关键字"></el-input>
                                </el-form-item>
                                <el-form-item>
@@ -71,7 +85,9 @@
                                <div class="B-TMD-table-list-content">
                                    <div>
                                        <span>发货企业:</span>
                                        <span id="b_twe_consignment" :title="item.outWarehouseName">{{ item.outWarehouseName == null ? "暂无" : item.outWarehouseName }}</span>
                    <span id="b_twe_consignment" :title="item.outWarehouseName">{{
                        item.outWarehouseName == null ? "暂无" : item.outWarehouseName
                      }}</span>
                                    </div>
                                    <div>
                                        <span>承&nbsp;&nbsp;运&nbsp;&nbsp;商:</span>
@@ -115,29 +131,6 @@
    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 },
@@ -149,8 +142,61 @@
                toggleMonitorStyle: 'right:0px',
                list: [],
                total: 0,
                ysfsList,
                ztList,
      pipelineTypeOptions: [{
        value: '1',
        label: '管线本体'
      }, {
        value: '2',
        label: '附属设施'
      }],
      dataTypeOptions: [],
      attachOptions: [{
        value: '1',
        label: '阀门'
      },{
        value: '2',
        label: '管廊'
      },{
        value: '3',
        label: '管架'
      },{
        value: '4',
        label: '三通'
      },{
        value: '5',
        label: '四通'
      },{
        value: '6',
        label: '弯头'
      }],
      pipelineOptions: [{
        value: '1',
        label: '管线'
      }, {
        value: '2',
        label: '雨水管段'
      }, {
        value: '3',
        label: '含盐管段'
      }, {
        value: '4',
        label: '含油管段'
      }, {
        value: '5',
        label: '事故水管段'
      }, {
        value: '6',
        label: '含碱管段'
      }, {
        value: '7',
        label: '循环水管段'
      }, {
        value: '8',
        label: '净化水管段'
      }, {
        value: '9',
        label: '生活污水管段'
      }],
                form: {
                    transNo: null,
                    carrierName: null,
@@ -190,9 +236,8 @@
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
      this.list = datas.data.records
      this.total = datas.data.total
            },
            currentCorp: async function(val) {
                let params = {
@@ -208,14 +253,21 @@
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
      this.list = datas.data.records
      this.total = datas.data.total
            }
        },
        methods: {
            handleClose(done) {
                console.log(done)
    },
    handlePipelineType(item){
      console.log(item)
      if(item === '2'){
        this.dataTypeOptions = this.attachOptions
      }else if(item === '1'){
        this.dataTypeOptions = this.pipelineOptions
      }
            },
            async handlePage(page) {
                console.log(page)
@@ -232,9 +284,8 @@
                    current: page
                }
                let datas = await this.handleGetDatas(params)
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
      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)
@@ -279,9 +330,8 @@
                    current: this.current
                }
                let datas = await this.handleGetDatas(params)
              console.log(datas)
                // this.list = datas.data.pager.records
                // this.total = datas.data.pager.total
      this.list = datas.data.pager.records
      this.total = datas.data.pager.total
            },
            async handleInit() {
                // this.list = wayBillData.data
@@ -299,9 +349,8 @@
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
      this.list = datas.data.records
      this.total = datas.data.total
            },
            async handleSetOrgCodeStrings() {
                let orgCodes = await this.handleGetOrgCode()
@@ -321,11 +370,8 @@
                return datas
            },
            async handleGetDatas(params) {
              // eslint-disable-next-line no-debugger
              // debugger
                // let datas = await mapApi.getTransOrderlist(params)
                // return datas
              return params
      let datas = await mapApi.getTransOrderlist(params)
      return datas
            },
            showHZ() {
                this.wayBillVisible = true
@@ -353,50 +399,67 @@
            position: absolute;
            right: 10px;
            top: 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;
            }
            .btn-ok{
                float:right;
                margin-right:10px;
@@ -405,6 +468,7 @@
                color: white;
                border: 1px solid white;
            }
            .btn-reset{
                float:right;
                margin-right:10px;
@@ -413,27 +477,33 @@
                color: white;
                border: 1px solid white;
            }
            .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;
@@ -442,48 +512,56 @@
                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;
    background: url('/assets/images/map-pages/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;
    background: url('/assets/images/map-pages/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;
    background: url('/assets/images/map-pages/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;
    background: url('/assets/images/map-pages/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;
    background: url('/assets/images/map-pages/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;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -440px 0;
            }
            .panel-tab {
                position: absolute;
                left: 0;
@@ -492,53 +570,62 @@
                width: 40px;
                z-index: 500;
                background-color: #030D2E;
                background: url('/assets/images/map-page/icon/caidan.png') no-repeat;
    background: url('/assets/images/map-pages/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;
    background: url('/assets/images/map-pages/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;
    background: url('/assets/images/map-pages/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;
    background: url('/assets/images/map-pages/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;
    background: url('/assets/images/map-pages/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;
@@ -548,14 +635,17 @@
                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;
@@ -563,40 +653,50 @@
                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;
@@ -606,9 +706,11 @@
                background-color: transparent !important;
                margin-bottom: -8px !important;
            }
            .offline {
                color: #64778B;
            }
            .B-TMD-table-list {
                margin-top: 10px;
                text-align: left;
@@ -619,6 +721,7 @@
                line-height: 25px;
                background: url('/assets/images/map-pages/icon/dd.png') no-repeat;
            }
            .B-TMD-inp-button {
                width: 46px;
                height: 52px;
@@ -628,12 +731,14 @@
                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;
@@ -644,6 +749,7 @@
                        border-top: 1px solid #25AECD;
                        color: #e4e8f1;
                    }
                    .el-pager li {
                        color: #e4e8f1;
                        background: transparent;
@@ -673,6 +779,7 @@
                        border-top: 1px solid #25AECD;
                        color: #e4e8f1;
                    }
                    .btn-next {
                        background-color: transparent;
                         border: 1px solid #25AECD;
@@ -680,10 +787,12 @@
                    }
                }
            }
            ::-webkit-scrollbar{
                width: 7px;
                height: 5px !important;
            }
            ::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
@@ -691,12 +800,14 @@
                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;