修改报表统计

src/api/request.js

@@ -34,7 +34,7 @@ export function getbuttonstat() {//获取按钮状态
 }
 export function alarmInformation() {//告警信息
   return Service({
-    url: '/Framework/AlarmPlc/GetAlarmList?value=false',
+    url: '/Framework/AlarmPlc/GetAlarmList?value=false&number=10',
     method: 'get'
   })
 }
@@ -150,7 +150,7 @@ export function Reboot() {//系统重启
 }
 export function Dborder(data) {//报表统计
   return Service({
-    url: '/dborder1',
+    url: '/Framework/IDSInfo/StatisticsInfo',
     method: 'get',
     params: data
   })

src/pages/Alarm/History/index.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { Dbalarm } from "../../../api/request.js";
+import { Dbalarm } from "@/api/request.js";
 import FileSaver from "file-saver";
 import XLSX from "xlsx";
 export default {

src/pages/ReportStatistics/index.vue

@@ -1,499 +1,674 @@
 <template>
-	<div class="Report">
-		<div class="border_left_top border"></div>
-		<div class="border_top border"></div>
-		<div class="border_right_top border"></div>
-		<div class="border_left border"></div>
-		<div class="border_right border"></div>
-		<div class="border_left_bottom border"></div>
-		<div class="border_bottom border"></div>
-		<div class="border_right_bottom border"></div>
-		<el-button-group id="topButton2">
-			<el-button type="primary" :class="{'active2':isActive==1}" @click='getToday'>今日</el-button>
-			<el-button type="primary" :class="{'active':isActive==2}" @click='getWeek'>本周</el-button>
-			<el-button type="primary" :class="{'active':isActive==3}" @click='getMonth'>本月</el-button>
-			<!-- <el-button type="primary" :class="{'active':isActive==3}" @click='getMonth'>本月</el-button>
+  <div class="Report">
+    <div class="border_left_top border"></div>
+    <div class="border_top border"></div>
+    <div class="border_right_top border"></div>
+    <div class="border_left border"></div>
+    <div class="border_right border"></div>
+    <div class="border_left_bottom border"></div>
+    <div class="border_bottom border"></div>
+    <div class="border_right_bottom border"></div>
+    <el-button-group id="topButton2">
+      <el-button
+        type="primary"
+        :class="{ active2: isActive == 1 }"
+        @click="getToday"
+        >今日</el-button
+      >
+      <el-button
+        type="primary"
+        :class="{ active: isActive == 2 }"
+        @click="getWeek"
+        >本周</el-button
+      >
+      <el-button
+        type="primary"
+        :class="{ active: isActive == 3 }"
+        @click="getMonth"
+        >本月</el-button
+      >
+      <!-- <el-button type="primary" :class="{'active':isActive==3}" @click='getMonth'>本月</el-button>
 			<el-button type="primary" :class="{'active':isActive==3}" @click='getMonth'>本月</el-button> -->
-		</el-button-group>
-		<template>
-			<el-date-picker v-model="dateMan" @change="serachDate" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
-			 value-format="yyyy-MM-dd" :default-time="['00:00:00']" style="margin-bottom: 10px;">
-			</el-date-picker>
-		</template>
-		<div class="downlodTable" @click="downlodTable">导出</div>
-		<el-table :data="tableData" id="userTableData" style="width: 100%;color: #2DAFF5;;">
-			<el-table-column prop="nickname" align="center" label="车辆名称" width="200px">
-			</el-table-column>
-			<el-table-column prop="work_order_count" align="center" label="执行订单数">
-			</el-table-column>
-			<el-table-column prop="avg_execution_time" align="center" label="订单执行平均时长（S）">
-			</el-table-column>
-			<el-table-column prop="avg_response_time" align="center" label="订单响应平均时长（S）">
-			</el-table-column>
-			<el-table-column prop="failure_count" align="center" label="失败(异常)订单数">
-			</el-table-column>
-			<el-table-column prop="free_seconds" align="center" label="车辆空闲时间（S）">
-			</el-table-column>
-			<el-table-column prop="battery_use_cycles" align="center" label="充电次数">
-			</el-table-column>
-		</el-table>
-		
-		<el-table :data="tableData" id="userTableData2" style="color: #2DAFF5;" v-show="false">
-			<el-table-column prop="average_count" align="center" label="有效订单完成订单数"></el-table-column>
-			<el-table-column prop="avg_execution_time" align="center" label="订单平均完成时间(单位秒)"></el-table-column>
-			<el-table-column prop="avg_response_time" align="center" label="订单平均响应时间(单位秒)"></el-table-column>
-			<el-table-column prop="battery_use_cycles" align="center" label="车辆电池循环次数"></el-table-column>
-			<el-table-column prop="cancellation_count" align="center" label="取消订单数"></el-table-column>
-			<el-table-column prop="charge_seconds" align="center" label="车辆充电时间(单位秒)"></el-table-column>
-			<el-table-column prop="completion_count" align="center" label="订单完成总数"></el-table-column>
-			<el-table-column prop="delete_count" align="center" label="删除订单数"></el-table-column>
-			<el-table-column prop="exception_times" align="center" label="车辆异常次数"></el-table-column>
-			<el-table-column prop="execution_count" align="center" label="正在执行订单数"></el-table-column>
-			<el-table-column prop="failure_count" align="center" label="失败(异常)订单数"></el-table-column>
-			<el-table-column prop="free_seconds" align="center" label="车辆空闲时间(单位秒)"></el-table-column>
-			<el-table-column prop="group_by" align="center" label="统计维度"></el-table-column>
-			<el-table-column prop="hang_count" align="center" label="挂起订单数"></el-table-column>	
-			<el-table-column prop="interval_time" align="center" label="统计时间范围(单位秒)"></el-table-column>
-			<el-table-column prop="metrics_type" align="center" label="统计粒度"></el-table-column>
-			<el-table-column prop="mileage" align="center" label="车辆运行里程数(单位千米)"></el-table-column>
-			<el-table-column prop="nickname" align="center" label="车辆名称"></el-table-column>
-			<el-table-column prop="online_seconds" align="center" label="车辆开机时间(单位秒)"></el-table-column>
-			<el-table-column prop="pause_count" align="center" label="暂停订单数"></el-table-column>
-			<el-table-column prop="queue_count" align="center" label="队列中订单数"></el-table-column>
-			<el-table-column prop="response_count" align="center" label="有效订单响应订单数"></el-table-column>
-			<el-table-column prop="statistics_time" align="center" label="统计时间"></el-table-column>
-			<el-table-column prop="sys_completion_count" align="center" label="调度订单完成数"></el-table-column>
-			<el-table-column prop="sys_order_count" align="center" label="执行调度订单数"></el-table-column>
-			<el-table-column prop="vehicle_id" align="center" label="车辆Id编号"></el-table-column>
-			<el-table-column prop="work_completion_count" align="center" label="工作订单完成数"></el-table-column>
-			<el-table-column prop="work_order_count" align="center" label="执行工作订单数"></el-table-column>
-		</el-table>
-	</div>
+    </el-button-group>
+    <template>
+      <el-date-picker
+        v-model="dateMan"
+        @change="serachDate"
+        type="datetimerange"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        :default-time="['00:00:00']"
+        style="margin-bottom: 10px"
+      >
+      </el-date-picker>
+    </template>
+    <div class="downlodTable" @click="downlodTable">导出</div>
+    <el-table
+      :data="tableData"
+      id="userTableData"
+      style="width: 100%; color: #2daff5"
+    >
+      <el-table-column
+        prop="nickname"
+        align="center"
+        label="车辆名称"
+        width="200px"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="work_order_count"
+        align="center"
+        label="执行订单数"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="avg_execution_time"
+        align="center"
+        label="订单执行平均时长（S）"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="avg_response_time"
+        align="center"
+        label="订单响应平均时长（S）"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="failure_count"
+        align="center"
+        label="失败(异常)订单数"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="free_seconds"
+        align="center"
+        label="车辆空闲时间（S）"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="battery_use_cycles"
+        align="center"
+        label="充电次数"
+      >
+      </el-table-column>
+    </el-table>
+
+    <el-table
+      :data="tableData"
+      id="userTableData2"
+      style="color: #2daff5"
+      v-show="false"
+    >
+      <el-table-column
+        prop="average_count"
+        align="center"
+        label="有效订单完成订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="avg_execution_time"
+        align="center"
+        label="订单平均完成时间(单位秒)"
+      ></el-table-column>
+      <el-table-column
+        prop="avg_response_time"
+        align="center"
+        label="订单平均响应时间(单位秒)"
+      ></el-table-column>
+      <el-table-column
+        prop="battery_use_cycles"
+        align="center"
+        label="车辆电池循环次数"
+      ></el-table-column>
+      <el-table-column
+        prop="cancellation_count"
+        align="center"
+        label="取消订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="charge_seconds"
+        align="center"
+        label="车辆充电时间(单位秒)"
+      ></el-table-column>
+      <el-table-column
+        prop="completion_count"
+        align="center"
+        label="订单完成总数"
+      ></el-table-column>
+      <el-table-column
+        prop="delete_count"
+        align="center"
+        label="删除订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="exception_times"
+        align="center"
+        label="车辆异常次数"
+      ></el-table-column>
+      <el-table-column
+        prop="execution_count"
+        align="center"
+        label="正在执行订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="failure_count"
+        align="center"
+        label="失败(异常)订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="free_seconds"
+        align="center"
+        label="车辆空闲时间(单位秒)"
+      ></el-table-column>
+      <el-table-column
+        prop="group_by"
+        align="center"
+        label="统计维度"
+      ></el-table-column>
+      <el-table-column
+        prop="hang_count"
+        align="center"
+        label="挂起订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="interval_time"
+        align="center"
+        label="统计时间范围(单位秒)"
+      ></el-table-column>
+      <el-table-column
+        prop="metrics_type"
+        align="center"
+        label="统计粒度"
+      ></el-table-column>
+      <el-table-column
+        prop="mileage"
+        align="center"
+        label="车辆运行里程数(单位千米)"
+      ></el-table-column>
+      <el-table-column
+        prop="nickname"
+        align="center"
+        label="车辆名称"
+      ></el-table-column>
+      <el-table-column
+        prop="online_seconds"
+        align="center"
+        label="车辆开机时间(单位秒)"
+      ></el-table-column>
+      <el-table-column
+        prop="pause_count"
+        align="center"
+        label="暂停订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="queue_count"
+        align="center"
+        label="队列中订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="response_count"
+        align="center"
+        label="有效订单响应订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="statistics_time"
+        align="center"
+        label="统计时间"
+      ></el-table-column>
+      <el-table-column
+        prop="sys_completion_count"
+        align="center"
+        label="调度订单完成数"
+      ></el-table-column>
+      <el-table-column
+        prop="sys_order_count"
+        align="center"
+        label="执行调度订单数"
+      ></el-table-column>
+      <el-table-column
+        prop="vehicle_id"
+        align="center"
+        label="车辆Id编号"
+      ></el-table-column>
+      <el-table-column
+        prop="work_completion_count"
+        align="center"
+        label="工作订单完成数"
+      ></el-table-column>
+      <el-table-column
+        prop="work_order_count"
+        align="center"
+        label="执行工作订单数"
+      ></el-table-column>
+    </el-table>
+  </div>
 </template>
 
 <script>
-	import {
-		Dborder,
-		getAvragetime
-	} from '@/api/request.js'
-	import FileSaver from "file-saver";
-	import XLSX from "xlsx";
-
-	export default {
-		name: "ReportStatistics",
-		data() {
-			return {
-				stime: {
-					sum1: 30,
-					sum2: 40,
-					sum3: 50,
-					sum4: 25
-				},
-				value1: "",
-				startTime: '',
-				dateMan: '',
-				endTime: '',
-				isActive: 1,
-				reqData: {
-					begin: '2020-05-06',
-					end: '2020-11-31',
-				},
-				tableData: []
-			}
-		},
-		created() {
-			// this.getDates()
-		},
-		mounted() {
-			this.getDates()
-		},
-		methods: {
-			getData() { //获取接口数据
-				let data = this.reqData;
-				Dborder(data).then(res => {
-					console.log(res.StatisticInfo)
-					let TOdata = res.data.ORDER[0].VEHICLE;
-					this.tableData = TOdata
-				})
-			},
-			calculate(defeatedOrders, allOrders) { //计算成功率>>完成订单数/总订单数
-				let sum = (defeatedOrders / allOrders).toString();
-				if (sum.slice(0, 1) != 0) {
-					return 100
-				} else if (sum.toString().slice(2, 3) == 0) {
-					return sum.toString().slice(3, 4)
-				} else {
-					return sum.slice(2, 4)
-				}
-			},
-			idelence(allOrders, avetime, online) { //计算空闲率>>(总订单数*订单平均时间)/总上线时间
-				console.log(allOrders, avetime, online)
-				let sum = parseInt(allOrders * avetime) / parseInt(online)
-				console.log(sum)
-				if (sum.toString().slice(0, 1) != 0) {
-					return 100
-				} else if (sum.toString().slice(2, 3) == 0) {
-					return sum.toString().slice(3, 4)
-				} else {
-					return sum.toString().slice(2, 4)
-				}
-			},
-			getDates() { //初始化今天的数据
-				var date = new Date();
-				let m = date.getMonth() + 1;
-				if(m<10){
-					m = "0"+ m
-				}
-				let d = date.getDate();
-				let d2 = date.getDate()+1;
-				if(d<10){
-					d= "0"+d;
-					d2= "0"+d2;
-				}
-				this.reqData.begin = date.getFullYear() + '-' + m + '-' + d +" "+"00:00:00"
-				this.reqData.end = date.getFullYear() + '-' + m + '-' + d2 +" "+"23:59:59"
-				this.getData()
-			},
-			getWeeks() { //获取本周1到今天的数据
-				var now = new Date();
-				var Year = now.getFullYear();
-				var Month = now.getMonth() + 1;
-				var Day = now.getDate() - now.getDay();
-				if (now.getDay() == 0) //星期天表示 0 故当星期天的时候，获取上周开始的时候
-				{
-					Day -= 7;
-				}
-				if(Month<10){
-					Month = "0"+ Month
-				}
-				if(Day<10){
-					Day = "0"+ Day
-				}
-				let m = now.getMonth() + 1;
-				if(m<10){
-					m = "0"+ m
-				}
-				let d = now.getDate();
-				if(d<10){
-					d= "0"+d;
-				}
-				var beginTime = Year + "-" + Month + "-" + Day +" "+"00:00:00"; //格式 Y-m-d
-				this.reqData.begin = beginTime
-				this.reqData.end = now.getFullYear() + '-' + m + '-' + d +" "+"23:59:59"
-				this.getData()
-			},
-			getMonths() { //获取本月开始事件到今天的数据
-				var now = new Date(); //获取当前时间
-				var beginTimes = now.getFullYear(); //开始计算
-				var Month = now.getMonth() + 1; //getMonth()是以0开始的月份
-				if(Month<10){
-					Month = "0"+ Month
-				}
-				let m = now.getMonth() + 1;
-				if(m<10){
-					m = "0"+ m
-				}
-				let d = now.getDate();
-				if(d<10){
-					d= "0"+d;
-				}
-				var beginTimes = beginTimes + "-" + Month + "-01" +" "+"00:00:00"; //格式 Y-m-d
-				this.reqData.begin = beginTimes;
-				this.reqData.end = now.getFullYear() + '-' + m + '-' + d +" "+"23:59:59"
-				this.getData()
-			},
-			serachDate() { //日期范围查询
-				console.log(this.dateMan)
-				this.reqData.begin = this.dateMan[0]+" "+"00:00:00"
-				this.reqData.end = this.dateMan[1] +" "+"23:59:59"
-				this.getData()
-			},
-			goTo() {
-				this.$router.push("/Alarm/RealTime");
-			},
-			getToday() {
-				this.isActive = 1;
-				this.getDates()
-			},
-			getWeek() {
-				this.isActive = 2;
-				this.getWeeks()
-			},
-			getMonth() {
-				this.isActive = 3;
-				this.getMonths()
-			},
-			downlodTable() {
-				this.$confirm('是否需要导出xlsx文档, 是否继续?', '提示', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					this.downFile();
-					this.$message({
-						type: 'success',
-						message: '导出成功!'
-					});
-				}).catch(() => {
-					this.$message({
-						type: 'info',
-						message: '已取消导出'
-					});
-				});
-
-			},
-			downFile() {
-				var wb = XLSX.utils.table_to_book(document.querySelector("#userTableData2"));
-				var wbout = XLSX.write(wb, {
-					bookType: "xlsx",
-					bookSST: true,
-					type: "array"
-				});
-				try {
-					FileSaver.saveAs(
-						new Blob([wbout], {
-							type: "application/octet-stream"
-						}),
-						"报表统计.xlsx"
-					);
-				} catch (e) {
-					if (typeof console !== "undefined") console.log(e, wbout);
-				}
-				return wbout;
-			},
-			//设置指定行、列、具体单元格颜色
-			cellStyle({
-				row,
-				column,
-				rowIndex,
-				columnIndex
-			}) {
-				if (columnIndex === 0) { //指定坐标rowIndex ：行，columnIndex ：列
-					return 'background:#103366' //rgb(105,0,7)
-				} else {
-					return ''
-				}
-			}
-		}
-	}
+import { Dborder, getAvragetime } from "@/api/request.js";
+import FileSaver from "file-saver";
+import XLSX from "xlsx";
+import { Format } from "@/utilts/utilts.js";
+export default {
+  name: "ReportStatistics",
+  data() {
+    return {
+      stime: {
+        sum1: 30,
+        sum2: 40,
+        sum3: 50,
+        sum4: 25,
+      },
+      value1: "",
+      startTime: "",
+      dateMan: "",
+      endTime: "",
+      isActive: 1,
+      reqData: {
+        begin: "2020-05-06",
+        end: "2020-11-31",
+      },
+      tableData: [],
+    };
+  },
+  created() {
+    // this.getDates()
+  },
+  mounted() {
+    let date = new Date();
+    let arr = new Date(new Date(new Date().toLocaleDateString()).getTime()); //今日0时日期
+    this.reqData.begin = Format("yyyy-MM-dd hh:mm:ss", arr);
+    this.reqData.end = Format("yyyy-MM-dd hh:mm:ss", date);
+    // // 本周一的日期
+    // date.setDate(date.getDate() - date.getDay() + 1);
+    // var begin =
+    //   date.getFullYear() +
+    //   "-" +
+    //   (date.getMonth() + 1) +
+    //   "-" +
+    //   date.getDate() +
+    //   " 00:00:00";
+    // var nowMonth = date.getMonth(); //当前月
+    // var nowYear = date.getFullYear(); //当前年
+    // //本月的开始时间
+    // var monthStartDate = new Date(nowYear, nowMonth, 1);
+    // console.log(Format("yyyy-MM-dd hh:mm:ss", monthStartDate), "111111111111");
+    this.getDates();
+  },
+  methods: {
+    getData() {
+      //获取接口数据
+      let data = this.reqData;
+      Dborder(data).then((res) => {
+        console.log(res.StatisticInfo);
+        let TOdata = res.data.ORDER[0].VEHICLE;
+        this.tableData = TOdata;
+      });
+    },
+    calculate(defeatedOrders, allOrders) {
+      //计算成功率>>完成订单数/总订单数
+      let sum = (defeatedOrders / allOrders).toString();
+      if (sum.slice(0, 1) != 0) {
+        return 100;
+      } else if (sum.toString().slice(2, 3) == 0) {
+        return sum.toString().slice(3, 4);
+      } else {
+        return sum.slice(2, 4);
+      }
+    },
+    idelence(allOrders, avetime, online) {
+      //计算空闲率>>(总订单数*订单平均时间)/总上线时间
+      console.log(allOrders, avetime, online);
+      let sum = parseInt(allOrders * avetime) / parseInt(online);
+      console.log(sum);
+      if (sum.toString().slice(0, 1) != 0) {
+        return 100;
+      } else if (sum.toString().slice(2, 3) == 0) {
+        return sum.toString().slice(3, 4);
+      } else {
+        return sum.toString().slice(2, 4);
+      }
+    },
+    getDates() {
+      //初始化今天的数据
+      var date = new Date();
+      let m = date.getMonth() + 1;
+      if (m < 10) {
+        m = "0" + m;
+      }
+      let d = date.getDate();
+      let d2 = date.getDate() + 1;
+      if (d < 10) {
+        d = "0" + d;
+        d2 = "0" + d2;
+      }
+      this.reqData.begin =
+        date.getFullYear() + "-" + m + "-" + d + " " + "00:00:00";
+      this.reqData.end =
+        date.getFullYear() + "-" + m + "-" + d2 + " " + "23:59:59";
+      this.getData();
+    },
+    getWeeks() {
+      //本周第一天日期
+      let date = new Date();
+      date.setDate(date.getDate() - date.getDay() + 1);
+      var begin =
+        date.getFullYear() +
+        "-" +
+        (date.getMonth() + 1) +
+        "-" +
+        date.getDate() +
+        " 00:00:00";
+      this.reqData.begin = begin;
+      this.reqData.end = Format("yyyy-MM-dd hh:mm:ss", date);
+      this.getData();
+    },
+    getMonths() {
+      //获取本月开始事件到今天的数据
+      var now = new Date(); //获取当前时间
+      var nowMonth = now.getMonth(); //当前月
+      var nowYear = now.getFullYear(); //当前年
+      //本月的开始时间
+      var monthStartDate = new Date(nowYear, nowMonth, 1);
+      this.reqData.begin = Format("yyyy-MM-dd hh:mm:ss", monthStartDate);
+      this.reqData.end = Format("yyyy-MM-dd hh:mm:ss", now);
+      this.getData();
+    },
+    serachDate() {
+      //日期范围查询
+      console.log(this.dateMan);
+      this.reqData.begin = this.dateMan[0] + " " + "00:00:00";
+      this.reqData.end = this.dateMan[1] + " " + "23:59:59";
+      this.getData();
+    },
+    goTo() {
+      this.$router.push("/Alarm/RealTime");
+    },
+    getToday() {
+      this.isActive = 1;
+      this.getDates();
+    },
+    getWeek() {
+      this.isActive = 2;
+      this.getWeeks();
+    },
+    getMonth() {
+      this.isActive = 3;
+      this.getMonths();
+    },
+    downlodTable() {
+      this.$confirm("是否需要导出xlsx文档, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.downFile();
+          this.$message({
+            type: "success",
+            message: "导出成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消导出",
+          });
+        });
+    },
+    downFile() {
+      var wb = XLSX.utils.table_to_book(
+        document.querySelector("#userTableData2")
+      );
+      var wbout = XLSX.write(wb, {
+        bookType: "xlsx",
+        bookSST: true,
+        type: "array",
+      });
+      try {
+        FileSaver.saveAs(
+          new Blob([wbout], {
+            type: "application/octet-stream",
+          }),
+          "报表统计.xlsx"
+        );
+      } catch (e) {
+        if (typeof console !== "undefined") console.log(e, wbout);
+      }
+      return wbout;
+    },
+    //设置指定行、列、具体单元格颜色
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        //指定坐标rowIndex ：行，columnIndex ：列
+        return "background:#103366"; //rgb(105,0,7)
+      } else {
+        return "";
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-	/deep/.el-range-input {
-		cursor: pointer;
-	}
+/deep/.el-range-input {
+  cursor: pointer;
+}
 
-	.Report {
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		position: relative;
-		padding: 4.0625rem 1.5rem 4.0625rem 2.5rem;
-		box-sizing: border-box;
+.Report {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  padding: 4.0625rem 1.5rem 4.0625rem 2.5rem;
+  box-sizing: border-box;
 
-		.border {
-			position: absolute;
-			z-index: 0;
-		}
+  .border {
+    position: absolute;
+    z-index: 0;
+  }
 
-		.border_left_top {
-			width: 18.625rem;
-			height: 5.875rem;
-			background: url(../../assets/img/border2.png);
-			left: 1px;
-			top: 1px;
-		}
+  .border_left_top {
+    width: 18.625rem;
+    height: 5.875rem;
+    background: url(../../assets/img/border2.png);
+    left: 1px;
+    top: 1px;
+  }
 
-		.border_top {
-			width: calc(100% - 18.625rem - 4.9375rem);
-			height: 1.5rem;
-			background: url(../../assets/img/border_top.png) no-repeat center center;
-			background-size: 100% 100%;
-			left: 18.625rem;
-			top: 0;
-		}
+  .border_top {
+    width: calc(100% - 18.625rem - 4.9375rem);
+    height: 1.5rem;
+    background: url(../../assets/img/border_top.png) no-repeat center center;
+    background-size: 100% 100%;
+    left: 18.625rem;
+    top: 0;
+  }
 
-		.border_right_top {
-			width: 4.9375rem;
-			height: 5.875rem;
-			background: url(../../assets/img/border_right_top.png) no-repeat center center;
-			background-size: 100% 100%;
-			right: 0.0625rem;
-			top: 0;
-		}
+  .border_right_top {
+    width: 4.9375rem;
+    height: 5.875rem;
+    background: url(../../assets/img/border_right_top.png) no-repeat center
+      center;
+    background-size: 100% 100%;
+    right: 0.0625rem;
+    top: 0;
+  }
 
-		.border_left {
-			width: 1.375rem;
-			height: calc(100% - 5.875rem - 7.625rem);
-			background: url(../../assets/img/border_left.png) no-repeat center center;
-			background-size: 100% 100%;
-			left: 0;
-			top: 5.875rem;
-		}
+  .border_left {
+    width: 1.375rem;
+    height: calc(100% - 5.875rem - 7.625rem);
+    background: url(../../assets/img/border_left.png) no-repeat center center;
+    background-size: 100% 100%;
+    left: 0;
+    top: 5.875rem;
+  }
 
-		.border_right {
-			width: 0.1875rem;
-			height: calc(100% - 5.875rem - 7.6875rem);
-			background: url(../../assets/img/border_right.png) no-repeat center center;
-			background-size: 100% 100%;
-			right: 0;
-			top: 5.875rem;
-		}
+  .border_right {
+    width: 0.1875rem;
+    height: calc(100% - 5.875rem - 7.6875rem);
+    background: url(../../assets/img/border_right.png) no-repeat center center;
+    background-size: 100% 100%;
+    right: 0;
+    top: 5.875rem;
+  }
 
-		.border_left_bottom {
-			width: 11.625rem;
-			height: 7.625rem;
-			background: url(../../assets/img/border_left_bottom.png) no-repeat center center;
-			background-size: 100% 100%;
-			left: 0;
-			bottom: 0;
-		}
+  .border_left_bottom {
+    width: 11.625rem;
+    height: 7.625rem;
+    background: url(../../assets/img/border_left_bottom.png) no-repeat center
+      center;
+    background-size: 100% 100%;
+    left: 0;
+    bottom: 0;
+  }
 
-		.border_bottom {
-			width: calc(100% - 11.625rem - 4.9375rem);
-			height: 0.1875rem;
-			background: url(../../assets/img/border_bottom.png) no-repeat center center;
-			background-size: 100% 100%;
-			left: 11.625rem;
-			bottom: 0;
-		}
+  .border_bottom {
+    width: calc(100% - 11.625rem - 4.9375rem);
+    height: 0.1875rem;
+    background: url(../../assets/img/border_bottom.png) no-repeat center center;
+    background-size: 100% 100%;
+    left: 11.625rem;
+    bottom: 0;
+  }
 
-		.border_right_bottom {
-			width: 4.9375rem;
-			height: 7.6875rem;
-			background: url(../../assets/img/border_right_bottom.png) no-repeat center center;
-			background-size: 100% 100%;
-			right: 0;
-			bottom: 0;
-		}
+  .border_right_bottom {
+    width: 4.9375rem;
+    height: 7.6875rem;
+    background: url(../../assets/img/border_right_bottom.png) no-repeat center
+      center;
+    background-size: 100% 100%;
+    right: 0;
+    bottom: 0;
+  }
 
-		#topButton2 {
-			position: absolute;
-			top: 8px;
-			left: 8px;
-			z-index: 1;
+  #topButton2 {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: 1;
 
-			button:first-child {
-				border: none;
-				background: url(../../assets/img/uncheck1.png) no-repeat center center;
-				background-size: 100% 100%;
-				padding: 12px 50px 12px 35px;
-				position: absolute;
-				font-weight: bold;
-				font-style: italic;
-				color: #76899D;
-			}
+    button:first-child {
+      border: none;
+      background: url(../../assets/img/uncheck1.png) no-repeat center center;
+      background-size: 100% 100%;
+      padding: 12px 50px 12px 35px;
+      position: absolute;
+      font-weight: bold;
+      font-style: italic;
+      color: #76899d;
+    }
 
-			button:nth-child(2) {
-				border: none;
-				background: url(../../assets/img/uncheck2.png) no-repeat center center;
-				background-size: 100% 100%;
-				padding: 12px 55px;
-				position: absolute;
-				left: 76px;
-				font-weight: bold;
-				font-style: italic;
-				color: #76899D;
-			}
+    button:nth-child(2) {
+      border: none;
+      background: url(../../assets/img/uncheck2.png) no-repeat center center;
+      background-size: 100% 100%;
+      padding: 12px 55px;
+      position: absolute;
+      left: 76px;
+      font-weight: bold;
+      font-style: italic;
+      color: #76899d;
+    }
 
-			button:last-child {
-				border: none;
-				background: url(../../assets/img/uncheck2.png) no-repeat center center;
-				background-size: 100% 100%;
-				padding: 12px 55px;
-				position: absolute;
-				left: 176px;
-				font-weight: bold;
-				font-style: italic;
-				color: #76899D;
-			}
+    button:last-child {
+      border: none;
+      background: url(../../assets/img/uncheck2.png) no-repeat center center;
+      background-size: 100% 100%;
+      padding: 12px 55px;
+      position: absolute;
+      left: 176px;
+      font-weight: bold;
+      font-style: italic;
+      color: #76899d;
+    }
 
-			.active {
-				background: url(../../assets/img/check2.png) no-repeat center center !important;
-				background-size: 100% 100% !important;
-				color: #fff !important;
-			}
+    .active {
+      background: url(../../assets/img/check2.png) no-repeat center center !important;
+      background-size: 100% 100% !important;
+      color: #fff !important;
+    }
 
-			.active2 {
-				background: url(../../assets/img/check1.png) no-repeat center center !important;
-				background-size: 100% 100% !important;
-				color: #fff !important;
-			}
-		}
+    .active2 {
+      background: url(../../assets/img/check1.png) no-repeat center center !important;
+      background-size: 100% 100% !important;
+      color: #fff !important;
+    }
+  }
 
-		.el-table::before {
-			height: 0;
-		}
+  .el-table::before {
+    height: 0;
+  }
 
-		// .el-input{
-		// 	height: 100px;
-		// 	.el-input__inner{
-		// 		height: 1.875rem!important;
-		// 	}
-		// }
-	}
+  // .el-input{
+  // 	height: 100px;
+  // 	.el-input__inner{
+  // 		height: 1.875rem!important;
+  // 	}
+  // }
+}
 
