派生自 wuyushui/SewerAndRainNetwork

YANGDL
2021-01-05 8356b1850885fe03a6bd388500a447dd5c42692c
src/components/panel/MonitorPanel.vue
@@ -15,7 +15,7 @@
        </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="el-message-box__title panel_title"><!----><span>管线信息查询</span>
                    <div class="panel_searchTotal">共<span style="color: #f5c228;margin:0 5px">{{ total }}</span>条记录
                    </div>
                </div>
@@ -25,61 +25,20 @@
                    <div>
                        <el-card class="search-panel">
                            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                                <el-form-item label="单号:">
                                <el-form-item label="管线类型:">
                                    <el-input v-model="form.transNo" size="mini" placeholder="在此输入委托单号"></el-input>
                                </el-form-item>
                                <el-form-item label="承运商:">
                                <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 label="模糊搜索:">
                                    <el-input v-model="form.vehicleNo" size="mini"
                                                          placeholder="在此输入关键字"></el-input>
                                </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>
                                    <input type="button" class="btn-reset" @click="handleSearch" value="重置">
                                    <input type="button" class="btn-ok" @click="handleSearch" value="确定">
                                </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;">
@@ -231,8 +190,9 @@
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
            },
            currentCorp: async function(val) {
                let params = {
@@ -248,8 +208,9 @@
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
            }
        },
        methods: {
@@ -271,8 +232,9 @@
                    current: page
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
              console.log(datas)
                // 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)
@@ -317,8 +279,9 @@
                    current: this.current
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.pager.records
                this.total = datas.data.pager.total
              console.log(datas)
                // this.list = datas.data.pager.records
                // this.total = datas.data.pager.total
            },
            async handleInit() {
                // this.list = wayBillData.data
@@ -336,8 +299,9 @@
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
              console.log(datas)
                // this.list = datas.data.records
                // this.total = datas.data.total
            },
            async handleSetOrgCodeStrings() {
                let orgCodes = await this.handleGetOrgCode()
@@ -357,8 +321,11 @@
                return datas
            },
            async handleGetDatas(params) {
                let datas = await mapApi.getTransOrderlist(params)
                return datas
              // eslint-disable-next-line no-debugger
              // debugger
                // let datas = await mapApi.getTransOrderlist(params)
                // return datas
              return params
            },
            showHZ() {
                this.wayBillVisible = true
@@ -385,94 +352,88 @@
            height: 573px;
            position: absolute;
            right: 10px;
            bottom: 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;
                width: 4rem;
                background-color: lightblue;
                color: white;
                border: 1px solid white;
            }
            .btn-reset{
                float:right;
                margin-right:10px;
                width: 4rem;
                background-color: orange;
                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;
@@ -481,7 +442,6 @@
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .B-TMD-table-list-title-y-adress {
                width: 16px;
                height: 22px;
@@ -489,7 +449,6 @@
                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;
@@ -497,7 +456,6 @@
                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;
@@ -505,7 +463,6 @@
                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;
@@ -513,7 +470,6 @@
                display: block;
                margin-top: 2px !important;
            }
            .btn-stretch {
                width: 20px;
                height: 28px;
@@ -521,16 +477,13 @@
                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;
@@ -541,7 +494,6 @@
                background-color: #030D2E;
                background: url('/assets/images/map-page/icon/caidan.png') no-repeat;
            }
            .B-TMT-tab-div {
                width: 29px;
                height: 29px;
@@ -553,7 +505,6 @@
                    // background: url("");
                }
            }
            .B-TMT-tab-waybill {
                width: 29px !important;
                height: 29px !important;
@@ -561,7 +512,6 @@
                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;
@@ -569,7 +519,6 @@
                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;
@@ -577,7 +526,6 @@
                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;
@@ -585,15 +533,12 @@
                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;
@@ -603,17 +548,14 @@
                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;
@@ -621,50 +563,40 @@
                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;
@@ -674,11 +606,9 @@
                background-color: transparent !important;
                margin-bottom: -8px !important;
            }
            .offline {
                color: #64778B;
            }
            .B-TMD-table-list {
                margin-top: 10px;
                text-align: left;
@@ -689,7 +619,6 @@
                line-height: 25px;
                background: url('/assets/images/map-pages/icon/dd.png') no-repeat;
            }
            .B-TMD-inp-button {
                width: 46px;
                height: 52px;
@@ -699,14 +628,12 @@
                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;
@@ -753,7 +680,6 @@
                    }
                }
            }
            ::-webkit-scrollbar{
                width: 7px;
                height: 5px !important;