1、监测因子趋势时间控件修改 2、监测因子对比echarts显示修改

yupan

2022-11-07 9af0ba7e5a51b187f762234755ed1559ab91f5f5

 src/views/dailyreport/index.vue

@@ -1,231 +1,355 @@
<template>
<div class="dailyreport">
  <div class="dailyBox">
    <div class="dailyTop">
      <el-select v-model="cityChoose" placeholder="请选择">
        <el-option
            v-for="item in cityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
          v-model="value1"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions1">
      </el-date-picker>
      <el-input v-model="carInput" placeholder="请输入走航车编号" clearable style="width: 180px;display: inline-block"></el-input>
      <el-button type="primary" @click="selectExport" style="margin-right: 10px;">查询</el-button>
      <el-button type="primary" @click="openBox=true" style="margin-left: 0">上传</el-button>
      <!--    <el-input v-model="carInput" placeholder="请输入走航车编号" clearable style="width: 180px;display: inline-block"></el-input>-->
<!--          <el-button type="primary" @click="carExport">下载走航车日报</el-button>-->
  <div class="dailyreport">
    <div class="dailyBox">
      <div class="dailyTop">
        <el-select v-model="cityChoose" placeholder="请选择区域">
          <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="equipChoose1" placeholder="请选择设备">
          <el-option
              v-for="item in equipOptions1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
            v-model="value1"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions1">
        </el-date-picker>
        <el-select v-model="carInput" clearable placeholder="请选择走航车" style="width: 180px;display: inline-block">
          <el-option
              v-for="(item,index) in carMac"
              :key="index"
              :label="item.name"
              :value="item.mac">
          </el-option>
        </el-select>
        <el-button type="primary" @click="selectExport" style="margin-right: 10px;">查询</el-button>
        <el-button type="primary" @click="upImgBtn" style="margin-left: 0">上传</el-button>
      </div>
      <div class="dailyDown" style="overflow-y: auto">
        <el-card class="boxCard">
          <el-table
              :data="tableData"
              style="width: 100%;overflow-y: auto; height: 82%;">
            <el-table-column
                prop="name"
                label="报告名称"
            >
            </el-table-column>
            <el-table-column
                prop="time"
                label="提交时间"
            >
            </el-table-column>
            <el-table-column
                prop="date"
                label="创建时间"
            >
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="expReport(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
    <div class="dailyDown" style="overflow-y: auto">
      <el-card class="boxCard">
        <el-table
            :data="tableData"
            style="width: 100%;overflow-y: auto; height: 82%;">
          <el-table-column
              prop="name"
              label="报告名称"
          >
          </el-table-column>
          <el-table-column
              prop="time"
              label="提交时间"
          >
          </el-table-column>
          <el-table-column
              prop="date"
              label="创建时间"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="expReport(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-dialog title="上传图片" :visible.sync="openBox">
      <div class="openTop">
        <el-select v-model="cityChoose2" placeholder="请选择区域">
          <el-option
              v-for="item in cityOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="equipChoose2" placeholder="请选择设备">
          <el-option
              v-for="item in equipOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-select v-if="equipChoose2==='car'" v-model="carInput2" clearable placeholder="请选择走航车" style="width: 180px;display: inline-block">
          <el-option
              v-for="(item, index) in carMac"
              :key="index"
              :label="item.name"
              :value="item.mac">
          </el-option>
        </el-select>
        <el-select v-else v-model="planSelect2" clearable placeholder="请选择无人机" style="width: 180px;display: inline-block">
          <el-option
              v-for="(item, index) in planMac"
              :key="index"
              :label="item.name"
              :value="item.mac">
          </el-option>
        </el-select>
        <el-input v-if="equipChoose2==='car'" v-model="areaInput3" placeholder="请输入走航区域" clearable style="width: 180px;display: inline-block"></el-input>
        <el-input v-else v-model="planInput2" placeholder="请输入飞行区域" clearable style="width: 180px;display: inline-block"></el-input>
        <el-button v-if="equipChoose2!=='car'" type="primary" @click="innerVisible = true">飞行监测</el-button>
        <div class="dateTimeBox">
          <div>
            <el-date-picker
                v-model="value2"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="value2Pic"
                @change="value2Change">
            </el-date-picker>
            <el-button style="padding: 6px 8px;" @click="addDate('add')" :disabled="isDidAdd">+</el-button>
            <el-button style="padding: 6px 10px;" @click="addDate('minus')" :disabled="isDisMinus">-</el-button>
          </div>
          <div :style="{display:dateTime2}">
            <el-date-picker
                v-model="value3"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="value3Pic"
                @change="value3Change">
            </el-date-picker>
          </div>
          <div :style="{display:dateTime3}">
            <el-date-picker
                v-model="value4"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="value4Pic"
                @change="value4Change">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div v-if="equipChoose2==='car'" class="uploadDiv" style="width:90%;overflow: auto;display: flex;flex-wrap: wrap;justify-content: space-between">
        <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            :on-change="handleChange1"
            :on-remove="handleRemove1"
            :file-list="fileList1"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传走航监测概况图片</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            :on-change="handleChange2"
            :on-remove="handleRemove2"
            :file-list="fileList2"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传PM2.5走航监测图片</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            :on-change="handleChange3"
            :on-remove="handleRemove3"
            :file-list="fileList3"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传PM10走航监测图片</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            :on-change="handleChange4"
            :on-remove="handleRemove4"
            :file-list="fileList4"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传NO2走航监测图片</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            :on-change="handleChange5"
            :on-remove="handleRemove5"
            :file-list="fileList5"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传CO走航监测图片</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            :on-change="handleChange6"
            :on-remove="handleRemove6"
            :file-list="fileList6"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传SO2走航监测图片</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            :on-change="handleChange7"
            :on-remove="handleRemove7"
            :file-list="fileList7"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传O3走航监测图片</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            :on-change="handleChange8"
            :on-remove="handleRemove8"
            :file-list="fileList8"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传VOCs走航监测图片</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            :on-change="handleChange9"
            :on-remove="handleRemove9"
            :file-list="fileList9"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传小结图片</div>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openBox = false">取 消</el-button>
        <el-button type="primary" @click="submitImgs" :disabled ="isDisplay">保 存</el-button>
      </div>
      <el-dialog
          class="innerDialog"
          width="60%"
          title="内层 Dialog"
          :visible.sync="innerVisible"
          append-to-body>
        <Map></Map>
      </el-dialog>
    </el-dialog>
  </div>
  <el-dialog title="上传图片" :visible.sync="openBox">
    <div class="openTop">
      <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions">
      </el-date-picker>
      <el-input v-model="carInput2" placeholder="请输入走航车编号" clearable style="width: 180px;display: inline-block"></el-input>
    </div>
    <div class="uploadDiv" style="width:90%;overflow: auto;display: flex;flex-wrap: wrap;justify-content: space-between">
      <el-upload
          class="upload-demo"
          action=""
          ref="upload"
          :on-change="handleChange1"
          :on-remove="handleRemove1"
          :file-list="fileList1"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
        <div slot="tip" class="el-upload__tip">请上传走航监测概况图片</div>
        <!--      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
      </el-upload>
      <el-upload
          class="upload-demo"
          action=""
          ref="upload"
          :on-change="handleChange2"
          :on-remove="handleRemove2"
          :file-list="fileList2"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
        <div slot="tip" class="el-upload__tip">请上传PM2.5走航监测图片</div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action=""
          ref="upload"
          :on-change="handleChange3"
          :on-remove="handleRemove3"
          :file-list="fileList3"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
        <div slot="tip" class="el-upload__tip">请上传PM10走航监测图片</div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action=""
          ref="upload"
          :on-change="handleChange4"
          :on-remove="handleRemove4"
          :file-list="fileList4"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
        <div slot="tip" class="el-upload__tip">请上传NO2走航监测图片</div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action=""
          ref="upload"
          :on-change="handleChange5"
          :on-remove="handleRemove5"
          :file-list="fileList5"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
        <div slot="tip" class="el-upload__tip">请上传CO走航监测图片</div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action=""
          ref="upload"
          :on-change="handleChange6"
          :on-remove="handleRemove6"
          :file-list="fileList6"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
        <div slot="tip" class="el-upload__tip">请上传SO2走航监测图片</div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action=""
          ref="upload"
          :on-change="handleChange7"
          :on-remove="handleRemove7"
          :file-list="fileList7"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
        <div slot="tip" class="el-upload__tip">请上传O3走航监测图片</div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action=""
          ref="upload"
          :on-change="handleChange8"
          :on-remove="handleRemove8"
          :file-list="fileList8"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
        <div slot="tip" class="el-upload__tip">请上传VOCs走航监测图片</div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action=""
          ref="upload"
          :on-change="handleChange9"
          :on-remove="handleRemove9"
          :file-list="fileList9"
          multiple
          :auto-upload="false">
        <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
        <div slot="tip" class="el-upload__tip">请上传小结图片</div>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="openBox = false">取 消</el-button>