-	.downlodTable {
-		width: 50px;
-		height: 30px;
-		box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4) !important;
-		border: 1px solid rgba(1, 148, 228, 0.34) !important;
-		background: none !important;
-		float: right;
-		position: absolute;
-		top: 66px;
-		right: 25px;
-		color: #ddd;
-		text-align: center;
-		line-height: 30px;
-		cursor: pointer;
-	}
+.downlodTable {
+  width: 50px;
+  height: 30px;
+  box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4) !important;
+  border: 1px solid rgba(1, 148, 228, 0.34) !important;
+  background: none !important;
+  float: right;
+  position: absolute;
+  top: 66px;
+  right: 25px;
+  color: #ddd;
+  text-align: center;
+  line-height: 30px;
+  cursor: pointer;
+}
 </style>
 <style>
-	.Report .el-table th {
-		background: #103366 !important;
-	}
+.Report .el-table th {
+  background: #103366 !important;
+}
 
-	.Report .el-table th>.cell {
-		color: #0194E4 !important;
-	}
+.Report .el-table th > .cell {
+  color: #0194e4 !important;
+}
 
-	.Report .el-table th,
-	.el-table tr:hover {
-		background: red;
-	}
+.Report .el-table th,
+.el-table tr:hover {
+  background: red;
+}
 
