细节

徐旺旺

2021-01-14 bf3323fcbe32918dda7099f05be56aa7151b1e26

 src/components/panel/RightSearchPanel.vue

File was renamed from src/components/panel/MonitorPanel.vue
@@ -1,31 +1,22 @@
<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 class="btn-stretch" @click="toggleMonitorPanel"></div>
      <div class="tab-gd" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
      <div class="tab-hb" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
      <div class="tab-pk" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
    </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 class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
        </div>
      </div>
      <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
        <div class="monitor1" v-if="wayBillVisible">
        <div class="monitor1" v-if="gdVisible">
          <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-select v-model="form.pipelineType" @change="handlePipelineType">
                    <el-option
                        v-for="item in pipelineTypeOptions"
@@ -50,8 +41,8 @@
                            placeholder="在此输入关键字"></el-input>
                </el-form-item>
                <el-form-item>
                  <input type="button" class="btn-ok" @click="handleSearch" value="查询">
                  <input type="button" class="btn-reset" @click="handleSearch" value="重置">
                  <input type="button" class="btn-ok" @click="handleSearch" value="确定">
                </el-form-item>
              </el-form>
            </el-card>
@@ -117,8 +108,11 @@
            </el-card>
          </div>
        </div>
        <div class="monitor2" v-if="hzVisible">
          <monitor-h-z></monitor-h-z>
        <div class="monitor2" v-if="hbVisible">
          <env-protect-search></env-protect-search>
        </div>
        <div class="monitor2" v-if="pkVisible">
          <discharge-search></discharge-search>
        </div>
      </div>
    </div>
@@ -127,21 +121,21 @@

<script>
import $ from 'jquery'
import MonitorHZ from './MonitorHZ'
import mapApi from '@/api/mapApi'
import { mapState } from 'vuex'
import EnvProtectSearch from './EnvProtectSearch'
import DischargeSearch from './DischargeSearch'

export default {
  name: 'MonitorPanel',
  components: { MonitorHZ },
  components: { EnvProtectSearch, DischargeSearch },
  data () {
    return {
      isPanelVisible: false,
      wayBillVisible: true,
      hzVisible: false,
      gdVisible: true,
      hbVisible: false,
      pkVisible: false,
      toggleMonitorStyle: 'right:0px',
      list: [],
      total: 0,
      title: '管道信息查询',
      pipelineTypeOptions: [{
        value: '1',
        label: '管线本体'
@@ -212,53 +206,8 @@
      isRouteHover: false
    }
  },
  computed: {
    ...mapState({
      currentCorpType: state => state.currentCorpType,
      currentCorp: state => state.currentCorp
    }),
    layerHelper () {
      return this.$store.layerHelper
    }
  },
  watch: {
    currentCorpType: async function (val) {
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: this.currentCorp,
        ownerSectorCode: val,
        size: 10,
        current: 1
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    },
    currentCorp: async function (val) {
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: val,
        ownerSectorCode: this.currentCorpType,
        size: 10,
        current: 1
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleClose (done) {
      console.log(done)
@@ -271,27 +220,25 @@
        this.dataTypeOptions = this.pipelineOptions
      }
    },
    async handlePage (page) {
      console.log(page)
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: this.currentCorp,
        ownerSectorCode: this.currentCorpType,
        size: this.pageSize,
        current: page
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    handlePage (page) {
    },
    handleLocation (item) {
      window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat)
    handleGd () {
      this.gdVisible = true
      this.hbVisible = false
      this.pkVisible = false
      this.title = '管道信息查询'
    },
    handleHb () {
      this.gdVisible = false
      this.hbVisible = true
      this.pkVisible = false
      this.title = '环保设施查询'
    },
    handlePk () {
      this.gdVisible = false
      this.hbVisible = false
      this.pkVisible = true
      this.title = '排口信息查询'
    },
    toggleMonitorPanel () {
      const el = $('.btn-stretch')
@@ -317,91 +264,16 @@
          transition: 'transform 1s linear'
        })
      }
    },
    async handleSearch () {
      // this.list = wayBillData.data
      // this.total = wayBillData.data.length
      const 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
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.pager.records
      // this.total = datas.data.pager.total
    },
    async handleInit () {
      // this.list = wayBillData.data
      // this.total = wayBillData.data.length
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: this.currentCorp,
        ownerSectorCode: this.currentCorpType,
        size: 10,
        current: 1
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    },
    async handleSetOrgCodeStrings () {
      const orgCodes = await this.handleGetOrgCode()
      let orgCodesString = ''
      for (let i = 0; i < orgCodes.data.length; i++) {
        const org = orgCodes.data[i]
        orgCodesString += org.orgCode + ','
      }
      this.orgCodeStrings = orgCodesString.substring(0, orgCodesString.length - 1)
    },
    async handleGetOrgCode () {
      const params = {
        orgSector: this.currentCorpType,
        serviceType: ''
      }
      const datas = await mapApi.getOrganizationompanyList(params)
      return datas
    },
    async handleGetDatas (params) {
      // let datas = await mapApi.getTransOrderlist(params)

      const datas = 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;
  width: 322px;
  height: 573px;
  position: absolute;
  right: 10px;
@@ -468,21 +340,19 @@
  }

  .btn-ok {
    float: right;
    margin-right: 10px;
    width: 4rem;
    background-color: lightblue;
    background-color: #0B89B5;
    color: white;
    border: 1px solid white;
    border: 0;
  }

  .btn-reset {
    float: right;
    margin-right: 10px;
    width: 4rem;
    background-color: orange;
    color: white;
    border: 1px solid white;
    border: 0;
  }

  .component-fade-enter-active, .component-fade-leave-active {
@@ -520,40 +390,8 @@
    white-space: nowrap;
  }

  .B-TMD-table-list-title-y-adress {
    width: 16px;
    height: 22px;
    display: block;
    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-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-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-pages/icon/icon.png') no-repeat 0 0;
    width: 38px;
    height: 38px;
    display: block;
    margin-top: 2px !important;
  }

  .btn-stretch {
    width: 20px;
    width: 15px;
    height: 28px;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
    margin-left: 10px;
@@ -565,8 +403,22 @@
    transition: transform 1s linear;
  }

  .btn-stretch-active {
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -440px 0;
  .tab-gd {
    width: 32px;
    height: 30px;
    background-color: #0B3B6D;
  }

  .tab-hb {
    width: 32px;
    height: 30px;
    background-color: #545454;
  }

  .tab-pk {
    width: 32px;
    height: 30px;
    background-color: #83a6c4;
  }

  .panel-tab {
@@ -574,63 +426,9 @@
    left: 0;
    height: 120px;
    top: 0;
    width: 40px;
    width: 32px;
    z-index: 500;
    background-color: #030D2E;
    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-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-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-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-pages/icon/icon.png') no-repeat -197px 0 !important;
  }

  .panel-tab ul {
    list-style: none;
  }

  .panel-tab ul li {
    height: 30px;
  }

  .right-control {
@@ -690,7 +488,7 @@
    color: #569ee1;
  }

  input::-moz-input-placeholder {
  input::-moz-placeholder {
    color: #569ee1;
  }

@@ -735,7 +533,7 @@
    position: absolute;
    bottom: 8px;
    right: 16px;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
    cursor: pointer;
  }