|
|
@@ -1,80 +1,690 @@
|
|
|
<template>
|
|
|
- <div class="app-container home">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :sm="24" :lg="12" style="padding-left: 20px">
|
|
|
- <h2>交通事件管理系统</h2>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-divider />
|
|
|
+ <div class="home">
|
|
|
+ <div class="map" id="map"></div>
|
|
|
+ <div class="left-part">
|
|
|
+ <el-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="custom-title">
|
|
|
+ <img src="@/assets/images/title.svg" />
|
|
|
+ <span>本月</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="custom-card">
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>所有数量</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>已解决</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>未解决</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>已上报</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card style="margin-top: 10px">
|
|
|
+ <template #header>
|
|
|
+ <div class="custom-title">
|
|
|
+ <img src="@/assets/images/title.svg" />
|
|
|
+ <span>本周</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="custom-card week-card">
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>所有数量</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>已解决</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>未解决</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>已上报</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card style="margin-top: 10px">
|
|
|
+ <template #header>
|
|
|
+ <div class="custom-title">
|
|
|
+ <img src="@/assets/images/title.svg" />
|
|
|
+ <span>当天</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="custom-card day-card">
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>所有数量</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>已解决</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>未解决</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>147</span>
|
|
|
+ <span>已上报</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card style="margin-top: 10px">
|
|
|
+ <template #header>
|
|
|
+ <div class="custom-title">
|
|
|
+ <img src="@/assets/images/title.svg" />
|
|
|
+ <span>统计分析</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <BaseChart width="100%" height="230px" :option="pieOptions" />
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="right-part">
|
|
|
+ <div class="event-title">
|
|
|
+ <div>
|
|
|
+ <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-date-picker
|
|
|
+ v-model="queryParams.dateRange"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ type="daterange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="～"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :shortcuts="shortcuts"
|
|
|
+ />
|
|
|
+ </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>
|
|
|
+ </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-column prop="addr" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="date" />
|
|
|
+ <el-table-column width="60">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button link type="primary" @click="showDetails(row)">查看</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="event-footer">
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="1000" />
|
|
|
+ </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-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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </template> -->
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { Search, Location } 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';
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const bdmap = ref(null);
|
|
|
+const marks = ref([
|
|
|
+ {
|
|
|
+ longitude: 118.84651017058795,
|
|
|
+ latitude: 32.03286965957209
|
|
|
+ },
|
|
|
+ {
|
|
|
+ longitude: 118.87381865809128,
|
|
|
+ latitude: 32.050866853291296
|
|
|
+ },
|
|
|
+ {
|
|
|
+ longitude: 118.88459832421101,
|
|
|
+ latitude: 32.01094988629638
|
|
|
+ }
|
|
|
+]);
|
|
|
+const { event_level } = toRefs<any>(proxy?.useDict('event_level'));
|
|
|
+const editorRef = shallowRef();
|
|
|
+const toolbarConfig = {};
|
|
|
+const editorConfig = { placeholder: '请输入内容...' };
|
|
|
+// 内容 HTML
|
|
|
+const valueHtml = ref('<p>hello</p>');
|
|
|
+const handleCreated = (editor) => {
|
|
|
+ console.log('created', editor);
|
|
|
+ editorRef.value = editor; // 记录 editor 实例，重要！
|
|
|
+};
|
|
|
+const fileType = ref(1);
|
|
|
+const showReport = ref(false);
|
|
|
+const htmlToPdfFn = async () => {
|
|
|
+ const dom: any = document.querySelector('.w-e-text-container');
|
|
|
+ const filename = '报告';
|
|
|
+ const type = fileType.value;
|
|
|
+ switch (type) {
|
|
|
+ case 1:
|
|
|
+ await exportAsPdf(dom, filename);
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ await exportAsWord(dom, filename);
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ await exportAsImage(dom, filename);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
-<script setup name="Index" lang="ts">
|
|
|
-const goTarget = (url: string) => {
|
|
|
- window.open(url, '__blank');
|
|
|
+const queryParams = ref({
|
|
|
+ level: undefined,
|
|
|
+ dateRange: undefined,
|
|
|
+ addr: undefined
|
|
|
+});
|
|
|
+const dialog = reactive({
|
|
|
+ visible: false,
|
|
|
+ title: '事件详情'
|
|
|
+});
|
|
|
+const form = reactive({});
|
|
|
+const shortcuts = [
|
|
|
+ {
|
|
|
+ text: '最近一周',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ return [start, end];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近一个月',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ return [start, end];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近三个月',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
+ return [start, end];
|
|
|
+ }
|
|
|
+ }
|
|
|
+];
|
|
|
+const pieOptions = computed(() => {
|
|
|
+ const options = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ left: 'center',
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 8,
|
|
|
+ itemGap: 10
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: '50%',
|
|
|
+ radius: ['40%', '80%'],
|
|
|
+ center: ['50%', '60%'],
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 40,
|
|
|
+ name: '已解决',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FAC858'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 17,
|
|
|
+ name: '未解决',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#93BEFF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 15,
|
|
|
+ name: '已上报',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#507AFC'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ 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];
|
|
|
+onMounted(() => {
|
|
|
+ const map = new BMapGL.Map('map'); // 创建地图实例
|
|
|
+ const point = new BMapGL.Point(118.879999, 32.016216); // 创建点坐标
|
|
|
+ map.centerAndZoom(point, 14);
|
|
|
+ map.enableScrollWheelZoom(true);
|
|
|
+ bdmap.value = map;
|
|
|
+ map.addEventListener('click', function (e) {
|
|
|
+ const { lng, lat } = e.latlng;
|
|
|
+ console.log(e.latlng);
|
|
|
+ });
|
|
|
+ showMarks();
|
|
|
+});
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ const editor = editorRef.value;
|
|
|
+ if (editor == null) return;
|
|
|
+ editor.destroy();
|
|
|
+});
|
|
|
+const showMarks = () => {
|
|
|
+ bdmap.value.clearOverlays();
|
|
|
+ marks.value.forEach((item) => {
|
|
|
+ const pt = new BMapGL.Point(Number(item.longitude), Number(item.latitude));
|
|
|
+ const icon = new BMapGL.Icon(monitorIcon, new BMapGL.Size(30, 30));
|
|
|
+ const marker = new BMapGL.Marker(pt, { icon });
|
|
|
+ bdmap.value.addOverlay(marker);
|
|
|
+ });
|
|
|
+};
|
|
|
+const showDetails = () => {
|
|
|
+ showReport.value = false;
|
|
|
+ dialog.visible = true;
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+const generateReport = () => {
|
|
|
+ showReport.value = true;
|
|
|
+ proxy?.$modal.msgSuccess('报告生成成功');
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
.home {
|
|
|
- blockquote {
|
|
|
- padding: 10px 20px;
|
|
|
- margin: 0 0 20px;
|
|
|
- font-size: 17.5px;
|
|
|
- border-left: 5px solid #eee;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .left-part {
|
|
|
+ position: absolute;
|
|
|
+ width: 300px;
|
|
|
+ top: 10px;
|
|
|
+ left: 20px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-part {
|
|
|
+ position: absolute;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ top: 10px;
|
|
|
+ width: 550px;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 10px;
|
|
|
+ z-index: 10;
|
|
|
+ box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
- hr {
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- border: 0;
|
|
|
- border-top: 1px solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
- .col-item {
|
|
|
- margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-card {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .card-item {
|
|
|
+ display: flex;
|
|
|
+ width: 22.5%;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 71px;
|
|
|
+ background: #e3eefe;
|
|
|
+ color: #2d5794;
|
|
|
+ border-radius: 4.8px;
|
|
|
+
|
|
|
+ span:first-child {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 22px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:last-child {
|
|
|
+ width: 80%;
|
|
|
+ text-align: center;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ border-top: 0.6px solid #d0dff4;
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.week-card {
|
|
|
+ .card-item {
|
|
|
+ background: #fef4e3;
|
|
|
+
|
|
|
+ span:first-child {
|
|
|
+ color: #7c5b22;
|
|
|
+ }
|
|
|
|
|
|
- ul {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
+ span:last-child {
|
|
|
+ border-color: #eddbbc;
|
|
|
+ color: #8c692e;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.day-card {
|
|
|
+ .card-item {
|
|
|
+ background: #e3fef0;
|
|
|
|
|
|
- font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
|
- font-size: 13px;
|
|
|
- color: #676a6c;
|
|
|
- overflow-x: hidden;
|
|
|
+ span:first-child {
|
|
|
+ color: #248647;
|
|
|
+ }
|
|
|
|
|
|
- ul {
|
|
|
- list-style-type: none;
|
|
|
+ span:last-child {
|
|
|
+ border-color: #ade7cd;
|
|
|
+ color: #238546;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.event-title {
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding: 10px;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
|
|
|
- h4 {
|
|
|
- margin-top: 0px;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ > .el-select {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.event-list {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
- h2 {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 26px;
|
|
|
- font-weight: 100;
|
|
|
+ :deep() {
|
|
|
+ .el-table__cell {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- p {
|
|
|
- margin-top: 10px;
|
|
|
+.event-footer {
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 20px;
|
|
|
|
|
|
- b {
|
|
|
- font-weight: 700;
|
|
|
+ :deep() {
|
|
|
+ .el-pagination.is-background .btn-next,
|
|
|
+ .el-pagination.is-background .btn-prev,
|
|
|
+ .el-pagination.is-background .el-pager li {
|
|
|
+ background: transparent;
|
|
|
+ border: 1px solid #00000026;
|
|
|
+ color: #000000a6;
|
|
|
}
|
|
|
+
|
|
|
+ .el-pagination.is-background .is-active {
|
|
|
+ background: #1890ff !important;
|
|
|
+ border: none !important;
|
|
|
+ color: #fff !important;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.event-media {
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ background: #fbfbfb;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
}
|
|
|
|
|
|
- .update-log {
|
|
|
- ol {
|
|
|
- display: block;
|
|
|
- list-style-type: decimal;
|
|
|
- margin-block-start: 1em;
|
|
|
- margin-block-end: 1em;
|
|
|
- margin-inline-start: 0;
|
|
|
- margin-inline-end: 0;
|
|
|
- padding-inline-start: 40px;
|
|
|
+ &-content {
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .imgs {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ height: 100px;
|
|
|
+ width: 100px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ .videos {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ div {
|
|
|
+ height: 200px;
|
|
|
+ width: 32%;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.report-btn {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 62px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+.hidden-report {
|
|
|
+ position: absolute;
|
|
|
+ visibility: hidden;
|
|
|
+ left: -9999px;
|
|
|
+ top: -9999px;
|
|
|
+ width: max-content;
|
|
|
+ height: max-content;
|
|
|
+ display: inline-block;
|
|
|
+ contain: layout;
|
|
|
+}
|
|
|
+
|
|
|
+.report-content {
|
|
|
+ width: 800px;
|
|
|
+ height: auto;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #eee;
|
|
|
+}
|
|
|
+.report-editor {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.report-title {
|
|
|
+ color: #5d5d5dd9;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
</style>
|