<!--      <el-button class="btnPosition" type="primary" plain @click="submitImgs">提交</el-button>-->
      <el-button type="primary" @click="submitImgs">上 传</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
// import { exportDocx } from '@/utils/exportDocx'
import { exportDocx } from '@/utils/exportImageFile'
import requestObj from '@/utils/request'
import Map from '@/components/PlanMap/Map'
export default {
  components: { Map },
  data() {
    return {
      cityChoose: 'gx', // 默认查询高新区走行车
      cityChoose2: 'gx', // 默认上传高新区图片
      cityOptions: [{
        value: 'gx',
        label: '高新区'
      }],
      carInput: '', // 查询时走航车唯一标识
      cityOptions2: [{
        value: 'gx',
        label: '高新区'
      }],
      equipChoose1: 'car',
      equipChoose2: 'car',
      equipOptions1: [{
        value: 'car',
        label: '走航车'
      }],
      equipOptions2: [{
        value: 'car',
        label: '走航车'
      }, {
        value: 'plan',
        label: '无人机'
      }],
      carInput2: '', // 上传时走航车唯一标识
      carMac: [], // 走航车mac数组
      carInput: '', // 查询时走航车唯一标识
      areaInput3: '', // 站点名称
      value1: [new Date(), new Date()], // 查询时时间段
      value2: new Date(), // 上传时间
      value2: [new Date(), new Date()], // 上传时间1
      value3: [], // 上传时间2
      value4: [], // 上传时间3
      pickerOptions1: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
@@ -254,6 +378,73 @@
          }
        }]
      },
      carMacArr: [{
        value: 'p5dnd7a0243624',
        label: '走航车名字'
      }, {
        value: 'p5dnd7a0243622',
        label: '走航车622'
      }, {
        value: 'p5dnd7a0243625',
        label: '走航车625'
      }],
      timeOne: '',
      timeTwo: '',
      timeThree: '',
      value2Pic: {
        onPick: ({ maxDate, minDate }) => {
          // 最大时间 最小时间
          this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.timeOne = ''
        },
        disabledDate: time => {
          if (this.timeOne) {
            const WEEK = 3 * 24 * 3600 * 1000 - 1 // 这里乘以3再减去1相当于 限制3天以内
            const minTime = this.timeOne// 三天之前
            const maxTime = this.timeOne + WEEK // 三天之后
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
          } else {
            return time.getTime() > new Date()
          }
        }
      },
      value3Pic: {
        onPick: ({ maxDate, minDate }) => {
          // 最大时间 最小时间
          this.timeTwo = minDate.getTime() // 当选一个日期时 就是最小日期
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.timeTwo = ''
        },
        disabledDate: time => {
          if (this.timeTwo) {
            const WEEK = 3 * 24 * 3600 * 1000 - 1 // 这里乘以3再减去1相当于 限制3天以内
            const minTime = this.timeTwo// 三天之前
            const maxTime = this.timeTwo + WEEK // 三天之后
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
          } else {
            return time.getTime() > new Date()
          }
        }
      },
      value4Pic: {
        onPick: ({ maxDate, minDate }) => {
          // 最大时间 最小时间
          this.timeThree = minDate.getTime() // 当选一个日期时 就是最小日期
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.timeThree = ''
        },
        disabledDate: time => {
          if (this.timeThree) {
            const WEEK = 3 * 24 * 3600 * 1000 - 1 // 这里乘以3再减去1相当于 限制3天以内
            const minTime = this.timeThree// 三天之前
            const maxTime = this.timeThree + WEEK // 三天之后
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
          } else {
            return time.getTime() > new Date()
          }
        }
      },
      selectTime: [],
      upTime: [],
      fileList1: [],
