fix:断线监控

quanyawei

2024-02-02 e635b5b4edab0a000a0af533b6b36f7300c5fa42

 src/views/sectionReport/index.vue

@@ -8,8 +8,7 @@
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
          />
        </el-select>
      </div>
      <div>
@@ -19,8 +18,7 @@
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
          />
        </el-select>
      </div>
      <div>
@@ -35,8 +33,7 @@
            :key="index"
            :label="item.name"
            :value="item.mac"
          >
          </el-option>
          />
        </el-select>
      </div>
      <div class="block">
@@ -47,38 +44,39 @@
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </div>
      <div>
        <el-button type="primary" @click="selectReport">查询</el-button>
        <el-button type="primary" @click="selectReport"> 查询 </el-button>
      </div>
      <div>
        <!-- <el-button type="primary" @click="exportword">导出word</el-button> -->
        <el-button type="primary" @click="exportword"> 导出word </el-button>
      </div>
    </div>
    <el-dialog title="路段超标值" :visible.sync="dialogVisible" width="60%">
      <div style="margin-top: 1rem">
        <el-table :data="tableData1.slice((this.PageNum-1)*PageSize,PageNum*PageSize)" style="width: 100%">
          <el-table-column type="index" width="180" label="序号">
          </el-table-column>
          <el-table-column label="道路" prop="road"> </el-table-column>
          <el-table-column label="平均尘负荷(克/平方米)" prop="value">
          </el-table-column>
        <el-table
          :data="
            tableData1.slice((this.PageNum - 1) * PageSize, PageNum * PageSize)
          "
          style="width: 100%"
        >
          <el-table-column type="index" width="180" label="序号" />
          <el-table-column label="道路" prop="road" />
          <el-table-column label="平均尘负荷(克/平方米)" prop="value" />
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="PageNum"
          :page-size="PageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <el-upload
          class="upload-demo"
          ref="upload"
          class="upload-demo"
          action=""
          :on-change="handleChange"
          :on-remove="handleRemove"
@@ -87,31 +85,31 @@
          :limit="10"
          style="margin-top: 1rem"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <el-button slot="trigger" size="small" type="primary">
            选取文件
          </el-button>
          <div slot="tip" class="el-upload__tip" style="color: red">
            上传路段图片（可选可不选,图片大小低于1MB）
          </div>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="isDisplay" @click="baoC"
          >下载</el-button
        >
        <el-button @click="dialogVisible = false"> 取 消 </el-button>
        <el-button type="primary" :disabled="isDisplay" @click="baoC">
          下载
        </el-button>
      </div>
    </el-dialog>
    <el-table
      :data="tableData"
      style="width: 100%; overflow-y: auto; height: 82%"
    >
      <el-table-column prop="time" label="报告名称"> </el-table-column>
      <el-table-column prop="time" label="报告名称" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="medium" @click="expReport(scope.row)"
            >下载</el-button
          >
          <el-button type="text" size="medium" @click="expReport(scope.row)">
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
@@ -131,7 +129,7 @@
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
  data () {
    //这里存放数据
    return {
      date: this.dateTypeFormat('YYYY-mm-dd', new Date()),
@@ -164,7 +162,6 @@
        fileLists: [[], []],
        index: 0,
        num: 0,
        fileList: [],
        date: '',
        time: '',
        list1: [],
@@ -179,7 +176,7 @@
          // 最大时间  最小时间
          this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期
          // // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.timeOne = ''
          if (maxDate) { this.timeOne = '' }
        },
        disabledDate: (time) => {
          if (this.timeOne) {
@@ -195,6 +192,7 @@
            return time.getTime() > new Date()
          }
        },
        reportName: '',
      },
    }
  },
