flx：优化
This commit is contained in:
parent
8b421215f0
commit
a0e0c495c6
@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="calendar">
|
||||
<!-- <div class="calendar-header">
|
||||
<button @click="prevMonth"><</button>
|
||||
<h2>{{ currentYear }} 年 {{ currentMonth + 1 }} 月</h2>
|
||||
<button @click="nextMonth">></button>
|
||||
</div> -->
|
||||
<div class="calendar-weekdays">
|
||||
<span v-for="day in weekdays" :key="day">周{{ day }}</span>
|
||||
</div>
|
||||
<div class="calendar-days">
|
||||
<div
|
||||
v-for="day in daysInMonth"
|
||||
:key="day.date"
|
||||
class="calendar-day"
|
||||
@click="selectDate(day.date)"
|
||||
:class="day.duration ? 'calendar-day2' : 'calendar-day1'"
|
||||
>
|
||||
<div class="calendar-day_header">
|
||||
<div
|
||||
class="calendar-text"
|
||||
:class="{
|
||||
'other-month': day.isOtherMonth,
|
||||
'current-day': day.isCurrentDay,
|
||||
}"
|
||||
>
|
||||
<!-- || day.duration -->
|
||||
{{ day.day }}
|
||||
</div>
|
||||
<!-- v-if="day.isBeforeDay || day.isCurrentDay" -->
|
||||
<div
|
||||
class="calendar-box1"
|
||||
:class="day.duration ? 'bg-color88' : 'bg-colord0'"
|
||||
>
|
||||
{{ day.duration ? "" : "无记录" }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="calendar-day_box1"
|
||||
v-if="defaultType == 2 && dateTimeUp(day.date)"
|
||||
@click="addView(day)"
|
||||
>
|
||||
<i class="el-icon-edit"></i>
|
||||
去填写
|
||||
</div>
|
||||
<div
|
||||
class="calendar-day_box2"
|
||||
:class="{ 'box2-center': day.duration }"
|
||||
>
|
||||
{{ durationHour(day.duration) }}h
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export default {
|
||||
name: "CalendarView",
|
||||
props: {
|
||||
defaultMonth: {
|
||||
type: String,
|
||||
default: () => dayjs().format("YYYY-MM"),
|
||||
},
|
||||
ocrBuildLogAllList: { type: Array, default: () => [] },
|
||||
type: { type: Number, default: () => 1 },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentDate: this.defaultMonth,
|
||||
weekdays: ["日", "一", "二", "三", "四", "五", "六"],
|
||||
dataList: [],
|
||||
defaultType: 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dateTimeUp() {
|
||||
return (dateTime) => {
|
||||
return dayjs(dateTime).isBefore(dayjs());
|
||||
};
|
||||
},
|
||||
durationHour() {
|
||||
return (seconds) => {
|
||||
if (!seconds) return 0;
|
||||
return (seconds / 60 / 60).toFixed(2);
|
||||
};
|
||||
},
|
||||
currentYear() {
|
||||
return dayjs(this.currentDate).year();
|
||||
},
|
||||
currentMonth() {
|
||||
return dayjs(this.currentDate).month();
|
||||
},
|
||||
daysInMonth() {
|
||||
console.log(22222222222, this.currentDate);
|
||||
const currentDayjs = dayjs(this.currentDate);
|
||||
const startOfMonth = currentDayjs.startOf("month");
|
||||
const endOfMonth = currentDayjs.endOf("month");
|
||||
const startDay = startOfMonth.day();
|
||||
const endDay = endOfMonth.day();
|
||||
|
||||
// 计算上个月需要显示的天数
|
||||
const prevMonthDays = [];
|
||||
for (let i = startDay - 1; i >= 0; i--) {
|
||||
const date = startOfMonth.subtract(startDay - i, "day");
|
||||
// console.log(date.date(),date.format('YYYY-MM-DD'));
|
||||
prevMonthDays.unshift({
|
||||
day: date.date(),
|
||||
date: date.format("YYYY-MM-DD"),
|
||||
isOtherMonth: true,
|
||||
isCurrentDay: false,
|
||||
isBeforeDay: false,
|
||||
});
|
||||
}
|
||||
|
||||
// 计算当前月的天数
|
||||
const currentMonthDays = [];
|
||||
for (let i = 0; i < endOfMonth.date(); i++) {
|
||||
const date = startOfMonth.add(i, "day");
|
||||
currentMonthDays.push({
|
||||
day: date.date(),
|
||||
date: date.format("YYYY-MM-DD"),
|
||||
isOtherMonth: false,
|
||||
isCurrentDay: date.isSame(dayjs(), "day"),
|
||||
isBeforeDay: date.isBefore(dayjs(), "day"),
|
||||
});
|
||||
}
|
||||
|
||||
// 计算下个月需要显示的天数
|
||||
const nextMonthDays = [];
|
||||
for (let i = 1; i <= 6 - endDay; i++) {
|
||||
const date = endOfMonth.add(i, "day");
|
||||
nextMonthDays.push({
|
||||
day: date.date(),
|
||||
date: date.format("YYYY-MM-DD"),
|
||||
isOtherMonth: true,
|
||||
isCurrentDay: false,
|
||||
isBeforeDay: false,
|
||||
});
|
||||
}
|
||||
const resultList = [
|
||||
...prevMonthDays,
|
||||
...currentMonthDays,
|
||||
...nextMonthDays,
|
||||
];
|
||||
return resultList.map((item) => {
|
||||
const find = this.dataList.find(
|
||||
(ele) => dayjs(ele.date).format("YYYY-MM-DD") == item.date
|
||||
);
|
||||
if (find) {
|
||||
return {
|
||||
...item,
|
||||
...find,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
prevMonth() {
|
||||
this.currentDate = this.currentDate.subtract(1, "month");
|
||||
},
|
||||
nextMonth() {
|
||||
this.currentDate = this.currentDate.add(1, "month");
|
||||
},
|
||||
currentDay() {
|
||||
this.currentDate = dayjs(this.defaultMonth).format("YYYY-MM");
|
||||
},
|
||||
selectDate(date) {
|
||||
this.$emit("date-selected", date);
|
||||
},
|
||||
addView(row) {
|
||||
this.$emit("addView", row);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
defaultMonth: {
|
||||
// immediate: true,
|
||||
handler(newVal) {
|
||||
console.log(1111111, newVal);
|
||||
this.currentDay();
|
||||
},
|
||||
},
|
||||
type: {
|
||||
handler(newVal) {
|
||||
this.defaultType = newVal;
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
ocrBuildLogAllList: {
|
||||
handler(newVal) {
|
||||
this.dataList = newVal;
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.calendar {
|
||||
width: 100%;
|
||||
border: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.calendar-weekdays {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
// margin-bottom: 10px;
|
||||
background: #fafafa;
|
||||
> span {
|
||||
flex: 1;
|
||||
height: 55px;
|
||||
font-size: 16px;
|
||||
color: #4d4d4d;
|
||||
border: 1px solid #ebebeb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 0px;
|
||||
height: 570px;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
.calendar-day1:hover .calendar-day_box1 {
|
||||
display: flex;
|
||||
}
|
||||
.calendar-day:hover {
|
||||
background-color: #f2f8ff;
|
||||
}
|
||||
.calendar-day {
|
||||
cursor: pointer;
|
||||
// height: 122px;
|
||||
border: 1px solid #ebebeb;
|
||||
position: relative;
|
||||
.calendar-day_box2 {
|
||||
width: calc(100% - 40px);
|
||||
height: 50%;
|
||||
font-size: 14px;
|
||||
// background-color: #e6f1fe;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #4181fe;
|
||||
// display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
display: none;
|
||||
.view-box1 {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.view-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #4181fe;
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box2-center {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
.calendar-day_box1 {
|
||||
width: calc(84px - 20px);
|
||||
padding: 8px 10px;
|
||||
background: #4181fe;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.calendar-day_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 10px 5px 5px;
|
||||
.calendar-box1 {
|
||||
padding: 2px 6px;
|
||||
border-radius: 132px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.bg-color88 {
|
||||
background-color: #88cf65;
|
||||
display: none;
|
||||
}
|
||||
.bg-colord0 {
|
||||
background-color: #d00000;
|
||||
}
|
||||
.calendar-text {
|
||||
font-size: 14px;
|
||||
color: #4d4d4d;
|
||||
width: 36px;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.other-month {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.current-day {
|
||||
background-color: #4181fe;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -88,21 +88,62 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightPanel whiteBlock">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="设备监测" name="first"></el-tab-pane>
|
||||
<el-tab-pane label="录像中心" name="second"></el-tab-pane>
|
||||
<el-tab-pane label="图片中心" name="third"></el-tab-pane>
|
||||
<el-tab-pane label="音频中心" name="fourth"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-menu
|
||||
:default-active="activeName"
|
||||
@select="handleClick"
|
||||
class="business-menu-demo"
|
||||
mode="horizontal"
|
||||
text-color="#262D47"
|
||||
active-text-color="#5181F6"
|
||||
>
|
||||
<el-menu-item
|
||||
v-permission="{
|
||||
key: 'equipmentMonitor',
|
||||
menuPath: '/project/bodyWornCamera/equipmentMonitor',
|
||||
}"
|
||||
index="first"
|
||||
>设备监测</el-menu-item
|
||||
>
|
||||
<el-menu-item
|
||||
v-permission="{
|
||||
key: 'videoCenter',
|
||||
menuPath: '/project/bodyWornCamera/equipmentMonitor',
|
||||
}"
|
||||
index="second"
|
||||
>录像中心</el-menu-item
|
||||
>
|
||||
<el-menu-item
|
||||
v-permission="{
|
||||
key: 'imageCenter',
|
||||
menuPath: '/project/bodyWornCamera/equipmentMonitor',
|
||||
}"
|
||||
index="third"
|
||||
>图片中心</el-menu-item
|
||||
>
|
||||
<el-menu-item
|
||||
v-permission="{
|
||||
key: 'audioCenter',
|
||||
menuPath: '/project/bodyWornCamera/equipmentMonitor',
|
||||
}"
|
||||
index="fourth"
|
||||
>音频中心</el-menu-item
|
||||
>
|
||||
<el-menu-item
|
||||
v-permission="{
|
||||
key: 'workingHour',
|
||||
menuPath: '/project/bodyWornCamera/equipmentMonitor',
|
||||
}"
|
||||
index="fifth"
|
||||
>工作时长统计</el-menu-item
|
||||
>
|
||||
</el-menu>
|
||||
<div class="equipment_detail" v-if="activeName == 'first'">
|
||||
<div>
|
||||
<div class="equipment_box">
|
||||
<div>
|
||||
<span>设备名称</span>
|
||||
<span>{{
|
||||
policeCameraItemDetail.devName
|
||||
? policeCameraItemDetail.devName
|
||||
: "--"
|
||||
policeCameraItemDetail.devName ? policeCameraItemDetail.devName : "--"
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
@ -120,13 +161,11 @@
|
||||
:class="{
|
||||
'state-box_offline': policeCameraItemDetail.deviceState != 1,
|
||||
}"
|
||||
>{{
|
||||
policeCameraItemDetail.deviceState == 1 ? "在线" : "离线"
|
||||
}}</span
|
||||
>{{ policeCameraItemDetail.deviceState == 1 ? "在线" : "离线" }}</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<span>已用容量</span>
|
||||
<span>已用容量 </span>
|
||||
<span>{{
|
||||
policeCameraItemDetail.usedCapacity
|
||||
? policeCameraItemDetail.usedCapacity
|
||||
@ -171,17 +210,13 @@
|
||||
<div>
|
||||
<span>设备编号</span>
|
||||
<span>{{
|
||||
policeCameraItemDetail.devSn
|
||||
? policeCameraItemDetail.devSn
|
||||
: "--"
|
||||
policeCameraItemDetail.devSn ? policeCameraItemDetail.devSn : "--"
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>使用人</span>
|
||||
<span>{{
|
||||
policeCameraItemDetail.userNames
|
||||
? policeCameraItemDetail.userNames
|
||||
: "--"
|
||||
policeCameraItemDetail.userNames ? policeCameraItemDetail.userNames : "--"
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
@ -221,11 +256,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
@click="onHTMLToImageDownload"
|
||||
type="primary"
|
||||
size="medium"
|
||||
plain
|
||||
<el-button @click="onHTMLToImageDownload" type="primary" size="medium" plain
|
||||
>下载</el-button
|
||||
>
|
||||
<div class="image-box" @click="dialogVisible = true">
|
||||
@ -250,10 +281,7 @@
|
||||
<div>设备编号</div>
|
||||
<div>{{ policeCameraItemDetail.devSn }}</div>
|
||||
</div>
|
||||
<img
|
||||
:src="$store.state.FILEURL + policeCameraItemDetail.qrCode"
|
||||
alt=""
|
||||
/>
|
||||
<img :src="$store.state.FILEURL + policeCameraItemDetail.qrCode" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
@ -274,19 +302,12 @@
|
||||
<div>设备编号</div>
|
||||
<div>{{ policeCameraItemDetail.devSn }}</div>
|
||||
</div>
|
||||
<img
|
||||
:src="$store.state.FILEURL + policeCameraItemDetail.qrCode"
|
||||
alt=""
|
||||
/>
|
||||
<img :src="$store.state.FILEURL + policeCameraItemDetail.qrCode" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<template
|
||||
v-if="
|
||||
activeName == 'second' ||
|
||||
activeName == 'third' ||
|
||||
activeName == 'fourth'
|
||||
"
|
||||
v-if="activeName == 'second' || activeName == 'third' || activeName == 'fourth'"
|
||||
>
|
||||
<el-form size="medium" :model="pageInfo" ref="queryForm" :inline="true">
|
||||
<el-form-item label="录像时间">
|
||||
@ -301,7 +322,7 @@
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="工单号">
|
||||
<el-input v-model="pageInfo.id" placeholder="请输入"></el-input>
|
||||
<el-input v-model="pageInfo.workTicketNumber" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onQuery" type="primary" plain>查询</el-button>
|
||||
@ -323,10 +344,7 @@
|
||||
>
|
||||
<el-button @click="toggleSelection(true)" type="text">全选</el-button>
|
||||
</div>
|
||||
<div
|
||||
class="card-main"
|
||||
v-if="activeName == 'second' || activeName == 'third'"
|
||||
>
|
||||
<div class="card-main" v-if="activeName == 'second' || activeName == 'third'">
|
||||
<div
|
||||
:class="{ 'card-box_active': selectionUp(item) }"
|
||||
class="card-box"
|
||||
@ -336,14 +354,8 @@
|
||||
>
|
||||
<div class="card-img">
|
||||
<video controls v-if="item.fileType == 3">
|
||||
<source
|
||||
:src="$store.state.FILEURL + item.fileUrl"
|
||||
type="video/mp4"
|
||||
/>
|
||||
<source
|
||||
:src="$store.state.FILEURL + item.fileUrl"
|
||||
type="video/webm"
|
||||
/>
|
||||
<source :src="$store.state.FILEURL + item.fileUrl" type="video/mp4" />
|
||||
<source :src="$store.state.FILEURL + item.fileUrl" type="video/webm" />
|
||||
您的浏览器不支持 HTML5 video 标签。
|
||||
</video>
|
||||
<img
|
||||
@ -361,7 +373,9 @@
|
||||
</div>
|
||||
<template v-if="activeName == 'second'">
|
||||
<div class="card-flex">
|
||||
<div class="card-num webkit-clamp_1">{{ item.fileName }}</div>
|
||||
<div class="card-num webkit-clamp_1">
|
||||
{{ item.workTicketNumber }}
|
||||
</div>
|
||||
<div class="card-num">
|
||||
{{ (item.fileLen / (1024 * 1024)).toFixed(2) }}MB
|
||||
</div>
|
||||
@ -436,6 +450,51 @@
|
||||
background
|
||||
></el-pagination>
|
||||
</template>
|
||||
<div class="diary-content" v-if="activeName == 'fifth'">
|
||||
<el-form
|
||||
:inline="true"
|
||||
size="medium"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<div>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="formInline.month"
|
||||
type="month"
|
||||
placeholder="选择月"
|
||||
format="yyyy年MM月"
|
||||
value-format="yyyy-MM"
|
||||
:clearable="false"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-radio-group @change="onMonthSwitch" v-model="formInline.monthSwitch">
|
||||
<el-radio-button @click.native.prevent="clickRadio(1)" :label="1"
|
||||
>上月</el-radio-button
|
||||
>
|
||||
<el-radio-button :label="2">本月</el-radio-button>
|
||||
<el-radio-button @click.native.prevent="clickRadio(3)" :label="3"
|
||||
>下月</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item>
|
||||
<el-button @click="exportBtnTemplate" type="primary" size="mini" plain
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<CalendarView
|
||||
ref="calendarViewRef"
|
||||
:ocrBuildLogAllList="ocrBuildLogCountOcrBuildLogForMonth"
|
||||
:defaultMonth="formInline.month"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 批量导入 -->
|
||||
<el-dialog
|
||||
@ -460,9 +519,7 @@
|
||||
accept=".xlsx"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或<em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<!-- <div class="el-upload__tip" slot="tip">
|
||||
支持导入200MB以内的ZIP文件：
|
||||
①驾驶证行驶证复印件；
|
||||
@ -492,18 +549,21 @@ import {
|
||||
getPoliceCameraItemQueryByIdApi,
|
||||
getPoliceCameraItemFilePageApi,
|
||||
deleteBatchPoliceCameraItemFileApi,
|
||||
getPoliceCameraItemCountWorkingHoursApi,
|
||||
} from "@/assets/js/api/bodyWornCamera";
|
||||
import CalendarView from "./components/calendarView.vue";
|
||||
import dayjs from "dayjs";
|
||||
import html2canvas from "html2canvas";
|
||||
import { isJSON } from "@/util/nowDate/index";
|
||||
export default {
|
||||
components: { CalendarView },
|
||||
data() {
|
||||
return {
|
||||
pageInfo: {
|
||||
pageNo: 1, //页数
|
||||
pageSize: 12, //条数
|
||||
total: 0, //总条数
|
||||
id: "",
|
||||
workTicketNumber: "",
|
||||
startTime: [],
|
||||
},
|
||||
defaultProps: {
|
||||
@ -530,14 +590,77 @@ export default {
|
||||
policeCameraItemDetail: {},
|
||||
multipleSelection: [],
|
||||
dialogVisible: false,
|
||||
|
||||
formInline: {
|
||||
month: "",
|
||||
monthSwitch: 2, //1 上月 2本月 3下月
|
||||
date: [],
|
||||
user: "",
|
||||
region: "",
|
||||
},
|
||||
ocrBuildLogCountOcrBuildLogForMonth: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const find = this.$store.state.menuList.find(
|
||||
(item) => item.path == "/project/bodyWornCamera/equipmentMonitor"
|
||||
);
|
||||
if (find) {
|
||||
const findAction = [
|
||||
"equipmentMonitor",
|
||||
"videoCenter",
|
||||
"imageCenter",
|
||||
"audioCenter",
|
||||
"workingHour",
|
||||
];
|
||||
const findIndex = findAction.findIndex(
|
||||
(item) => find.actionList && find.actionList.some((i) => i.actionCode == item)
|
||||
);
|
||||
const findName = ["first", "second", "third", "fourth", "fifth"];
|
||||
const activeName = `${findName[findIndex]}`;
|
||||
console.log(447788, find.actionList, findIndex, activeName);
|
||||
if (activeName) {
|
||||
this.handleClick(activeName);
|
||||
}
|
||||
}
|
||||
this.projectSn = this.$route.query.projectSn;
|
||||
this.getRiskListLibraryList();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onMonthSwitch() {
|
||||
console.log(this.formInline.monthSwitch, this.formInline.month);
|
||||
if (this.formInline.monthSwitch == 1) {
|
||||
this.formInline.month = dayjs(this.formInline.month)
|
||||
.subtract(1, "month")
|
||||
.format("YYYY-MM-DD");
|
||||
} else if (this.formInline.monthSwitch == 2) {
|
||||
this.formInline.month = dayjs().format("YYYY-MM-DD");
|
||||
} else if (this.formInline.monthSwitch == 3) {
|
||||
this.formInline.month = dayjs(this.formInline.month)
|
||||
.add(1, "month")
|
||||
.format("YYYY-MM-DD");
|
||||
}
|
||||
this.getPoliceCameraItemCountWorkingHours();
|
||||
},
|
||||
clickRadio(e) {
|
||||
this.formInline.monthSwitch = e;
|
||||
if (this.formInline.monthSwitch == 1 || this.formInline.monthSwitch == 3) {
|
||||
this.onMonthSwitch();
|
||||
}
|
||||
},
|
||||
getPoliceCameraItemCountWorkingHours() {
|
||||
getPoliceCameraItemCountWorkingHoursApi({
|
||||
projectSn: this.projectSn,
|
||||
startDate: dayjs(this.formInline.month).startOf("month").format("YYYY-MM-DD"),
|
||||
endDate: dayjs(this.formInline.month).endOf("month").format("YYYY-MM-DD"),
|
||||
itemId: this.riskListDetailInfo.id,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.ocrBuildLogCountOcrBuildLogForMonth = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
onHTMLToImageDownload() {
|
||||
html2canvas(this.$refs.downloadContent, {
|
||||
useCORS: true,
|
||||
@ -549,9 +672,13 @@ export default {
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
this.activeName = tab;
|
||||
this.pageInfo.pageNo = 1;
|
||||
if (this.activeName == "fourth") {
|
||||
this.pageInfo.pageSize = 28;
|
||||
} else if (this.activeName == "fifth") {
|
||||
this.onMonthSwitch();
|
||||
return;
|
||||
} else {
|
||||
this.pageInfo.pageSize = 12;
|
||||
}
|
||||
@ -690,17 +817,12 @@ export default {
|
||||
},
|
||||
sureImport() {
|
||||
console.log("确定导入车辆信息", this.fileList);
|
||||
if (this.fileList.length == 0)
|
||||
this.$message.warning("请上传需要导入的文件!");
|
||||
if (this.fileList.length == 0) this.$message.warning("请上传需要导入的文件!");
|
||||
// uploadZipCarCarInfoApi()
|
||||
const fileInfo = this.fileList[0].response.data[0].fileInfo;
|
||||
var param = new FormData();
|
||||
param.append("sn", this.$store.state.userInfo.sn);
|
||||
param.append(
|
||||
"excelFile",
|
||||
this.fileList[0].raw,
|
||||
fileInfo.originalFilename
|
||||
);
|
||||
param.append("excelFile", this.fileList[0].raw, fileInfo.originalFilename);
|
||||
if (this.sureImportTitle == "导入清单") {
|
||||
param.append("projectType", "");
|
||||
this.$http
|
||||
@ -787,9 +909,7 @@ export default {
|
||||
this.getRiskListDetailPage();
|
||||
},
|
||||
onSelectionClick(item) {
|
||||
const findIndex = this.multipleSelection.findIndex(
|
||||
(id) => id === item.id
|
||||
);
|
||||
const findIndex = this.multipleSelection.findIndex((id) => id === item.id);
|
||||
if (findIndex > -1) return this.multipleSelection.splice(findIndex, 1);
|
||||
this.multipleSelection.push(item.id);
|
||||
},
|
||||
@ -856,7 +976,7 @@ export default {
|
||||
this.getRiskListDetailPage();
|
||||
},
|
||||
onRefresh() {
|
||||
this.pageInfo.id = "";
|
||||
this.pageInfo.workTicketNumber = "";
|
||||
this.pageInfo.startTime = [];
|
||||
this.onQuery();
|
||||
},
|
||||
@ -881,45 +1001,34 @@ export default {
|
||||
pageSize: this.pageInfo.pageSize,
|
||||
projectSn: this.$store.state.projectSn,
|
||||
itemId: this.riskListDetailInfo.id,
|
||||
id: this.pageInfo.id,
|
||||
fileType:
|
||||
this.activeName == "second"
|
||||
? 3
|
||||
: this.activeName == "third"
|
||||
? 1
|
||||
: 2,
|
||||
workTicketNumber: this.pageInfo.workTicketNumber,
|
||||
fileType: this.activeName == "second" ? 3 : this.activeName == "third" ? 1 : 2,
|
||||
};
|
||||
if (this.activeName == "second") {
|
||||
params.startTime_begin =
|
||||
this.pageInfo.startTime instanceof Array &&
|
||||
this.pageInfo.startTime.length > 0
|
||||
this.pageInfo.startTime instanceof Array && this.pageInfo.startTime.length > 0
|
||||
? dayjs(this.pageInfo.startTime[0]).format("YYYY-MM-DD 00:00:00")
|
||||
: "";
|
||||
params.endTime_end =
|
||||
this.pageInfo.startTime instanceof Array &&
|
||||
this.pageInfo.startTime.length > 0
|
||||
this.pageInfo.startTime instanceof Array && this.pageInfo.startTime.length > 0
|
||||
? dayjs(this.pageInfo.startTime[1]).format("YYYY-MM-DD 23:59:59")
|
||||
: "";
|
||||
} else if (this.activeName == "third") {
|
||||
params.uploadTime_begin =
|
||||
this.pageInfo.startTime instanceof Array &&
|
||||
this.pageInfo.startTime.length > 0
|
||||
this.pageInfo.startTime instanceof Array && this.pageInfo.startTime.length > 0
|
||||
? dayjs(this.pageInfo.startTime[0]).format("YYYY-MM-DD 00:00:00")
|
||||
: "";
|
||||
params.uploadTime_end =
|
||||
this.pageInfo.startTime instanceof Array &&
|
||||
this.pageInfo.startTime.length > 0
|
||||
this.pageInfo.startTime instanceof Array && this.pageInfo.startTime.length > 0
|
||||
? dayjs(this.pageInfo.startTime[1]).format("YYYY-MM-DD 23:59:59")
|
||||
: "";
|
||||
} else if (this.activeName == "fourth") {
|
||||
params.fileTime_begin =
|
||||
this.pageInfo.startTime instanceof Array &&
|
||||
this.pageInfo.startTime.length > 0
|
||||
this.pageInfo.startTime instanceof Array && this.pageInfo.startTime.length > 0
|
||||
? dayjs(this.pageInfo.startTime[0]).format("YYYY-MM-DD 00:00:00")
|
||||
: "";
|
||||
params.fileTime_end =
|
||||
this.pageInfo.startTime instanceof Array &&
|
||||
this.pageInfo.startTime.length > 0
|
||||
this.pageInfo.startTime instanceof Array && this.pageInfo.startTime.length > 0
|
||||
? dayjs(this.pageInfo.startTime[1]).format("YYYY-MM-DD 23:59:59")
|
||||
: "";
|
||||
}
|
||||
@ -963,8 +1072,7 @@ export default {
|
||||
setCheckedKeys() {
|
||||
this.defaultExpandAll = false;
|
||||
for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
|
||||
this.$refs.tree.store._getAllNodes()[i].expanded =
|
||||
this.defaultExpandAll;
|
||||
this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpandAll;
|
||||
const { data } = this.$refs.tree.store._getAllNodes()[i];
|
||||
this.handleNodeCollapse(data);
|
||||
}
|
||||
@ -1023,9 +1131,7 @@ export default {
|
||||
computed: {
|
||||
selectionUp() {
|
||||
return (row) => {
|
||||
const findIndex = this.multipleSelection.findIndex(
|
||||
(id) => id === row.id
|
||||
);
|
||||
const findIndex = this.multipleSelection.findIndex((id) => id === row.id);
|
||||
return findIndex > -1 ? true : false;
|
||||
};
|
||||
},
|
||||
@ -1038,6 +1144,38 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.diary-content {
|
||||
// padding: 15px 20px;
|
||||
// height: calc(100% - 30px);
|
||||
background-color: #fff;
|
||||
.demo-form-inline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.el-select,
|
||||
.el-cascader {
|
||||
width: 192px;
|
||||
}
|
||||
/deep/ .el-date-editor--daterange {
|
||||
width: 247px;
|
||||
}
|
||||
/deep/ .el-date-editor--month {
|
||||
width: 90px;
|
||||
.el-input__inner {
|
||||
width: 90px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
color: #272d45;
|
||||
}
|
||||
.el-input__prefix {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .download-dialog {
|
||||
.el-dialog {
|
||||
background: transparent;
|
||||
@ -1763,6 +1901,13 @@ export default {
|
||||
padding: 10px 15px 20px;
|
||||
height: calc(100% - 30px);
|
||||
position: relative;
|
||||
/deep/ .el-menu {
|
||||
margin-bottom: 20px;
|
||||
.el-menu-item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.rightPanel_title {
|
||||
height: calc(38px + 36px + 22px);
|
||||
}
|
||||
|
||||
@ -107,7 +107,6 @@
|
||||
<template slot-scope="scope">
|
||||
<div class="">
|
||||
<el-button
|
||||
|
||||
style="border: 0 !important; margin-left: 10px"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@ -115,7 +114,6 @@
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
|
||||
style="border: 0 !important; color: #f56c6c; margin-left: 10px"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@ -301,12 +299,36 @@ export default {
|
||||
dealType: 1,
|
||||
dealTitle: "",
|
||||
dealFormRules: {
|
||||
devSn: [{ required: true, message: "请选择抓拍设备", trigger: "change" }],
|
||||
carNumber: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
|
||||
isExceed: [{ required: true, message: "请选择是否超出阈值", trigger: "change" }],
|
||||
devSn: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择抓拍设备",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
carNumber: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入车牌号",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
isExceed: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择是否超出阈值",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
currentSpeed: [{ required: true, message: "请输入时速", trigger: "blur" }],
|
||||
// fileList: [{ type: Array, required: true, message: "请上传抓拍图片", trigger: "change" }],
|
||||
uploadTime: [{ required: true, message: "请选择上传时间", trigger: "change" }],
|
||||
uploadTime: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择上传时间",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
},
|
||||
carWashDevList: [],
|
||||
carInfoList: [],
|
||||
@ -351,7 +373,14 @@ export default {
|
||||
} else if (type == 2) {
|
||||
this.dealForm = {
|
||||
...row,
|
||||
fileList: row.snapshotImage ? [{ name: row.snapshotImage, url: this.$store.state.FILEURL + row.snapshotImage }] : []
|
||||
fileList: row.snapshotImage
|
||||
? [
|
||||
{
|
||||
name: row.snapshotImage,
|
||||
url: this.$store.state.FILEURL + row.snapshotImage,
|
||||
},
|
||||
]
|
||||
: [],
|
||||
};
|
||||
this.dealTitle = "编辑";
|
||||
}
|
||||
@ -415,13 +444,13 @@ export default {
|
||||
.catch(() => {});
|
||||
},
|
||||
carMeasureSpeedDevList() {
|
||||
carMeasureSpeedDevListApi({ projectSn: this.$store.state.projectSn }).then(
|
||||
(result) => {
|
||||
if (result.success) {
|
||||
this.carWashDevList = result.result;
|
||||
}
|
||||
carMeasureSpeedDevListApi({
|
||||
projectSn: this.$store.state.projectSn,
|
||||
}).then((result) => {
|
||||
if (result.success) {
|
||||
this.carWashDevList = result.result;
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
// 搜索
|
||||
resetQuery() {
|
||||
|
||||
@ -8,17 +8,9 @@
|
||||
</div>
|
||||
<div class="rightPanel whiteBlock">
|
||||
<div class="form-flex">
|
||||
<el-form
|
||||
size="medium"
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
>
|
||||
<el-form size="medium" :model="queryParams" ref="queryForm" :inline="true">
|
||||
<el-form-item label="人员姓名" prop="workerName">
|
||||
<el-input
|
||||
v-model="queryParams.workerName"
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
<el-input v-model="queryParams.workerName" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期范围" prop="constructionTime">
|
||||
<el-date-picker
|
||||
@ -33,12 +25,8 @@
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain @click="handleQuery"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="warning" plain @click="handleRefresh"
|
||||
>刷新</el-button
|
||||
>
|
||||
<el-button type="primary" plain @click="handleQuery">查询</el-button>
|
||||
<el-button type="warning" plain @click="handleRefresh">刷新</el-button>
|
||||
<!-- <el-button
|
||||
:disabled="
|
||||
$refs.multipleTable && $refs.multipleTable.selection.length == 0
|
||||
@ -74,9 +62,7 @@
|
||||
<div :class="{ unfold: !unfoldShow }" @click="onUnfoldChange"></div>
|
||||
<div class="table-header_left">
|
||||
统计列表
|
||||
<span
|
||||
>(当天工时/工日无法计算出最终值, 由第二天00:00后计算显示)</span
|
||||
>
|
||||
<span>(当天工时/工日无法计算出最终值, 由第二天00:00后计算显示)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-header_right">
|
||||
@ -124,11 +110,7 @@
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="medium"
|
||||
plain
|
||||
@click="handleExportSetting"
|
||||
<el-button type="primary" size="medium" plain @click="handleExportSetting"
|
||||
>导出</el-button
|
||||
>
|
||||
</div>
|
||||
@ -140,9 +122,7 @@
|
||||
style="width: 100%"
|
||||
row-key="id"
|
||||
class="tables"
|
||||
:height="`calc(100% - 64px - ${
|
||||
unfoldShow ? '274px' : '0px'
|
||||
} - 58px - 20px)`"
|
||||
:height="`calc(100% - 64px - ${unfoldShow ? '274px' : '0px'} - 58px - 20px)`"
|
||||
:key="itemKey"
|
||||
>
|
||||
<el-table-column
|
||||
@ -288,8 +268,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="
|
||||
exportSettingInfo.groupByType == 1 ||
|
||||
exportSettingInfo.groupByType == 3
|
||||
exportSettingInfo.groupByType == 1 || exportSettingInfo.groupByType == 3
|
||||
"
|
||||
label="展示类型"
|
||||
prop="downloadType"
|
||||
@ -334,9 +313,7 @@
|
||||
</template>
|
||||
</el-form>
|
||||
<div slot="footer" style="text-align: center">
|
||||
<el-button
|
||||
icon="el-icon-circle-close"
|
||||
@click="exportSettingDialog = false"
|
||||
<el-button icon="el-icon-circle-close" @click="exportSettingDialog = false"
|
||||
>取消</el-button
|
||||
>
|
||||
<el-button
|
||||
@ -679,9 +656,7 @@ export default {
|
||||
},
|
||||
data: result.map(
|
||||
(item) =>
|
||||
(this.queryParams.isType == 1
|
||||
? item.hourValTotal
|
||||
: item.dayValTotal) || 0
|
||||
(this.queryParams.isType == 1 ? item.hourValTotal : item.dayValTotal) || 0
|
||||
),
|
||||
},
|
||||
],
|
||||
@ -859,7 +834,7 @@ export default {
|
||||
};
|
||||
data[categoryObj[this.riskListDetail.category]] =
|
||||
this.riskListDetail.originalId || "";
|
||||
if (this.queryParams.includingSubordinatesChecked) {
|
||||
if (this.queryParams.includingSubordinatesChecked) {
|
||||
data.containEnterpriseId = this.riskListDetail.originalId || "";
|
||||
delete data.enterpriseId;
|
||||
}
|
||||
@ -879,9 +854,7 @@ export default {
|
||||
}
|
||||
if (res.result.records instanceof Array) {
|
||||
const dateTime =
|
||||
res.result.records.length > 0
|
||||
? res.result.records[0].dailyHourMap
|
||||
: {};
|
||||
res.result.records.length > 0 ? res.result.records[0].dailyHourMap : {};
|
||||
let dataList = [];
|
||||
for (const key in dateTime) {
|
||||
dataList.push({
|
||||
@ -905,9 +878,7 @@ export default {
|
||||
computed: {
|
||||
srcListUp() {
|
||||
return (dataList) => {
|
||||
const resultList = dataList.map(
|
||||
(item) => this.$store.state.FILEURL + item.url
|
||||
);
|
||||
const resultList = dataList.map((item) => this.$store.state.FILEURL + item.url);
|
||||
console.log(resultList);
|
||||
return resultList;
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user