|
@@ -0,0 +1,244 @@
|
|
|
+<template>
|
|
|
+ <!-- 万州港作业报表 -->
|
|
|
+ <div class="dowmShipDynamicTable">
|
|
|
+ <div style="height:100%;width:100%">
|
|
|
+ <div class="search" style="display:flex;margin: 10px;">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="map.input"
|
|
|
+ style="margin: 10px; width:10%"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ <el-date-picker style="margin: 10px;" v-model="map.startTime" type="datetime" placeholder="起始日期"></el-date-picker>
|
|
|
+ <el-date-picker style="margin: 10px;" v-model="map.endTime" type="datetime" placeholder="结束日期"></el-date-picker>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="btn"
|
|
|
+ @click="getTableData()"
|
|
|
+ style="margin: 10px;"
|
|
|
+ >
|
|
|
+ <i class="el-icon-search"></i>查询
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 下游港口船舶动态表 -->
|
|
|
+ <div class="loadData" style="height:500px;margin-left:5px">
|
|
|
+ <!-- <div style="font-size:16px;color:red">港口装车数据:共{{count}}车</div> -->
|
|
|
+ <div class="loadTable" style="height:500px;overflow:scroll;">
|
|
|
+ <el-table
|
|
|
+ ref="loadTable"
|
|
|
+ highlight-current-row
|
|
|
+ empty-text="请查询数据"
|
|
|
+ border
|
|
|
+ show-summary
|
|
|
+ :summary-method="getSummaries"
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ :data="tableData"
|
|
|
+ :row-style="{height:'40px'}"
|
|
|
+ style="width: 100%;font-size: 18px">
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="portName"
|
|
|
+ label="放货港口"
|
|
|
+ width="100px">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="productName"
|
|
|
+ label="品种/数量/放货日期"
|
|
|
+ width="380px">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="gmTonnage"
|
|
|
+ label="港口库存"
|
|
|
+ width="100px">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="capacityNumber"
|
|
|
+ label="船名"
|
|
|
+ width="100px">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="instructPlannedLoading"
|
|
|
+ label="计划吨位"
|
|
|
+ width="100px">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="shipDynamic"
|
|
|
+ label="船舶动态"
|
|
|
+ width="250px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.shipDynamic"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="装船(吨)"
|
|
|
+ prop="loadDetails"
|
|
|
+ width="250px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.loadDetails"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" align="center" width="50">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="updateDynamic(scope.row)" type="text" size="small">保存</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import PageTitle from "@/components/Page/Title";
|
|
|
+import { sjTime } from "@/utils/sharedJsFile";
|
|
|
+import {getCookie} from "@/utils/util.js";
|
|
|
+import BigNumber from "bignumber.js";
|
|
|
+export default {
|
|
|
+ components: { PageTitle },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData:[],
|
|
|
+ spanArr: [], // 用于存放需要合并的行的个数
|
|
|
+ spanIndex: 0, // 记录spanArr数组的下标
|
|
|
+ map:{
|
|
|
+ input:"",
|
|
|
+ startTime:null,
|
|
|
+ endTime:null
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ //this.getTableData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //查询表格数据
|
|
|
+ getTableData(){
|
|
|
+ console.log("map",this.map);
|
|
|
+ //时间校验
|
|
|
+ if(this.map.startTime && this.map.endTime){
|
|
|
+ if(this.map.startTime>=this.map.endTime){
|
|
|
+ this.$message({
|
|
|
+ message:"结束日期必须大于起始日期!",
|
|
|
+ type:"warning",
|
|
|
+ duration:2000
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.map.startTime=sjTime(this.map.startTime);
|
|
|
+ this.map.endTime=sjTime(this.map.endTime);
|
|
|
+ }else if((this.map.startTime && !this.map.endTime) || (!this.map.startTime && this.map.endTime)){
|
|
|
+ this.$message({
|
|
|
+ message:"起止日期错误!",
|
|
|
+ type:"warning",
|
|
|
+ duration:2000
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //发送请求
|
|
|
+ this.axios.post('/api/v1/tms/getDownShipDynamaics',this.map).then((res)=>{
|
|
|
+ if(res.data.code == "200"){
|
|
|
+ this.getSpanArr(res.data.data);//先得到合并数组
|
|
|
+ return Promise.resolve(res);
|
|
|
+ }else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.data.data,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).then((res)=>{
|
|
|
+ //再给表格赋值
|
|
|
+ this.tableData=res.data.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updateDynamic(row){
|
|
|
+ console.log("row:",row);
|
|
|
+ if(!row.instructionsCapacityId){
|
|
|
+ this.$message.warning("无法保存,请先操作装船指令!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.axios.post('/api/v1/tms/updateInstructionsCapacity',row).then((res)=>{
|
|
|
+ if(res.data.code == "200"){
|
|
|
+ this.$message.success("保存成功!");
|
|
|
+ this.getTableData();
|
|
|
+ }else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.data.data,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getSummaries(param) {
|
|
|
+ console.log("param",param);
|
|
|
+ const { columns, data } = param;
|
|
|
+ const sums = [];
|
|
|
+ columns.forEach((column, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ sums[index] = '合计';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (index === 3 || index===5) {
|
|
|
+ sums[index] = '';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const values = data.map(item => Number(item[column.property]));
|
|
|
+ if (!values.every(value => isNaN(value))) {
|
|
|
+ sums[index] = values.reduce((prev, curr) => {
|
|
|
+ const value = Number(curr);
|
|
|
+ if (!isNaN(value)) {
|
|
|
+ return new BigNumber(prev).plus(curr).toNumber();
|
|
|
+ } else {
|
|
|
+ return prev;
|
|
|
+ }
|
|
|
+ }, 0);
|
|
|
+ } else {
|
|
|
+ sums[index] = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return sums;
|
|
|
+ },
|
|
|
+ //处理数据,得到合并数组
|
|
|
+ getSpanArr(data) {
|
|
|
+ this.spanArr=[];
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (i == 0) {
|
|
|
+ this.spanArr.push(1);
|
|
|
+ this.spanIndex = 0;
|
|
|
+ } else {
|
|
|
+ // 判断当前行与前一行内容是否相同
|
|
|
+ if (data[i].portName == data[i - 1].portName) {
|
|
|
+ this.spanArr[this.spanIndex] += 1; // 相同的话,当前下标所代表的值加一,例如:第一列的前三行可合并
|
|
|
+ this.spanArr.push(0);// 记录完毕后,再往数组里添加一个元素0,作为下一次合并的初始值
|
|
|
+ } else {
|
|
|
+ this.spanArr.push(1); // 否则,依旧是一行
|
|
|
+ this.spanIndex = i;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log("spanArr",this.spanArr);
|
|
|
+ },
|
|
|
+ //合并
|
|
|
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ const _row = this.spanArr[rowIndex]; // 行数
|
|
|
+ const _col = _row > 0 ? 1 : 0; // 列数
|
|
|
+ return {
|
|
|
+ rowspan: _row,
|
|
|
+ colspan: _col
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss'>
|
|
|
+
|
|
|
+</style>
|
|
|
+
|