-	.Report .el-input input,
-	.Report .el-date-editor {
-		color: #ddd;
-		height: 32px !important;
-		line-height: 32px !important;
-		box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4) !important;
-		border: 1px solid rgba(1, 148, 228, 0.34) !important;
-		background: none !important;
-		border-radius: 0 !important;
-	}
+.Report .el-input input,
+.Report .el-date-editor {
+  color: #ddd;
+  height: 32px !important;
+  line-height: 32px !important;
+  box-shadow: inset 0px 1px 38px 0px rgba(0, 162, 253, 0.4) !important;
+  border: 1px solid rgba(1, 148, 228, 0.34) !important;
+  background: none !important;
+  border-radius: 0 !important;
+}
 
-	/* .logBox .el-date-editor{
+/* .logBox .el-date-editor{
 		width: 28.125rem;
 	} */
-	.Report .el-date-editor input {
-		background: none !important;
-		color: #ddd;
-	}
+.Report .el-date-editor input {
+  background: none !important;
+  color: #ddd;
+}
 
-	.Report .el-input span i,
-	.Report .el-date-editor i {
-		line-height: 27px !important;
-	}
+.Report .el-input span i,
+.Report .el-date-editor i {
+  line-height: 27px !important;
+}
 
-	.Report .el-date-editor span {
-		color: #ddd !important;
-		line-height: 23px;
-	}
+.Report .el-date-editor span {
+  color: #ddd !important;
+  line-height: 23px;
+}
 
-	.el-table td,
-	.Report .el-table th {
-		border-bottom: 1px solid #17427B !important;
-	}
+.el-table td,
+.Report .el-table th {
+  border-bottom: 1px solid #17427b !important;
+}
 </style>

src/utilts/utilts.js

@@ -0,0 +1,21 @@
+/**
+ * 格式化时间
+ * @param {格式化格式} fmt 如 yyyy-MM-dd hh:mm:ss
+ * @param {时间对象} date
+ */
+export const Format = (fmt, date) => {
+  let o = {
+    'M+': date.getMonth() + 1, // 月份
+    'd+': date.getDate(), // 日
+    'h+': date.getHours(), // 小时
+    'm+': date.getMinutes(), // 分
+    's+': date.getSeconds(), // 秒
+    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
+    'S': date.getMilliseconds() // 毫秒
+  }
+  if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
+  for (var k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
+  }
+  return fmt
+}