@@ -268,120 +459,170 @@
      fileLists: [[], [], [], [], [], [], [], [], []],
      sailingReport: {
        fileLists: [
          // fileList1: [],
          // fileList2: [],
          // fileList3: [],
          // fileList4: [],
          // fileList5: [],
          // fileList6: [],
          // fileList7: [],
          // fileList8: [],
          // fileList9: []
          [], [], [], [], [], [], [], [], []
        ],
        index: 5,
        index: 0,
        fileList: []
      },
      openBox: false, // 是否打开弹窗
      // tableData: []
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        time: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        time: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        time: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        time: '上海市普陀区金沙江路 1516 弄'
      }],
      tableData: [],
      urlList: [],
      numList: [0, 0, 0, 0, 0, 0, 0, 0, 0]
      numList: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      isDisplay: false,
      dateTime2: 'none',
      dateTime3: 'none',
      isDidAdd: false, // 是否禁用加
      isDisMinus: true, // 是否禁用减
      planSelect: '', // 无人机查询下拉框
      planSelect2: '', // 无人机上传选择框
      planMac: [], // 无人机数组
      planInput: '', // 无人机飞行区域查询
      planInput2: '', // 无人机飞行区域上传
      innerVisible: false, // 内部地图是否打开
      radioSeven: 'PM2.5'
    }
  },
  watch: {
    value1(n, o) {
      if (n === null) {
        this.value1 = []
      }
    },
    value2(n, o) {
      if (n === null) {
        this.value2 = []
      }
    },
    value3(n, o) {
      if (n === null) {
        this.value3 = []
      }
    },
    value4(n, o) {
      if (n === null) {
        this.value4 = []
      }
    }
  },
  created() {
    this.$request({
      url: 'cruiser/selectCruisers',
      method: 'get'
    }).then(res => {
      this.carMac = res.data
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    // 查询走行车报告
    selectExport() {
      this.upTime = this.newTime(this.value1)
      this.$request({
        url: '',
        method: 'get',
        params: {
          startTime: this.upTime[0],
          endTime: this.upTime[1],
          mac: this.carInput
        }
      }).then(res => {
        console.log(res)
        var info = res.data
        info.map(v => {
          var time = v.time.split('-').json('')
          v.name = `走航车监测日报${time}`
      this.selectTime = this.newTime(this.value1)
      if (this.cityChoose && this.equipChoose1 && this.selectTime[1]) {
        this.$request({
          url: '/cruiser/selectDaily',
          method: 'get',
          params: {
            code: this.cityChoose,
            type: this.equipChoose1,
            startTime: this.selectTime[0],
            endTime: this.selectTime[1],
            mac: this.carInput
          }
        }).then(res => {
          this.carInput2 = this.carInput
          var info = res.data
          if (info.length === 0) {
            this.$message('暂无数据')
            this.tableData = info
            return
          }
          info.map(v => {
            var time = v.time.split('-').join('')
            v.name = `高新区走航监测报告${time}`
          })
          info.sort((a, b) => { return b.time.split('-').join('') - a.time.split('-').join('') })
          this.tableData = info
        }).catch(err => {
          console.log(err)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 下载走航车日报
    carExport() {
      const url1 = `http://47.99.64.149:8081//static/img/7f633687-8321-4f89-bffc-9a52f94cfb77.jpg`
      const url2 = `http://47.99.64.149:8081//static/img/178d92d1-4729-4019-9b60-776a8c8653ac.jpg`
      // console.log(url, 'url')
      this.sailingReport.fileLists[0].push({ url: url1 })
      this.sailingReport.fileLists[0].push({ url: url1 })
      this.sailingReport.fileLists[1].push({ url: url2 })
      this.sailingReport.fileLists[1].push({ url: url2 })
      this.sailingReport.fileLists[2].push({ url: url2 })
      this.sailingReport.city = '高新区'
      // console.log(this.sailingReport.fileLists, 'this.sailingReport.fileLists')
      this.sailingReport.fileList.push({ url: url1 })
      this.sailingReport.fileList.push({ url: url2 })
      exportDocx('/sailingReport.docx', this.sailingReport, `走航车日报.docx`)
      } else {
        this.$message('参数缺失！')
      }
    },
    // 上传图片
    submitImgs() {
      // 弹框隐藏
      this.openBox = false
      this.numList = [this.fileLists[0].length, this.fileLists[1].length, this.fileLists[2].length, this.fileLists[3].length, this.fileLists[4].length, this.fileLists[5].length, this.fileLists[6].length, this.fileLists[7].length, this.fileLists[8].length]
      console.log(this.numList, 'this.numList')
      this.upTime = this.newTime(this.value2, 'submit')
      const formData = new FormData()
      formData.append(`code`, this.cityOptions)
      formData.append(`time`, this.upTime)
      formData.append(`mac`, this.carInput2)
      this.fileLists.map(v => {
        v.map(item => {
          formData.append(`files`, item.raw)
      if(this.equipChoose2 === 'car') {
        this.tableData = []
        this.isDisplay = true
        this.numList = [this.fileLists[0].length, this.fileLists[1].length, this.fileLists[2].length, this.fileLists[3].length, this.fileLists[4].length, this.fileLists[5].length, this.fileLists[6].length, this.fileLists[7].length, this.fileLists[8].length]
        var num = 0
        this.numList.map(v => {
          if (v > 0) {
            num++
          }
        })
      })
      // this.MultipartFile(formData).then(res => {
      //   console.log(res)
      //   if (res.code === 0) {
      //     this.$message({
      //       message: '提交成功！',
      //       type: 'success'
      //     })
      //     var reportInfo = res.data
      //     this.value1 = [this.value2, this.value2]
      //     reportInfo.name = '高新区走航监测报告' + reportInfo.time.split('-').join('')
      //     this.tableData = [reportInfo]
      //   } else {
      //     this.$message.error('提交失败！')
      //   }
      // }).catch(err => {
      //   console.log(err)
      // })
        if (this.cityOptions2 && this.value2.length === 2 && this.equipChoose2 && this.carInput2 && this.areaInput3 && this.isDisplay && (num === 0 || num === this.fileLists.length)) {
          this.upTime = this.newTime(this.value2, 'submit')
          const formData = new FormData()
          formData.append(`code`, this.cityChoose2)
          formData.append(`type`, this.equipChoose2)
          formData.append(`mac`, this.carInput2)
          formData.append(`area`, this.areaInput3)
          formData.append(`time1`, this.upTime[0])
          formData.append(`time2`, this.upTime[1])
          var upTime2 = []
          var upTime3 = []
          if (this.dateTime2 === 'block' && this.value3.length) { // 第二个日期时间控件
            upTime2 = this.newTime(this.value3, 'submit')
            formData.append(`time3`, upTime2[0])
            formData.append(`time4`, upTime2[1])
          }
          if (this.dateTime3 === 'block' && this.value4.length) { // 第三个日期时间控件
            upTime3 = this.newTime(this.value4, 'submit')
            formData.append(`time5`, upTime3[0])
            formData.append(`time6`, upTime3[1])
          }
          this.fileLists.map(v => {
            v.map(item => {
              formData.append(`files`, item.raw)
            })
          })
          // 弹框隐藏
          this.openBox = false
          this.MultipartFile(formData).then(res => {
            this.isDisplay = false
            if (res.code === 0) {
              this.$message({
                message: '提交成功！',
                type: 'success'
              })
              var s = new Date(res.data.time) // 标准时间转中国标准时间
              this.value1 = [s, s]
              this.carInput = this.carInput2
              var reportInfo = res.data
              reportInfo.name = '高新区走航监测报告' + reportInfo.time.split('-').join('')
              this.tableData = [reportInfo]
            } else if (res.code === -47) {
              this.$message(res.message)
            } else {
              this.$message.error('提交失败！')
            }
          }).catch(err => {
            console.log(err)
            this.isDisplay = false
          })
        } else {
          this.isDisplay = false
          this.$message('缺失参数！')
        }
      }
    },
    // 提交文件后台接口
    MultipartFile(data) {
      return this.$request({
        url: '',
        url: '/cruiser/getDaily',
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加
        data
@@ -390,30 +631,158 @@
    // 下载报告
    expReport(obj) {
      this.$request({
        url: '',
        url: '/cruiser/loadDaily',
        method: 'get',
        params: {
          id: obj.id
        }
      }).then(res => {
        console.log(res)
        const baseUrl = `${requestObj.baseUrl}/static/img/`
        var imagesObj = res.data.images
        this.sailingReport = { ...this.sailingReport, ...res.data.code }
        // const url1 = `http://47.99.64.149:8081//static/img/7f633687-8321-4f89-bffc-9a52f94cfb77.jpg`
        if (imagesObj) {
          for (let i = 0; i < imagesObj.length; i++) {
            this.sailingReport.fileLists[i] = [{ url: baseUrl + imagesObj[i] }]
          }
        }
        this.sailingReport.index = imagesObj.length
        var data2 = obj.date.split('-')
        this.sailingReport.date2 = data2[0] + '年' + data2[1] + '月' + data2[2] + '日'
        var time = []
        for (let i = 0; i < res.data.code.time.length; i++) {
          time.push(res.data.code.time[i])
        }
        this.sailingReport.time0 = time[0]
        if (time.length === 2) {
          this.sailingReport.time1 = time[1]
        }
        if (time.length === 3) {
          this.sailingReport.time1 = time[1]
          this.sailingReport.time2 = time[2]
        }
        exportDocx('/sailingReport.docx', this.sailingReport, `${obj.name}.docx`)
      }).catch(err => {
        console.log(err)
      })
      exportDocx('/sailingReport.docx', this.sailingReport, `高新区走航监测报告.docx`)
    },
    // 上传按钮
    upImgBtn() {
      this.openBox = true
      this.isDisplay = false
    },
    // 添加或删除一个时间控件
    addDate(name) {
      if (name === 'add') { // 加
        if (this.dateTime2 === 'none') { // 调出dateTime2
          this.dateTime2 = 'block'
          this.value3 = [new Date(), new Date()]
          this.isDisMinus = false
        } else if (this.dateTime2 === 'block' && this.dateTime3 === 'none') { // 调出dateTime3
          this.dateTime3 = 'block'
          this.value4 = [new Date(), new Date()]
          this.isDidAdd = true
        } else { // dateTime2和dateTime3都已出现
          this.isDidAdd = true
        }
      } else { // 减
        if (this.dateTime3 === 'block') {
          this.dateTime3 = 'none'
          this.isDidAdd = false
          this.value4 = []
        } else if (this.dateTime3 === 'none' && this.dateTime2 === 'block') {
          this.value3 = []
          this.dateTime2 = 'none'
          this.isDisMinus = true
        } else { // dateTime2和dateTime3都已经隐藏
          this.isDisMinus = true
          this.isDidAdd = false
        }
      }
    },
    // value2改变判断是否有value3和value4
    value2Change(e) {
      var time2 = []
      var time3 = []
      var time4 = []
      if (this.value2 !== null) {
        if (this.value3.length && this.value4.length) { // value3和value4都存在
          for (let i = 0; i < 2; i++) {
            time2.push(e[i].getTime())
            time3.push(this.value3[i].getTime())
            time4.push(this.value4[i].getTime())
          }
          if (!(time2[0] > time4[1] || time2[1] < time4[0]) || !(time2[0] > time3[1] || time2[1] < time3[0])) { // 不合格
            this.value2 = []
            this.$message('请选择没有重叠的时间段')
          }
        } else if (this.value3.length) { // 只有value3存在
          for (let i = 0; i < 2; i++) {
            time3.push(this.value3[i].getTime())
            time2.push(e[i].getTime())
          }
          if (!(time2[0] > time3[1] || time2[1] < time3[0])) { // 不合格
            this.value2 = []
            this.$message('请选择没有重叠的时间段')
          }
        } else if (this.value4.length) { // 只有value3存在
          for (let i = 0; i < 2; i++) {
            time4.push(this.value4[i].getTime())
            time2.push(e[i].getTime())
          }
          if (!(time2[0] > time4[1] || time2[1] < time4[0])) { // 不合格
            this.value2 = []
            this.$message('请选择没有重叠的时间段')
          }
        }
      }
    },
    // value3改变时判断是否在value2区间内,前提：value2存在
    value3Change(e) {
      if (this.value3 !== null) {
        if (this.value2.length) {
          var time2 = []
          var time3 = []
          for (let i = 0; i < 2; i++) {
            time3.push(e[i].getTime())
            time2.push(this.value2[i].getTime())
          }
          if (!(time3[0] > time2[1] || time3[1] < time2[0])) { // 不合格
            this.value3 = []
            this.$message('请选择没有重叠的时间段')
          }
        } else {
          this.value3 = []
          this.$message('请先选择第一段时间')
        }
      }
    },
    // value4改变时判断是否在value2和value3区间内
    value4Change(e) {
      if (this.value4 !== null) {
        if (this.value2.length && this.value3.length) {
          var time2 = []
          var time3 = []
          var time4 = []
          for (let i = 0; i < 2; i++) {
            time2.push(this.value2[i].getTime())
            time3.push(this.value3[i].getTime())
            time4.push(this.value4[i].getTime())
          }
          if (!(time4[0] > time2[1] || time4[1] < time2[0]) || !(time4[0] > time3[1] || time4[1] < time3[0])) { // 不合格
            this.value4 = []
            this.$message('请选择没有重叠的时间段')
          }
        } else {
          this.value4 = []
          this.$message('请先选择第一、二段时间')
        }
      }
    },
    // 时间处理函数（日期带0）
    newTime(timeArr, name) {
      var arr = []
      if (name === 'submit') {
        var date = new Date(timeArr)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        var d = date.getDate()
        d = d < 10 ? '0' + d : d
        return y + '-' + m + '-' + d
      } else {
        var arr = []
        timeArr.map(v => {
          var date = new Date(v)
          var y = date.getFullYear()
@@ -428,99 +797,116 @@
          var s = date.getSeconds()
          s = s < 10 ? '0' + s : s
          arr.push(y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s)
          // arr.push(y + '-' + m + '-' + d)
        })
        return arr
      } else {
        timeArr.map(v => {
          var date = new Date(v)
          var y = date.getFullYear()
          var m = date.getMonth() + 1
          m = m < 10 ? '0' + m : m
          var d = date.getDate()
          d = d < 10 ? '0' + d : d
          arr.push(y + '-' + m + '-' + d)
        })
        return arr
      }
    },
    // 图片转base64函数
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        var reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },
    // 限制一天
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 上传文件到upload
    handleChange1(file, fileList) {
      console.log(file, fileList)
      // console.log(file, fileList)
      this.fileList1 = fileList
      this.fileLists[0] = fileList
      // this.getBase64(file.raw).then(res => {
      //   console.log(res)
      // })
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList)
      this.fileList1 = fileList
      this.fileLists[0] = fileList
    },
    handleChange2(file, fileList) {
      console.log(file, fileList)
      this.fileList2 = fileList
      this.fileLists[1] = fileList
    },
    handleRemove2(file, fileList) {
      console.log(file, fileList)
      this.fileList2 = fileList
      this.fileLists[1] = fileList
    },
    handleChange3(file, fileList) {
      console.log(file, fileList)
      this.fileList3 = fileList
      this.fileLists[2] = fileList
    },
    handleRemove3(file, fileList) {
      console.log(file, fileList)
      this.fileList3 = fileList
      this.fileLists[2] = fileList
    },
    handleChange4(file, fileList) {
      console.log(file, fileList)
      this.fileList4 = fileList
      this.fileLists[3] = fileList
    },
    handleRemove4(file, fileList) {
      console.log(file, fileList)
      this.fileList4 = fileList
      this.fileLists[3] = fileList
    },
    handleChange5(file, fileList) {
      console.log(file, fileList)
      this.fileList5 = fileList
      this.fileLists[4] = fileList
    },
    handleRemove5(file, fileList) {
      console.log(file, fileList)
      this.fileList5 = fileList
      this.fileLists[4] = fileList
    },
    handleChange6(file, fileList) {
      console.log(file, fileList)
      this.fileList6 = fileList
      this.fileLists[5] = fileList
    },
    handleRemove6(file, fileList) {
      console.log(file, fileList)
      this.fileList6 = fileList
      this.fileLists[5] = fileList
    },
    handleChange7(file, fileList) {
      console.log(file, fileList)
      this.fileList7 = fileList
      this.fileLists[6] = fileList
    },
    handleRemove7(file, fileList) {
      console.log(file, fileList)
      this.fileList7 = fileList
      this.fileLists[6] = fileList
    },
    handleChange8(file, fileList) {
      console.log(file, fileList)
      this.fileList8 = fileList
      this.fileLists[7] = fileList
    },
    handleRemove8(file, fileList) {
      console.log(file, fileList)
      this.fileList8 = fileList
      this.fileLists[7] = fileList
    },
    handleChange9(file, fileList) {
      console.log(file, fileList)
      this.fileList9 = fileList
      this.fileLists[8] = fileList
    },
    handleRemove9(file, fileList) {
      console.log(file, fileList)
      this.fileList9 = fileList
      this.fileLists[8] = fileList
    }
@@ -637,5 +1023,12 @@
}
.openTop>div{
  margin-right: 15px;
  margin-bottom: 15px;
}
.dateTimeBox>div{
  margin-bottom: 10px;
}
.innerDialog /deep/ .el-dialog__body{
  height: 90%;
}
</style>