flx:新增执法记录仪模块
This commit is contained in:
parent
c242cce098
commit
0d5eb2be4b
145
components/tree-node/cameraIndex.vue
Normal file
145
components/tree-node/cameraIndex.vue
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tree-content-compontent">
|
||||||
|
<view class="content-box" :class="{ 'content-box_project': item.type == 2 }"
|
||||||
|
:style="`padding-left: ${treeIndex * 30}rpx;`" @click="toggleNodes(item)">
|
||||||
|
<view class="box-text">
|
||||||
|
<image v-if="item.deviceState == 1" class="img" src="/static/bodyWornCamera/bodyWornCamera_online.png"
|
||||||
|
mode=""></image>
|
||||||
|
<image v-else-if="item.deviceState == 2" class="img"
|
||||||
|
src="/static/bodyWornCamera/bodyWornCamera_offline.png" mode=""></image>
|
||||||
|
<text>{{ item.name }}</text>
|
||||||
|
<text v-if="item.type == 1">({{ deviceStateNum(item) }}/{{ item.children.length || 0 }})</text>
|
||||||
|
</view>
|
||||||
|
<view @click.stop="expandFn">
|
||||||
|
<!-- <u-icon name="arrow-right" color="#B3B3B3" size="40"
|
||||||
|
v-if="!expanded && item.children && item.children.length" style="margin-right: 10rpx;"></u-icon>
|
||||||
|
<u-icon name="arrow-down" color="#B3B3B3" size="40"
|
||||||
|
v-if="expanded && item.children && item.children.length" style="margin-right: 10rpx;"></u-icon> -->
|
||||||
|
<u-icon v-if="!expanded && item.children && item.children.length" name="arrow-right" color="#B3B3B3"
|
||||||
|
size="40"></u-icon>
|
||||||
|
<u-icon v-if="expanded && item.children && item.children.length" name="arrow-down" color="#B3B3B3"
|
||||||
|
size="40"></u-icon>
|
||||||
|
</view>
|
||||||
|
<image v-if="(!item.children || !item.children.length) && !iconShow" style="width: 55rpx; height: 40rpx"
|
||||||
|
src="../../static/videoControlIcon/videoIcon1.png" mode="">
|
||||||
|
</image>
|
||||||
|
<!-- <image style="width:80rpx;height:80rpx;float:left" src="../../static/icon-down-black.png" mode="">
|
||||||
|
</image> -->
|
||||||
|
</view>
|
||||||
|
<view class="sub-component">
|
||||||
|
<view :class="{ expandedStyle: expanded == true }"
|
||||||
|
v-if="item.children && item.children.length && expanded">
|
||||||
|
<TreeMenu :pageType="pageType" :iconShow="iconShow" v-for="(child, index) in item.children"
|
||||||
|
:key="child.id" :item="child" :treeIndex="treeIndex + 1" :expandedIndex="index"
|
||||||
|
@clickItem="clickTreeItem"></TreeMenu>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TreeMenu from "./areaIndex.vue";
|
||||||
|
export default {
|
||||||
|
name: "TreeMenu",
|
||||||
|
components: {
|
||||||
|
TreeMenu,
|
||||||
|
},
|
||||||
|
props: ["item", "pageType", "treeIndex", "iconShow", "expandedIndex"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
expanded: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.expandedIndex == 0) {
|
||||||
|
this.expanded = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clickTreeItem(item) {
|
||||||
|
console.log(item, 777888);
|
||||||
|
if (!item.deviceState) return;
|
||||||
|
this.$emit("clickItem", item);
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: `/pages/videoManage/videoGroup?&sn=${item.projectSn}`
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
expandFn(e) {
|
||||||
|
console.log(e, 666);
|
||||||
|
this.expanded = !this.expanded;
|
||||||
|
},
|
||||||
|
toggleNodes(item) {
|
||||||
|
this.$emit("clickItem", item);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
deviceStateNum() {
|
||||||
|
return (row) => {
|
||||||
|
return row.children.filter(item => item.deviceState == 1).length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tree-content-compontent {
|
||||||
|
background: white;
|
||||||
|
border-bottom: 2rpx solid #f7f7f7;
|
||||||
|
|
||||||
|
.content-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
padding: 16rpx 26rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// border-bottom: 2px solid #D6D6D6;
|
||||||
|
>.box-text {
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin-right: auto;
|
||||||
|
display: inline-block;
|
||||||
|
flex: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-text1 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #b3b3b3;
|
||||||
|
padding: 0 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-box_project {
|
||||||
|
background-color: #f2f3f7;
|
||||||
|
border-bottom: 1px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-component {
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
.tree-content-compontent {
|
||||||
|
background: #ffffff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.expandedStyle {
|
||||||
|
// padding-left: 60rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
21
pages.json
21
pages.json
@ -3307,6 +3307,27 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": ""
|
"navigationBarTitleText": ""
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/projectEnd/bodyWornCamera/index",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/projectEnd/bodyWornCamera/bodyWornCameraDetail",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/projectEnd/bodyWornCamera/playBackVideo",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : ""
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// "subPackages":[{
|
// "subPackages":[{
|
||||||
|
|||||||
1082
pages/projectEnd/bodyWornCamera/bodyWornCameraDetail.vue
Normal file
1082
pages/projectEnd/bodyWornCamera/bodyWornCameraDetail.vue
Normal file
File diff suppressed because it is too large
Load Diff
463
pages/projectEnd/bodyWornCamera/components/calendarView.vue
Normal file
463
pages/projectEnd/bodyWornCamera/components/calendarView.vue
Normal file
@ -0,0 +1,463 @@
|
|||||||
|
<template>
|
||||||
|
<view class="calendar">
|
||||||
|
<view class="box-main2-time">
|
||||||
|
<view @click="alarmByCodeClick(item)" :class="{'time-active': item.id == timeActive}"
|
||||||
|
v-for="item in timeList" :key="item.id">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="calendar-main">
|
||||||
|
<view class="calendar-header">
|
||||||
|
<view @click="defaultMonthFn" class="calendar-header_left">今天</view>
|
||||||
|
<!-- <u-icon @click="prevYear" name="arrow-left-double" color="#A2A4AF" size="40"></u-icon>
|
||||||
|
<u-icon @click="prevMonth" name="arrow-left" color="#A2A4AF" size="40"></u-icon> -->
|
||||||
|
<text>{{ currentYear }}.{{ currentMonth + 1 }}</text>
|
||||||
|
<!-- <u-icon @click="nextMonth" name="arrow-right" color="#A2A4AF" size="40"></u-icon>
|
||||||
|
<u-icon @click="nextYear" name="arrow-right-double" color="#A2A4AF" size="40"></u-icon> -->
|
||||||
|
</view>
|
||||||
|
<view class="calendar-header1">
|
||||||
|
<view class="">
|
||||||
|
正常记录
|
||||||
|
</view>
|
||||||
|
<view class="">
|
||||||
|
无记录
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="calendar-weekdays">
|
||||||
|
<text v-for="day in weekdays" :key="day">{{ day }}</text>
|
||||||
|
</view>
|
||||||
|
<picker mode="date" :value="currentDate" fields="month" @change="bindDateChange">
|
||||||
|
<view class="month-select">
|
||||||
|
{{ convertToChinese(currentMonth + 1) }}月
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
|
||||||
|
<view class="calendar-days">
|
||||||
|
<view v-for="day in daysInMonth" :key="day.date" class="calendar-day" @click="examineCalendarView(day)"
|
||||||
|
:class="day.duration ? 'calendar-day2' : 'calendar-day1'">
|
||||||
|
<view class="calendar-day_header" :class="{
|
||||||
|
'other-month': day.isOtherMonth,
|
||||||
|
'current-day': $dayjs(day.date).format('YYYY-MM-DD') == defaultDay,
|
||||||
|
}">
|
||||||
|
{{ day.day }}
|
||||||
|
</view>
|
||||||
|
<view class="calendar-text"
|
||||||
|
:class="{'calendar-text_color': day.duration, 'calendar-text_color1': day.isBeforeDay || day.isCurrentDay}">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CalendarView",
|
||||||
|
props: {
|
||||||
|
defaultMonth: {
|
||||||
|
type: String,
|
||||||
|
default: () => dayjs().format("YYYY-MM")
|
||||||
|
},
|
||||||
|
ocrBuildLogAllList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentDate: this.defaultMonth,
|
||||||
|
weekdays: ["日", "一", "二", "三", "四", "五", "六"],
|
||||||
|
dataList: [],
|
||||||
|
defaultType: 1,
|
||||||
|
defaultDay: dayjs().format("YYYY-MM-DD"),
|
||||||
|
timeActive: 2,
|
||||||
|
timeList: [{
|
||||||
|
id: 1,
|
||||||
|
title: "上月"
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
title: "本月"
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
title: "下月"
|
||||||
|
}],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
convertToChinese() {
|
||||||
|
const digitMap = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
|
||||||
|
return (num) => {
|
||||||
|
const numList = num.toString().split('');
|
||||||
|
return numList.map((digit, index) => {
|
||||||
|
if(digit == 0) return;
|
||||||
|
if(numList.length > 1 && index == 0) {
|
||||||
|
return "十"
|
||||||
|
}
|
||||||
|
return digitMap[parseInt(digit)]
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dateTimeUp() {
|
||||||
|
return (dateTime) => {
|
||||||
|
return !dayjs(dateTime).isBefore(dayjs());
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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: {
|
||||||
|
bindDateChange(e) {
|
||||||
|
this.currentDate = dayjs(e.detail.value).format("YYYY-MM-DD");
|
||||||
|
},
|
||||||
|
defaultMonthFn() {
|
||||||
|
this.currentDate = this.defaultMonth;
|
||||||
|
this.defaultDay = dayjs().format("YYYY-MM-DD");
|
||||||
|
},
|
||||||
|
alarmByCodeClick(row) {
|
||||||
|
this.timeActive = row.id;
|
||||||
|
if (this.timeActive == 1) {
|
||||||
|
this.prevMonth();
|
||||||
|
} else if (this.timeActive == 2) {
|
||||||
|
this.currentDate = this.defaultMonth;
|
||||||
|
} else {
|
||||||
|
this.nextMonth();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
prevMonth() {
|
||||||
|
this.currentDate = this.$dayjs(this.currentDate)
|
||||||
|
.subtract(1, "month")
|
||||||
|
.format("YYYY-MM-DD");
|
||||||
|
},
|
||||||
|
nextMonth() {
|
||||||
|
this.currentDate = this.$dayjs(this.currentDate)
|
||||||
|
.add(1, "month")
|
||||||
|
.format("YYYY-MM-DD");
|
||||||
|
},
|
||||||
|
prevYear() {
|
||||||
|
this.currentDate = this.$dayjs(this.currentDate)
|
||||||
|
.subtract(1, "year")
|
||||||
|
.format("YYYY-MM-DD");
|
||||||
|
},
|
||||||
|
nextYear() {
|
||||||
|
this.currentDate = this.$dayjs(this.currentDate)
|
||||||
|
.add(1, "year")
|
||||||
|
.format("YYYY-MM-DD");
|
||||||
|
},
|
||||||
|
currentDay() {
|
||||||
|
this.currentDate = dayjs(this.defaultMonth).format("YYYY-MM");
|
||||||
|
},
|
||||||
|
examineCalendarView(row) {
|
||||||
|
if (this.dateTimeUp(row.date)) return
|
||||||
|
this.defaultDay = this.$dayjs(row.date).format('YYYY-MM-DD');
|
||||||
|
this.$emit("examineCalendarView", row);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
defaultMonth: {
|
||||||
|
// immediate: true,
|
||||||
|
handler(newVal) {
|
||||||
|
console.log(1111111, newVal);
|
||||||
|
this.currentDay();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ocrBuildLogAllList: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.dataList = newVal;
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
daysInMonth: {
|
||||||
|
handler(newVal) {
|
||||||
|
const find = this.daysInMonth.find(item => this.$dayjs(item.date).format('YYYY-MM-DD') == this
|
||||||
|
.defaultDay);
|
||||||
|
if (find) {
|
||||||
|
this.$emit("examineCalendarView", find);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.month-select {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #A3A3A3;
|
||||||
|
position: relative;
|
||||||
|
width: max-content;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-select::after {
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-right: 16rpx solid #A3A3A3;
|
||||||
|
border-top: 12rpx solid transparent;
|
||||||
|
border-bottom: 12rpx solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
right: -26rpx;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-header1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #707070;
|
||||||
|
margin-top: 26rpx;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
>view:last-child {
|
||||||
|
margin-left: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
>view::after {
|
||||||
|
content: "";
|
||||||
|
width: 11rpx;
|
||||||
|
height: 11rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: -26rpx;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
>view:first-child::after {
|
||||||
|
background-color: #667ED6;
|
||||||
|
}
|
||||||
|
|
||||||
|
>view:last-child::after {
|
||||||
|
background-color: #FFAB03;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-main {
|
||||||
|
margin-top: 26rpx;
|
||||||
|
padding: 26rpx;
|
||||||
|
border-radius: 8rpx 8rpx 8rpx;
|
||||||
|
border: 3rpx solid #D9D9D9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-main2-time {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 26rpx;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
width: 144rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background-color: #EFF3F7;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-active {
|
||||||
|
background-image: url('@/static/bridgeCraneMonitor/index-bg2.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 0 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-header {
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 40rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.calendar-header_left {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #667ED6;
|
||||||
|
}
|
||||||
|
|
||||||
|
>text {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #242424;
|
||||||
|
background-color: #EAEAEA;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
padding: 4rpx 20rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-weekdays {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
// margin-bottom: 10px;
|
||||||
|
|
||||||
|
>text {
|
||||||
|
flex: 1;
|
||||||
|
height: 110rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #4D4D4D;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-days {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
gap: 0px;
|
||||||
|
height: 580rpx;
|
||||||
|
grid-auto-rows: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.calendar-day_header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
// border: 2rpx solid #B90303;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #191919;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
width: 11rpx;
|
||||||
|
height: 11rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-text_color1 {
|
||||||
|
background-color: #FFAA00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-text_color {
|
||||||
|
background-color: #667ED6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-active {
|
||||||
|
// border: 2rpx solid #3D99FF;
|
||||||
|
color: #4D4D4D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.other-month {
|
||||||
|
color: #A3A3A3;
|
||||||
|
// display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-day {
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: #667ED6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-forbidden {
|
||||||
|
border-color: transparent;
|
||||||
|
background: #F8F8F8;
|
||||||
|
color: #4D4D4D;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
158
pages/projectEnd/bodyWornCamera/index.vue
Normal file
158
pages/projectEnd/bodyWornCamera/index.vue
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
<template>
|
||||||
|
<view class="areaTreePage">
|
||||||
|
<scroll-view scroll-y="true" class="pageContent">
|
||||||
|
<headers :showBack="true">
|
||||||
|
<view class="headerName">
|
||||||
|
执法记录仪
|
||||||
|
</view>
|
||||||
|
</headers>
|
||||||
|
<view class="areaTreeBox">
|
||||||
|
<view class="uni-form-item">
|
||||||
|
<input class="uni-input" name="projectName" v-model="projectName" @input="searchFile"
|
||||||
|
placeholder="请输入设备名称" />
|
||||||
|
<button class="mini-btn" type="primary" size="mini" @click="loadData">搜索</button>
|
||||||
|
</view>
|
||||||
|
<template v-if="mapData.length > 0">
|
||||||
|
<tree-menu :pageType="pageType" :iconShow="true" v-for="(item,index) in mapData"
|
||||||
|
:key="item.companyId" :item="item" :expandedIndex="index" :treeIndex="treeIndex"
|
||||||
|
@clickItem="clickTreeItem"></tree-menu>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TreeMenu from '@/components/tree-node/cameraIndex.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
TreeMenu
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
projectName: '',
|
||||||
|
searchsn: '',
|
||||||
|
userInfo: null,
|
||||||
|
mapData: [],
|
||||||
|
headerName: '华润电力',
|
||||||
|
treeIndex: 1, // 树形层级index
|
||||||
|
projectDetail: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
console.log(options.type)
|
||||||
|
// uni.setStorageSync('pageType',this.pageType)
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
|
||||||
|
this.loadData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clickTreeItem(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: './bodyWornCameraDetail?id=' + item.id
|
||||||
|
})
|
||||||
|
},
|
||||||
|
searchFile(e) {
|
||||||
|
this.projectName = e.detail.value
|
||||||
|
},
|
||||||
|
//获取所有企业下区域数据
|
||||||
|
loadData(type) {
|
||||||
|
//type:true代表第一调用
|
||||||
|
var that = this
|
||||||
|
this.sendRequest({
|
||||||
|
url: "xmgl/policeCameraItem/getGroupTreeWithDev",
|
||||||
|
data: {
|
||||||
|
projectSn: this.projectDetail.projectSn,
|
||||||
|
devName: that.projectName,
|
||||||
|
},
|
||||||
|
method: "POST",
|
||||||
|
success(res) {
|
||||||
|
if (res.code == 200) {
|
||||||
|
that.mapData = res.result;
|
||||||
|
console.log(88488, that.mapData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.statusBox {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon-status {
|
||||||
|
margin-left: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.areaTreePage {
|
||||||
|
background-color: white;
|
||||||
|
height: 100%;
|
||||||
|
color: $uni-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .areaTreeBox{
|
||||||
|
// padding: 0 20rpx;
|
||||||
|
// }
|
||||||
|
.areaInner {
|
||||||
|
border-bottom: 1px solid rgba(221, 221, 221, 0.67);
|
||||||
|
}
|
||||||
|
|
||||||
|
.areaTitle {
|
||||||
|
font-size: 30rpx;
|
||||||
|
border-bottom: 1px solid rgba(221, 221, 221, 0.67);
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
float: right;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.areaTitle2 {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 20rpx 30rpx 20rpx 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectTitle {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 20rpx 30rpx 20rpx 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectTitle2 {
|
||||||
|
padding-left: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectBox {
|
||||||
|
background-color: rgba(221, 221, 221, 0.26);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-input {
|
||||||
|
border-radius: 30rpx;
|
||||||
|
margin: 20rpx 20rpx;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
width: 65%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-form-item {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 30rpx;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-radius: 30rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
73
pages/projectEnd/bodyWornCamera/playBackVideo.vue
Normal file
73
pages/projectEnd/bodyWornCamera/playBackVideo.vue
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<view class="fullHeight">
|
||||||
|
<headers :showBack="true" :themeType="'#3A7BFF'">
|
||||||
|
<view class="headerName">
|
||||||
|
视频回放
|
||||||
|
</view>
|
||||||
|
</headers>
|
||||||
|
<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="url" controls autoplay></video> -->
|
||||||
|
<!-- 外网IP地址访问视频监控 -->
|
||||||
|
<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="'rtsp://42.180.188.17:'+url.substring(20)" controls autoplay></video> -->
|
||||||
|
<video class="videoBox" id="myVideo" :custom-cache="false" :src="url_config + 'image/' + passData.url" controls autoplay></video>
|
||||||
|
<view class="videoName">
|
||||||
|
<view>{{passData.workTicketNumber}}</view>
|
||||||
|
<view class="video-time">{{passData.beginTime}}<view>至</view>{{passData.endTime}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
|
||||||
|
streamType: 1, //1是子码流 2是主码流
|
||||||
|
passData: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
//videoType 1萤石云,2乐橙,3ISC,4大华,5宇视,6国标
|
||||||
|
// this.url = options.url
|
||||||
|
if(options.params){
|
||||||
|
this.passData = JSON.parse(options.params)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.fullHeight{
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.videoBox{
|
||||||
|
width: 100%;
|
||||||
|
height: 420rpx;
|
||||||
|
}
|
||||||
|
.videoName{
|
||||||
|
margin: 10px 15px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
> view:nth-child(1){
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
.video-time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #808080;
|
||||||
|
margin-top: 26rpx;
|
||||||
|
> view {
|
||||||
|
margin: 0 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -285,7 +285,7 @@
|
|||||||
if (!this.userInfo.personMail && options.fromPage && options.fromPage == 'loginPage') {
|
if (!this.userInfo.personMail && options.fromPage && options.fromPage == 'loginPage') {
|
||||||
this.checkInfoComplete()
|
this.checkInfoComplete()
|
||||||
}
|
}
|
||||||
if(options.sn) {
|
if (options.sn) {
|
||||||
this.getDetailInfo(options.sn)
|
this.getDetailInfo(options.sn)
|
||||||
}
|
}
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
@ -305,7 +305,7 @@
|
|||||||
data: data,
|
data: data,
|
||||||
success: res => {
|
success: res => {
|
||||||
console.log("enterpriseInfo", res.result.layoutImage);
|
console.log("enterpriseInfo", res.result.layoutImage);
|
||||||
if(res.result.layoutImage) {
|
if (res.result.layoutImage) {
|
||||||
that.loginBackgroundImage = res.result.layoutImage;
|
that.loginBackgroundImage = res.result.layoutImage;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -767,6 +767,11 @@
|
|||||||
url: '../betonManage/index'
|
url: '../betonManage/index'
|
||||||
})
|
})
|
||||||
break
|
break
|
||||||
|
case 'bodyWornCamera':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '../bodyWornCamera/index'
|
||||||
|
})
|
||||||
|
break
|
||||||
case 'bridgeCraneMonitor':
|
case 'bridgeCraneMonitor':
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '../bridgeCraneMonitor/index'
|
url: '../bridgeCraneMonitor/index'
|
||||||
|
|||||||
1429
pages/videoManage/component/nativeRtspPlayer.vue
Normal file
1429
pages/videoManage/component/nativeRtspPlayer.vue
Normal file
File diff suppressed because it is too large
Load Diff
BIN
static/bodyWornCamera/bodyWornCamera_offline.png
Normal file
BIN
static/bodyWornCamera/bodyWornCamera_offline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 857 B |
BIN
static/bodyWornCamera/bodyWornCamera_online.png
Normal file
BIN
static/bodyWornCamera/bodyWornCamera_online.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 794 B |
BIN
static/bodyWornCamera/bodyworn_audio.png
Normal file
BIN
static/bodyWornCamera/bodyworn_audio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/bodyWornCamera/bodyworn_pause.png
Normal file
BIN
static/bodyWornCamera/bodyworn_pause.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/bodyWornCamera/bodyworn_play.png
Normal file
BIN
static/bodyWornCamera/bodyworn_play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
x
Reference in New Issue
Block a user