@@ -202,15 +200,38 @@
  computed: {},
  // 监控data中的数据变化
  watch: {
    value1(n, o) {
    value1 (n, o) {
      if (n === null) {
        this.value1 = []
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created () {
    this.$request({
      url: 'cruiser/selectCruisers',
      method: 'get',
    })
      .then((res) => {
        this.carMac = res.data
      })
      .catch((err) => {
        console.log(err)
      })
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { },
  //方法集合
  methods: {
    baoC() {
    baoC () {
      this.valueDate.fileLists = []
      // const baseUrl = `${requestObj.baseUrl}/static/img/`
      // var images = [
      //   ['7f633687-8321-4f89-bffc-9a52f94cfb77.jpg'],
@@ -244,9 +265,11 @@
      //     this.valueDate.fileLists[i] = [{ url: baseUrl + imagesObj[i] }]
      //   }
      // }

      const formData = new FormData()
      formData.append(`id`, this.id)
      formData.append(`mac`, this.carInput)
      formData.append(`time1`, this.value1[0])
      formData.append(`time2`, this.value1[1])
      this.fileList.map((v) => {
        formData.append(`files`, v.raw)
        console.log(v.raw)
@@ -257,88 +280,120 @@
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加
        data: formData,
      }).then((res) => {
        console.log(res)
        // this.valueDate=res.data
        const baseUrl = `${requestObj.baseUrl}static/img/`
        if (res.data.images === null) {
          var images = [[], []]
        } else if (res.data.images.file2 === '') {
          res.data.images.file2 = []
          var images = [[res.data.images.file1], res.data.images.file2]
        } else if (res.data.images.file1 === '') {
          res.data.images.file1 = []
          var images = [res.data.images.file1, res.data.images.file2.split(',')]
        } else {
          var images = [
            [res.data.images.file1],
            res.data.images.file2.split(','),
          ]
        }
        console.log(images)
        var info = 0
        var num = 0
        for (let i = 0; i < images.length; i++) {
          console.log(images)
          if (!this.valueDate.fileLists[i]) this.valueDate.fileLists[i] = []
          if (images[i].length) {
            num++
            info += images[i].length
            for (let j = 0; j < images[i].length; j++) {
              this.valueDate.fileLists[i].push(baseUrl + images[i][j])
              console.log(baseUrl + images[i][j])
      })
        .then((res) => {
          console.log(res)
          // this.valueDate=res.data
          const baseUrl = `${requestObj.baseUrl}/static/img/`
          if (res.data.images.file2 === '' && res.data.images.file1 === '') {
            res.data.images.file1 = []
            res.data.images.file2 = []
            var images = [res.data.images.file1, res.data.images.file2]
          } else if (res.data.images.file2 === '') {
            res.data.images.file2 = []
            var images = [[res.data.images.file1], res.data.images.file2]
          } else if (res.data.images.file1 === '') {
            res.data.images.file1 = []
            var images = [res.data.images.file1, res.data.images.file2.split(',')]
          } else {
            var images = [
              [res.data.images.file1],
              res.data.images.file2.split(','),
            ]
          }
          var info = 0
          var num = 0
          for (let i = 0; i < images.length; i++) {
            // console.log(images)
            if (!this.valueDate.fileLists[i]) { this.valueDate.fileLists[i] = [] }
            if (images[i].length) {
              num++
              info += images[i].length
              for (let j = 0; j < images[i].length; j++) {
                this.valueDate.fileLists[i].push(baseUrl + images[i][j])
                console.log(baseUrl + images[i][j])
              }
            }
          }
        }
        res.data.list1.map((item, index) => {
          item.index = index + 1
          // images=[]
          console.log(this.valueDate.fileLists, 'images')
          res.data.list1.map((item, index) => {
            item.index = index + 1
          })
          res.data.list2.map((item, index) => {
            item.index = index + 1
          })
          this.valueDate.index = info
          this.valueDate.num = num
          this.valueDate.date = this.date
          this.valueDate.list1 = res.data.list1
          this.valueDate.list2 = res.data.list2
          this.valueDate.time = res.data.time
          exportLUImage(
            '/Section.docx',
            this.valueDate,
            `${this.reportName}.docx`
          )
        })
        res.data.list2.map((item, index) => {
          item.index = index + 1
        })
        this.valueDate.index = info
        this.valueDate.num = num
        this.valueDate.date = this.date
        this.valueDate.list1 = res.data.list1
        this.valueDate.list2 = res.data.list2
        this.valueDate.time = res.data.time
        console.log(this.valueDate, 'this.valueDate')
        exportLUImage('/Section.docx', this.valueDate, `尘负荷走航车报告.docx`)
      })
    },
    handleRemove(file, fileList) {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handleChange(file, fileList) {
    handleChange (file, fileList) {
      // console.log(file);
      this.file = file
      this.fileList = fileList
      console.log(this.fileList)
    },
    handleSizeChange(size) {
      this.PageNum = 1;
    handleSizeChange (size) {
      this.PageNum = 1
      this.PageSize = size
    },
    handleCurrentChange(num) {
    handleCurrentChange (num) {
      this.PageNum = num
    },
    openPic() {
    openPic () {
      this.dialogVisible = true
    },

    handleImgToBase64(url, cb) {
      var image = new Image()
      image.crossOrigin = '*'
      image.src = url
      image.onload = function () {
        const base64 = imageToBase64(image) // 图片转base64
        const file = base64ToFile(base64, +new Date() + '.png') // base64转File
        // 根据自身需求调整【因个人项目逻辑不一样，这里使用回调函数】
        cb && typeof cb === 'function' && cb(file)
        return file
    exportword () {
      if (this.carInput === '') {
        this.$message('请选择走航车')
        return false
      }
      this.dateList = []
      this.columnList = []
      this.$request({
        url: 'cruiser/dailyDustlds',
        method: 'post',
        data: {
          mac: this.carInput,
          startTime: this.value1[0],
          endTime: this.value1[1],
        },
        responseType: 'blob',
      })
        .then((res) => {

          this.getOutExcel('走航报告', res)

        })
        .catch(res => {
          this.$message(res.message)
        })
    },
    selectReport() {
      if (this.carInput == '') {
    getOutExcel (fileName, res) {
      let blob = new Blob([res], {
        type: `application/msword`, //word文档为msword,pdf文档为pdf
      })
      let objectUrl = URL.createObjectURL(blob)
      let link = document.createElement('a')
      link.href = objectUrl
      link.setAttribute('download', fileName)
      document.body.appendChild(link)
      link.click()
    },
    selectReport () {
      if (this.carInput === '') {
        this.$message('请选择走航车')
        return false
      }
@@ -353,7 +408,7 @@
        },
      })
        .then((res) => {
          console.log(res)
          // console.log(res)
          this.tableData = res
          var info = res.data
          // console.log(info.length);
@@ -365,7 +420,14 @@
          info.map((v) => {
            console.log(v)
            var time = v.time.substring(0, 10)
            v.time = `道路积尘负荷走航监测报告${time}`
              .split('-')
              .join('')
            if (this.cityChoose === 'gx') {
              v.time = `苏州高新区道路积尘负荷走航监测报告${time}`
            } else {
              v.time = `道路积尘负荷走航监测报告${time}`
            }
            this.reportName = v.time
          })
          this.tableData = info
        })
@@ -374,7 +436,7 @@
        })
    },

    expReport(obj) {
    expReport (obj) {
      console.log(obj)
      this.dialogVisible = true
      this.id = obj.id
@@ -384,14 +446,15 @@
        params: {
          id: obj.id,
        },
      }).then((res) => {
        console.log(res)
        this.tableData1 = res.data.list
        this.total = res.data.count
        // console.log(this.pagesize)
      })
        .then((res) => {
          // console.log(res)
          this.tableData1 = res.data.list
          this.total = res.data.count
          // console.log(this.pagesize)
        })
    },
    getBase64(file) {
    getBase64 (file) {
      return new Promise(function (resolve, reject) {
        var reader = new FileReader()
        let imgResult = ''
@@ -407,29 +470,7 @@
        }
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.$request({
      url: 'cruiser/selectCruisers',
      method: 'get',
    })
      .then((res) => {
        this.carMac = res.data
      })
      .catch((err) => {
        console.log(err)
      })
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
@@ -448,4 +489,4 @@
/deep/.el-upload-list__item {
  width: 30%;
}
</style>
</style>