|
|
@@ -11,19 +11,19 @@
|
|
|
</template>
|
|
|
<div class="custom-card">
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthCount }}</span>
|
|
|
<span>所有数量</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthAlready }}</span>
|
|
|
<span>已解决</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthNot }}</span>
|
|
|
<span>未解决</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthReport }}</span>
|
|
|
<span>已上报</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -37,19 +37,19 @@
|
|
|
</template>
|
|
|
<div class="custom-card week-card">
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthCount }}</span>
|
|
|
<span>所有数量</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthAlready }}</span>
|
|
|
<span>已解决</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthNot }}</span>
|
|
|
<span>未解决</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthReport }}</span>
|
|
|
<span>已上报</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -63,19 +63,19 @@
|
|
|
</template>
|
|
|
<div class="custom-card day-card">
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthCount }}</span>
|
|
|
<span>所有数量</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthAlready }}</span>
|
|
|
<span>已解决</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthNot }}</span>
|
|
|
<span>未解决</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>147</span>
|
|
|
+ <span>{{ statData.monthReport }}</span>
|
|
|
<span>已上报</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -87,7 +87,7 @@
|
|
|
<span>统计分析</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <BaseChart width="100%" height="230px" :option="pieOptions" />
|
|
|
+ <BaseChart width="100%" height="100%" :option="pieOptions" />
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<div class="right-part">
|
|
|
@@ -96,9 +96,7 @@
|
|
|
<el-select style="width: 100px" v-model="queryParams.level" clearable placeholder="事件等级">
|
|
|
<el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
</el-select>
|
|
|
- <el-select style="width: 100px; margin-left: 10px" v-model="queryParams.level" clearable placeholder="事件类型">
|
|
|
- <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
- </el-select>
|
|
|
+ <el-input v-model="queryParams.ext2.lx" style="width: 110px; margin-left: 10px" placeholder="事件类型" />
|
|
|
<el-date-picker
|
|
|
v-model="queryParams.dateRange"
|
|
|
style="margin-left: 10px"
|
|
|
@@ -108,22 +106,34 @@
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
:shortcuts="shortcuts"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
/>
|
|
|
</div>
|
|
|
<div style="margin-top: 10px">
|
|
|
<el-input v-model="queryParams.addr" style="width: 210px" placeholder="输入地点关键词" :suffix-icon="Search" />
|
|
|
<div style="margin-left: 10px">
|
|
|
- <el-button color="#3CBBED" style="color: #fff">查询</el-button>
|
|
|
- <el-button>重置</el-button>
|
|
|
+ <el-button color="#1890FF" style="color: #fff" @click="getList">查询</el-button>
|
|
|
+ <el-button @click="resetQuery">重置</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="event-list">
|
|
|
- <el-table :data="tableData" :show-header="false" :border="false" style="width: 100%; --el-table-border-color: none">
|
|
|
- <el-table-column prop="level" />
|
|
|
- <el-table-column prop="type" />
|
|
|
+ <el-table :data="eventList" :show-header="false" :border="false" style="width: 100%; --el-table-border-color: none">
|
|
|
+ <el-table-column prop="level" width="80">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ event_level.filter((item) => item.value == row.level)[0]?.label }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="ext2.lx" show-overflow-tooltip width="100" />
|
|
|
<el-table-column prop="addr" show-overflow-tooltip />
|
|
|
- <el-table-column prop="date" />
|
|
|
+ <el-table-column prop="createTimeFormat" width="100" />
|
|
|
+ <el-table-column prop="status" width="70">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="row.status == 3" style="color: #5f86fd">已上报</span>
|
|
|
+ <span v-else-if="row.status == 1" style="color: #26c768">已解决</span>
|
|
|
+ <span v-else style="color: #ff6124">未解决</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column width="60">
|
|
|
<template #default="{ row }">
|
|
|
<el-button link type="primary" @click="showDetails(row)">查看</el-button>
|
|
|
@@ -132,106 +142,119 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div class="event-footer">
|
|
|
- <el-pagination background layout="prev, pager, next" :total="1000" />
|
|
|
+ <pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ v-model:page="queryParams.pageNum"
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-dialog v-model="dialog.visible" :title="dialog.title" width="1000px" top="0">
|
|
|
- <el-form ref="addFormRef" :model="form" label-position="top" label-width="90px" label-suffix=":">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="事件ID" prop="handler" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
|
|
|
- <el-input v-model="form.handler" placeholder="请输入" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="事件类型" prop="handleWay">
|
|
|
- <el-select v-model="form.level" clearable placeholder="请选择">
|
|
|
+ <el-dialog v-model="dialog.visible" :title="dialog.title" width="1000px" top="0" append-to-body @close="dialogClose">
|
|
|
+ <div class="dialog-loading-warp">
|
|
|
+ <el-form ref="addFormRef" :model="form" label-position="top" label-width="90px" label-suffix=":">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="事件ID" prop="id">
|
|
|
+ <el-input v-model="form.id" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="事件类型" prop="ext2.lx">
|
|
|
+ <el-input v-model="form.ext2.lx" placeholder="请输入" />
|
|
|
+ <!-- <el-select v-model="form.ext2.lx" clearable placeholder="请选择">
|
|
|
<el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="发生时间" prop="handleContent">
|
|
|
- <el-date-picker style="width: 100%" v-model="form.value1" type="date" placeholder="请选择" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="事件等级" prop="handleWay">
|
|
|
- <el-select v-model="form.level" clearable placeholder="请选择">
|
|
|
- <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="桩号" prop="handleWay">
|
|
|
- <el-input v-model="form.handler" placeholder="请输入" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="地点描述" prop="handleWay">
|
|
|
- <el-input v-model="form.handler" type="textarea" placeholder="请输入" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <div class="event-media">
|
|
|
- <div class="event-media-title">现场画面</div>
|
|
|
- <div class="event-media-content">
|
|
|
- <div class="imgs">
|
|
|
- <el-image :src="imgUrl" show-progress :preview-src-list="imgList" fit="cover" />
|
|
|
- <el-image :src="imgUrl" show-progress :preview-src-list="imgList" fit="cover" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="event-media" style="margin-top: 10px">
|
|
|
- <div class="event-media-title">现场视频</div>
|
|
|
- <div class="event-media-content">
|
|
|
- <div class="videos">
|
|
|
- <div id="dplayer1"></div>
|
|
|
- <div id="dplayer2"></div>
|
|
|
- <div id="dplayer3"></div>
|
|
|
- <div id="dplayer4"></div>
|
|
|
+ </el-select> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="发生时间" prop="createTime">
|
|
|
+ <el-date-picker style="width: 100%" v-model="form.createTime" type="date" placeholder="请选择" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="事件等级" prop="level">
|
|
|
+ <el-select v-model="form.level" clearable placeholder="请选择" @change="formSubmit('level')">
|
|
|
+ <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="桩号" prop="ext2.zh">
|
|
|
+ <el-input v-model="form.ext2.zh" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="form.status" clearable placeholder="请选择" @change="formSubmit('status')">
|
|
|
+ <el-option v-for="dict in event_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="地点描述" prop="addr">
|
|
|
+ <el-input v-model="form.addr" type="textarea" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div class="event-media" v-if="form.imgList.length">
|
|
|
+ <div class="event-media-title">现场画面</div>
|
|
|
+ <div class="event-media-content">
|
|
|
+ <div class="imgs">
|
|
|
+ <el-image v-for="item in form.imgList" :key="item" :src="item" show-progress :preview-src-list="form.imgList" fit="cover" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="report-btn">
|
|
|
- <img @click="generateReport" src="@/assets/images/report.svg" alt="" />
|
|
|
- </div>
|
|
|
- <template v-if="showReport">
|
|
|
- <div class="report-editor">
|
|
|
- <div class="report-title">报告内容：</div>
|
|
|
- <div style="border: 1px solid #d9d9d9; margin-top: 10px">
|
|
|
- <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" mode="default" />
|
|
|
- <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" @onCreated="handleCreated" />
|
|
|
+ <div class="event-media" v-if="form.videoList.length" style="margin-top: 10px">
|
|
|
+ <div class="event-media-title">现场视频</div>
|
|
|
+ <div class="event-media-content">
|
|
|
+ <div class="videos">
|
|
|
+ <div v-for="(item, index) in form.videoList" :key="index" :id="`dplayer${index}`"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="margin-top: 20px">
|
|
|
- <div class="report-title">格式选择：</div>
|
|
|
- <el-select style="width: 300px; margin-top: 10px" v-model="fileType" clearable placeholder="请选择">
|
|
|
- <el-option label="pdf" :value="1"></el-option>
|
|
|
- <el-option label="word" :value="2"></el-option>
|
|
|
- <el-option label="图片" :value="3"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-button color="#2AB55C" style="color: #fff; margin-top: 20px; margin-bottom: 30px" @click="htmlToPdfFn">导出报告</el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
+ <div class="report-btn">
|
|
|
+ <img @click="generateClick" src="@/assets/images/report.svg" alt="" />
|
|
|
</div>
|
|
|
- </template> -->
|
|
|
+ <template v-if="showReport">
|
|
|
+ <div class="report-editor">
|
|
|
+ <div class="report-title">报告内容：</div>
|
|
|
+ <div style="border: 1px solid #d9d9d9; margin-top: 10px">
|
|
|
+ <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" mode="default" />
|
|
|
+ <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" @onCreated="handleCreated" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 20px">
|
|
|
+ <div class="report-title">格式选择：</div>
|
|
|
+ <el-select style="width: 300px; margin-top: 10px" v-model="fileType" clearable placeholder="请选择">
|
|
|
+ <el-option label="pdf" :value="1"></el-option>
|
|
|
+ <el-option label="word" :value="2"></el-option>
|
|
|
+ <el-option label="图片" :value="3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button color="#2AB55C" style="color: #fff; margin-top: 20px; margin-bottom: 30px" @click="htmlToPdfFn">导出报告</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { Search, Location } from '@element-plus/icons-vue';
|
|
|
+import { Search } from '@element-plus/icons-vue';
|
|
|
import BaseChart from '@/components/BaseChart/index.vue';
|
|
|
import monitorIcon from '@/assets/images/monitor.svg';
|
|
|
import DPlayer from 'dplayer';
|
|
|
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
|
|
import { exportAsPdf, exportAsWord, exportAsImage } from 'html2image-pdf-word';
|
|
|
+import { listEvent, generateReport, updateEvent } from '@/api/system/event';
|
|
|
+import { dateFormat } from '@/utils/index';
|
|
|
+import { ElLoading } from 'element-plus';
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const bdmap = ref(null);
|
|
|
const marks = ref([
|
|
|
@@ -249,11 +272,11 @@ const marks = ref([
|
|
|
}
|
|
|
]);
|
|
|
const { event_level } = toRefs<any>(proxy?.useDict('event_level'));
|
|
|
+const { event_status } = toRefs<any>(proxy?.useDict('event_status'));
|
|
|
const editorRef = shallowRef();
|
|
|
-const toolbarConfig = {};
|
|
|
const editorConfig = { placeholder: '请输入内容...' };
|
|
|
// 内容 HTML
|
|
|
-const valueHtml = ref('<p>hello</p>');
|
|
|
+const valueHtml = ref('');
|
|
|
const handleCreated = (editor) => {
|
|
|
console.log('created', editor);
|
|
|
editorRef.value = editor; // 记录 editor 实例，重要！
|
|
|
@@ -278,15 +301,42 @@ const htmlToPdfFn = async () => {
|
|
|
};
|
|
|
|
|
|
const queryParams = ref({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 15,
|
|
|
level: undefined,
|
|
|
+ ext2: {
|
|
|
+ lx: undefined
|
|
|
+ },
|
|
|
dateRange: undefined,
|
|
|
- addr: undefined
|
|
|
+ addr: undefined,
|
|
|
+ params: {
|
|
|
+ beginTime: '',
|
|
|
+ endTime: ''
|
|
|
+ }
|
|
|
});
|
|
|
const dialog = reactive({
|
|
|
visible: false,
|
|
|
- title: '事件详情'
|
|
|
+ title: '事件详情',
|
|
|
+ loading: null
|
|
|
+});
|
|
|
+const form = ref<any>({});
|
|
|
+const statData = reactive({
|
|
|
+ monthCount: undefined,
|
|
|
+ monthAlready: undefined,
|
|
|
+ monthNot: undefined,
|
|
|
+ monthReport: undefined,
|
|
|
+ weekCount: undefined,
|
|
|
+ weekAlready: undefined,
|
|
|
+ weekNot: undefined,
|
|
|
+ weekReport: undefined,
|
|
|
+ dayCount: undefined,
|
|
|
+ dayAlready: undefined,
|
|
|
+ dayNot: undefined,
|
|
|
+ dayReport: undefined,
|
|
|
+ already: undefined,
|
|
|
+ not: undefined,
|
|
|
+ report: undefined
|
|
|
});
|
|
|
-const form = reactive({});
|
|
|
const shortcuts = [
|
|
|
{
|
|
|
text: '最近一周',
|
|
|
@@ -331,26 +381,25 @@ const pieOptions = computed(() => {
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie',
|
|
|
- radius: '50%',
|
|
|
radius: ['40%', '80%'],
|
|
|
center: ['50%', '60%'],
|
|
|
data: [
|
|
|
{
|
|
|
- value: 40,
|
|
|
+ value: statData.monthAlready,
|
|
|
name: '已解决',
|
|
|
itemStyle: {
|
|
|
color: '#FAC858'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- value: 17,
|
|
|
+ value: statData.monthNot,
|
|
|
name: '未解决',
|
|
|
itemStyle: {
|
|
|
color: '#93BEFF'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- value: 15,
|
|
|
+ value: statData.monthReport,
|
|
|
name: '已上报',
|
|
|
itemStyle: {
|
|
|
color: '#507AFC'
|
|
|
@@ -369,28 +418,8 @@ const pieOptions = computed(() => {
|
|
|
};
|
|
|
return options;
|
|
|
});
|
|
|
-const tableData = [
|
|
|
- {
|
|
|
- date: '2016-05-03',
|
|
|
- level: '严重',
|
|
|
- addr: '地点',
|
|
|
- type: '交通事故'
|
|
|
- },
|
|
|
- {
|
|
|
- date: '2016-05-03',
|
|
|
- level: '严重',
|
|
|
- addr: '地点',
|
|
|
- type: '交通事故'
|
|
|
- },
|
|
|
- {
|
|
|
- date: '2016-05-03',
|
|
|
- level: '严重',
|
|
|
- addr: '地点',
|
|
|
- type: '交通事故'
|
|
|
- }
|
|
|
-];
|
|
|
-const imgUrl = new URL(`@/assets/images/profile.jpg`, import.meta.url).href;
|
|
|
-const imgList = [new URL(`@/assets/images/profile.jpg`, import.meta.url).href, new URL(`@/assets/images/profile.jpg`, import.meta.url).href];
|
|
|
+const eventList = ref([]);
|
|
|
+const total = ref(0);
|
|
|
onMounted(() => {
|
|
|
const map = new BMapGL.Map('map'); // 创建地图实例
|
|
|
const point = new BMapGL.Point(118.879999, 32.016216); // 创建点坐标
|
|
|
@@ -402,7 +431,52 @@ onMounted(() => {
|
|
|
console.log(e.latlng);
|
|
|
});
|
|
|
showMarks();
|
|
|
+ getList();
|
|
|
+ getStat();
|
|
|
});
|
|
|
+const getList = async () => {
|
|
|
+ const { dateRange } = queryParams.value;
|
|
|
+ if (dateRange && dateRange.length) {
|
|
|
+ queryParams.value.params.beginTime = dateRange[0];
|
|
|
+ queryParams.value.params.endTime = dateRange[1];
|
|
|
+ } else {
|
|
|
+ queryParams.value.params.beginTime = undefined;
|
|
|
+ queryParams.value.params.endTime = undefined;
|
|
|
+ }
|
|
|
+ const res = await listEvent(queryParams.value);
|
|
|
+ eventList.value = res.rows.map((item: any) => ({
|
|
|
+ ...item,
|
|
|
+ status: item.status || '2',
|
|
|
+ createTimeFormat: dateFormat(new Date(item.createTime), 'yyyy-MM-dd'),
|
|
|
+ ext1: item.ext1 ? JSON.parse(item.ext1) : [],
|
|
|
+ ext2: item.ext2 ? JSON.parse(item.ext2) : {}
|
|
|
+ }));
|
|
|
+ total.value = res.total;
|
|
|
+};
|
|
|
+const getStat = async () => {
|
|
|
+ const res = await listEvent({});
|
|
|
+ statData.monthCount = res.total;
|
|
|
+ statData.monthAlready = res.rows.filter((item) => item.status == '1').length;
|
|
|
+ statData.monthNot = res.rows.filter((item) => item.status == '2' || item.status === null).length;
|
|
|
+ statData.monthReport = res.rows.filter((item) => item.status == '3').length;
|
|
|
+};
|
|
|
+const resetQuery = () => {
|
|
|
+ queryParams.value = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 15,
|
|
|
+ level: undefined,
|
|
|
+ ext2: {
|
|
|
+ lx: undefined
|
|
|
+ },
|
|
|
+ dateRange: undefined,
|
|
|
+ addr: undefined,
|
|
|
+ params: {
|
|
|
+ beginTime: '',
|
|
|
+ endTime: ''
|
|
|
+ }
|
|
|
+ };
|
|
|
+ getList();
|
|
|
+};
|
|
|
onBeforeUnmount(() => {
|
|
|
const editor = editorRef.value;
|
|
|
if (editor == null) return;
|
|
|
@@ -417,39 +491,59 @@ const showMarks = () => {
|
|
|
bdmap.value.addOverlay(marker);
|
|
|
});
|
|
|
};
|
|
|
-const showDetails = () => {
|
|
|
- showReport.value = false;
|
|
|
+const showDetails = (row) => {
|
|
|
dialog.visible = true;
|
|
|
+ let imgList = [];
|
|
|
+ let videoList = [];
|
|
|
+ if (row.ext1 && row.ext1.length) {
|
|
|
+ videoList = row.ext1.filter((item) => item.includes('mp4')).map((item) => `http://jtjai.xt.wenhq.top:8083/api/oss/local/upload/${item}`);
|
|
|
+ imgList = row.ext1.filter((item) => !item.includes('mp4')).map((item) => `http://jtjai.xt.wenhq.top:8083/api/oss/local/upload/${item}`);
|
|
|
+ }
|
|
|
+ Object.assign(form.value, JSON.parse(JSON.stringify(row)), { imgList, videoList });
|
|
|
nextTick(() => {
|
|
|
- const dp = new DPlayer({
|
|
|
- container: document.getElementById('dplayer1'),
|
|
|
- video: {
|
|
|
- url: new URL(`@/assets/images/demo.mp4`, import.meta.url).href
|
|
|
- }
|
|
|
- });
|
|
|
- const dp2 = new DPlayer({
|
|
|
- container: document.getElementById('dplayer2'),
|
|
|
- video: {
|
|
|
- url: new URL(`@/assets/images/demo.mp4`, import.meta.url).href
|
|
|
- }
|
|
|
- });
|
|
|
- const dp3 = new DPlayer({
|
|
|
- container: document.getElementById('dplayer3'),
|
|
|
- video: {
|
|
|
- url: new URL(`@/assets/images/demo.mp4`, import.meta.url).href
|
|
|
- }
|
|
|
- });
|
|
|
- const dp4 = new DPlayer({
|
|
|
- container: document.getElementById('dplayer4'),
|
|
|
- video: {
|
|
|
- url: new URL(`@/assets/images/demo.mp4`, import.meta.url).href
|
|
|
- }
|
|
|
+ form.value.videoList.forEach((item, index) => {
|
|
|
+ new DPlayer({
|
|
|
+ container: document.getElementById(`dplayer${index}`),
|
|
|
+ video: {
|
|
|
+ url: item
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
-const generateReport = () => {
|
|
|
- showReport.value = true;
|
|
|
- proxy?.$modal.msgSuccess('报告生成成功');
|
|
|
+
|
|
|
+const generateClick = () => {
|
|
|
+ dialog.loading = ElLoading.service({
|
|
|
+ lock: true,
|
|
|
+ text: '正在生成报告，请稍候...',
|
|
|
+ fullscreen: false,
|
|
|
+ target: '.dialog-loading-warp',
|
|
|
+ background: 'rgba(255, 255, 255, 0.6)'
|
|
|
+ });
|
|
|
+ generateReport(form.value.id).then(({ code, msg }) => {
|
|
|
+ dialog.loading.close();
|
|
|
+ if (code == 200 && msg) {
|
|
|
+ showReport.value = true;
|
|
|
+ valueHtml.value = JSON.parse(msg).data.outputs.report;
|
|
|
+ proxy?.$modal.msgSuccess('报告生成成功');
|
|
|
+ } else {
|
|
|
+ proxy?.$modal.msgError('报告生成失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+const dialogClose = () => {
|
|
|
+ showReport.value = false;
|
|
|
+ dialog.loading && dialog.loading.close();
|
|
|
+};
|
|
|
+const formSubmit = async (field) => {
|
|
|
+ const { id } = form.value;
|
|
|
+ const params = {
|
|
|
+ id
|
|
|
+ };
|
|
|
+ params[field] = form.value[field];
|
|
|
+ await updateEvent(params);
|
|
|
+ getList();
|
|
|
+ getStat();
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -463,7 +557,27 @@ const generateReport = () => {
|
|
|
width: 300px;
|
|
|
top: 10px;
|
|
|
left: 20px;
|
|
|
+ bottom: 10px;
|
|
|
z-index: 10;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ > .el-card:nth-child(-n + 3) {
|
|
|
+ height: 22%;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ :deep(.el-card__body) {
|
|
|
+ height: 70%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .el-card:last-child {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ :deep(.el-card__body) {
|
|
|
+ height: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.right-part {
|
|
|
@@ -496,6 +610,7 @@ const generateReport = () => {
|
|
|
.custom-card {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ height: 100%;
|
|
|
|
|
|
.card-item {
|
|
|
display: flex;
|
|
|
@@ -503,7 +618,7 @@ const generateReport = () => {
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- height: 71px;
|
|
|
+ height: 100%;
|
|
|
background: #e3eefe;
|
|
|
color: #2d5794;
|
|
|
border-radius: 4.8px;
|
|
|
@@ -512,6 +627,8 @@ const generateReport = () => {
|
|
|
flex: 1;
|
|
|
font-size: 22px;
|
|
|
margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
span:last-child {
|
|
|
@@ -594,6 +711,10 @@ const generateReport = () => {
|
|
|
align-items: center;
|
|
|
padding-right: 20px;
|
|
|
|
|
|
+ .pagination-container {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
:deep() {
|
|
|
.el-pagination.is-background .btn-next,
|
|
|
.el-pagination.is-background .btn-prev,
|
|
|
@@ -662,6 +783,7 @@ const generateReport = () => {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.hidden-report {
|
|
|
position: absolute;
|
|
|
visibility: hidden;
|
|
|
@@ -680,9 +802,11 @@ const generateReport = () => {
|
|
|
background-color: #fff;
|
|
|
border: 1px solid #eee;
|
|
|
}
|
|
|
+
|
|
|
.report-editor {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
+
|
|
|
.report-title {
|
|
|
color: #5d5d5dd9;
|
|
|
font-size: 14px;
|
