cbwqpf/ruoyi-ui/src/views/components/table/liuTable.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-row type="flex">
        <el-col :span="2">
          <el-form-item label="开始时间" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-date-picker
            v-model="queryParams.startTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-form-item label="结束时间" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-date-picker
            v-model="queryParams.endTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-form-item label="船名" prop="shipName" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryParams.shipName"
            placeholder="请输入船名"
            clearable
            size="small"
            style="width: 80rem"
            @keyup.enter.native="handleQuery"
          />
        </el-col>
        <el-col :span="2">
          <el-form-item label="MMSI" prop="mmsi" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryParams.mmsi"
            placeholder="请输入MMSI"
            clearable
            size="small"
            style="width: 100rem"
            @keyup.enter.native="handleQuery"
          />
        </el-col>
      </el-row>


      <el-row type="flex">
        <el-col :span="2">
          <el-form-item label="海船/内河船" prop="name" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.shipRegionType" clearable placeholder="请选择海船/内河船">
            <el-option
              v-for="item in shipTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-form-item label="监测点" prop="monitorPointName" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.monitorPointName" clearable placeholder="请选择监测点">
            <el-option
              v-for="item in jianceOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-form-item label="目的港" prop="destination" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryParams.destination"
            placeholder="请输入目的港"
            clearable
            size="small"
            style="width: 80rem"
          />
        </el-col>
        <el-col :span="2">
          <el-form-item label="管辖机构" prop="orgName" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.orgName" clearable placeholder="请选择管辖机构">
            <el-option
              v-for="item in orgOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="2">
          <el-form-item label="设备类型" prop="deviceType" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.illegalType" clearable placeholder="请选择设备类型">
            <el-option
              v-for="item in illegalTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-form-item label="处置结果" prop="name" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.dealResult" clearable placeholder="请选择处置结果">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-form-item label="快检结果" prop="fastResult" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.fastResult" clearable placeholder="请选择快检结果">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-form-item label="送检结果" prop="uploadResult" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.uploadResult" clearable placeholder="请选择送检结果">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>


      <!--      <el-form-item label="受否中国国籍" prop="name">-->
      <!--          <el-radio v-model="queryParams.radio" label="1">是</el-radio>-->
      <!--          <el-radio v-model="queryParams.radio" label="2">否</el-radio>-->
      <!--       </el-form-item>-->


      <el-form-item style="margin-left:1rem">
        <el-button icon="el-icon-search" size="mini" @click="getLiuLists" class="search">查询</el-button>
        <el-button icon="el-icon-upload2" size="mini" @click="" class="export">导出</el-button>
        <el-button icon="el-icon-setting" size="mini" @click="dialogVisible = true" class="export">阈值</el-button>
      </el-form-item>


    </el-form>


    <el-radio-group v-model="tableShow" style="margin-bottom: 30px;" @change="tabChange">
      <el-radio-button label="1">嫌疑船舶管理</el-radio-button>
      <el-radio-button label="2">处置流程管理</el-radio-button>
    </el-radio-group>


    <el-table
      :data="tableData"
      :header-cell-style="{ background: 'linear-gradient(white, #ccebf9)'}"
      style="width: 100%"
      height=400>
      <el-table-column
        label='序号'
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="shipName"
        label="船名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mmsi"
        label="MMSI"
        width="180">
      </el-table-column>
      <el-table-column
        prop="shipRegionType"
        label="内河船/海船">
      </el-table-column>
      <el-table-column
        prop="monitorPointName"
        label="监测点">
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="管辖机构" v-if="tableShow == 1">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="监测时间">
      </el-table-column>
      <el-table-column
        prop="so2Percent"
        label="监测值" v-if="tableShow == 1">
      </el-table-column>
      <el-table-column
        prop="address"
        label="发送短信"
        v-if="false">
        <template slot-scope="scope">
          <el-button type="warning" icon="el-icon-chat-line-square">发送</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="快检结果"
        v-if="tableShow != 1">
      </el-table-column>
      <el-table-column
        prop="address"
        label="送检结果"
        v-if="tableShow != 1">
      </el-table-column>
      <el-table-column
        prop="address"
        label="处置结果"
        v-if="tableShow != 1">
      </el-table-column>
      <el-table-column
        prop="destination"
        label="目的港"
        v-if="tableShow == 1">
      </el-table-column>
      <el-table-column
        prop="berthName"
        label="锚铂计划"
        v-if="tableShow == 1">
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getLiuLists"
    />

    <div class="dialogContent">
      <el-dialog
        title=""
        :visible.sync="dialogVisible">
        <div class="dialogDiv" v-show="dialogShow">
          <span class="dialogFont" style="margin-left:10rem">燃油硫含量报警阈值(%)</span>
          <span class="dialogFont" style="margin-left:40rem">{{ liuCount }}</span>
          <button style="margin-left:40rem;" class="dialogButton" @click="dialogShow=false">修改</button>
        </div>

        <div class="dialogDiv" v-show="!dialogShow">
          <span class="dialogFont" style="margin-left:10rem">燃油硫含量报警阈值(%)</span>
          <el-input v-model="liuCount" placeholder="请输入内容" style="width:30rem;margin-left:15rem"></el-input>
          <button style="margin-left:13rem;" class="dialogButton" @click="getThresholdEdit">保存</button>
          <button style="margin-left:7rem;" class="dialogButton" @click="dialogShow=true">取消</button>
        </div>
      </el-dialog>
    </div>

  </div>

</template>

<script>
import {getLiuList, getThresholdEdit, getThresholdList} from "@/api/data/liuData";
import {getDicts} from "@/api/system/dict/data";

export default {
  name: "xtTable",
  data() {
    return {
      total: 0,
      dialogVisible: false,
      showSearch: true,
      //   tabPosition: 'left',
      tableShow: 1,
      liuCount: 0.3,
      dialogShow: true,
      liuCountId: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: '',
        mmsi: '',
        shipName: '',
        shipRegionType: '',
        destination: '',
        orgName: '',
        illegalStatus: 2,
        dealResult: '',
        fastResult: '',
        uploadResult: '',
        startTime: '',
        endTime: '',
        monitorPointName: '',
      },
      jianceOptions: [],
      orgOptions: [],
      illegalTypeOptions: [{
        value: 'guangpu',
        label: '光谱'
      }, {
        value: 'xiutan',
        label: '嗅探'
      }],
      shipTypeOptions: [{
        value: '0',
        label: '内河船'
      }, {
        value: '1',
        label: '海船'
      }],
      options: [{
        value: '选项1',
        label: '未处置'
      }, {
        value: '选项2',
        label: '已处置'
      }],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  // mounted() {
  //   this.getLiuLists();
  //   this.getThresholdList();
  //   this.getDicts();
  // },
  created() {
    this.getLiuLists();
    this.getThresholdList();
    this.getDicts();
  },
  methods: {
    getDicts() {
      getDicts('so2_snap_pos').then(data => {
        this.jianceOptions = data.data
      });
      getDicts('cb_org').then(data => {
        this.orgOptions = data.data
      });
    },
    tabChange() {
      console.log(this.tableShow);
    },
    getThresholdList() {
      getThresholdList({type: 'so2'}).then(response => {
        this.liuCount = response.rows[0].configValue;
        this.liuCountId = response.rows[0].configId;

      });
    }, getThresholdEdit() {
      getThresholdEdit({'configId': this.liuCountId, 'configValue': this.liuCount}).then(response => {
        this.dialogShow = true
      });
    },
    getLiuLists() {
      this.loading = true;


      var dateRange = '';
      if (this.queryParams.startTime != undefined && this.queryParams.startTime != "" && this.queryParams.endTime != undefined && this.queryParams.endTime != "") {
        dateRange = [];
        dateRange.push(this.queryParams.startTime.toJSON().split("T")[0]);
        dateRange.push(this.queryParams.endTime.toJSON().split("T")[0]);
      }


      getLiuList(this.addDateRange(this.queryParams, dateRange)).then(response => {
        for (var i in response.rows) {
          response.rows[i].shipRegionType = '内河船'
          response.rows[i].destination = '无'
          response.rows[i].berthName = '无'
        }
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }

  }
}
</script>

<style scoped>
.dialogContent >>> .el-dialog {
  background: url("./assets/pop_yzsz.png") no-repeat;
  background-size: 100% 100%;
  height: 150rem;
  width: 250rem;
  border: none;
  top: 100rem;
}

.dialogDiv {
  background-color: #1E2E51;
  height: 25rem;
  width: 220rem;
  margin-left: 3rem;
  padding-top: 6rem;
}

.dialogFont {
  color: #fff;
  font-size: 7rem;
}

.dialogButton {
  color: black;
  background-color: #00BFFF;
  border-radius: 2rem;
}

.dialogContent >>> .el-input--medium .el-input__inner {
  height: 10rem;
  text-align: center
}

.search {

  opacity: 1;
  background: linear-gradient(0deg, #098cf1 0%, #14eaef 100%);
  border-radius: 2rem;
  color: white
}

.export {

  opacity: 1;
  background: #ffffff;
  border: 1rem solid #e1e1e1;
  border-radius: 2rem;
}
</style>