| | |
| | | -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3); |
| | | background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/ |
| | | } |
| | | .el-range-input { |
| | | background-color: #09152f; |
| | | } |
| | | </style> |
New file |
| | |
| | | import http from "@/http"; |
| | | |
| | | export default { |
| | | baseCaseQuery: (params) => { |
| | | return http.get('/sccg/base_case/query_case', params); |
| | | }, |
| | | |
| | | // 获取处置结果详情 |
| | | getBaseCaseDetail: (id) => { |
| | | return http.get('/sccg/base_case/baseCaseDetail/' + id); |
| | | }, |
| | | |
| | | // 上传处置结果 |
| | | updateDisposeResult: (params) => { |
| | | return http.post('/sccg/dispatch_handle/addition_dispose_result', params); |
| | | }, |
| | | |
| | | // 违规检索 |
| | | getViolationList: (params) => { |
| | | return http.get('/sccg/base_case/query_for_violation', params); |
| | | }, |
| | | |
| | | // 下载违规检索数据 |
| | | exportViolationData: (params) => { |
| | | return http.downloadFile('/sccg/base_case/query_for_violation/export', params); |
| | | }, |
| | | |
| | | // 预警研判 |
| | | getInspectionData: (params) => { |
| | | return http.get('/sccg/base_case/video_inspection', params); |
| | | }, |
| | | |
| | | // 预警研判计数 |
| | | getInspectionCountData: (params) => { |
| | | return http.get('/sccg/base_case/video_inspection/Count', params); |
| | | }, |
| | | |
| | | // 预警研判确定 |
| | | confirmInspection: (params) => { |
| | | return http.put('/sccg/base_case/video_inspection', params); |
| | | }, |
| | | |
| | | // 趋势分析 |
| | | getTrendAnalysisData: (params) => { |
| | | return http.post('/sccg/trendAnalysis/info', params); |
| | | }, |
| | | |
| | | // 首次报警点位数据查询 |
| | | getFirstTrendAnalysisData: (params) => { |
| | | return http.post('/sccg/trendAnalysis/firstInfo', params); |
| | | }, |
| | | |
| | | getPointTrendAnalysisData: (params) => { |
| | | return http.post('/sccg/trendAnalysis/pointInfo', params); |
| | | } |
| | | |
| | | } |
| | |
| | | return http.get('/sccg/equipment_bayonet/query', params); |
| | | }, |
| | | exportBayonetList: (params) => { |
| | | return http.get('/sccg/equipment_bayonet/export', params); |
| | | return http.downloadFile('/sccg/equipment_bayonet/export', params); |
| | | }, |
| | | addBayonet: (params) => { |
| | | return http.post('/sccg/equipment_bayonet/addition', params); |
| | |
| | | handlePassVo: { workflowConfigSteps: mylist }, |
| | | baseCase: { state: mystate }, |
| | | } = this; |
| | | // console.log(this.handlePassVo.workflowConfigSteps[0].name); |
| | | // console.log(mylist); |
| | | console.log(mystate); |
| | | if (mystate === 6) { |
| | | this.active = 1; |
| | | } else if (mystate === 7) { |
| | |
| | | <div class="headerContent"> |
| | | <!-- 条件筛选 --> |
| | | <el-form ref="condition" :model="form" label-width="100px"> |
| | | <el-form-item :label=item.label :key=item.id v-for="item in headerList"> |
| | | <el-input v-model="item.value" :placeholder="item.placeholder"></el-input> |
| | | <el-form-item :label=item.label :key=item.id v-for="item in headerList" :prop="item.prop"> |
| | | <el-input v-if="item.type === 'input'" v-model="form[item.prop]" :placeholder="item.placeholder"></el-input> |
| | | <el-cascader v-if="item.type === 'cascader'" :options="item.options" :props="{ value: 'id', label: 'regionName' }" |
| | | v-model="form[item.prop]" :placeholder="item.placeholder"></el-cascader> |
| | | <el-select v-if="item.type === 'select'" v-model="form[item.prop]" :placeholder="item.placeholder"> |
| | | <el-option v-for="option in item.options" :value="option.id" :key="option.id" :label="option.name"></el-option> |
| | | </el-select> |
| | | <el-date-picker v-if="item.type === 'timepick'" type="datetimerange" v-model="form[item.prop]" start-placeholder="开始日期" |
| | | end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | |
| | | <div class="main-btns"> |
| | | <div class="main-btns-left"> |
| | | <el-button icon="el-icon-download">下载图片</el-button> |
| | | <el-button icon="el-icon-folder">导出</el-button> |
| | | <el-button icon="el-icon-folder" @click="exportTableData">导出</el-button> |
| | | </div> |
| | | <div class="main-btns-right"> |
| | | <el-button icon="el-icon-search">查询</el-button> |
| | | <el-button icon="el-icon-search" @click="searchTableData">查询</el-button> |
| | | <el-button icon="el-icon-delete-solid" @click="handleReset">重置</el-button> |
| | | </div> |
| | | </div> |
| | |
| | | :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> |
| | | <el-table-column type="selection" min-width="5"> |
| | | </el-table-column> |
| | | <el-table-column prop="number" label="事件编号" min-width="10"> |
| | | <el-table-column prop="code" label="事件编号" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="type" label="违规类型" min-width="10"> |
| | | <el-table-column prop="typeName" label="违规类型" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="source" label="事件来源" min-width="10"> |
| | | <el-table-column prop="eventSource" label="事件来源" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="level" label="事件等级" min-width="10"> |
| | | <el-table-column prop="gradeName" label="事件等级" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="point" label="报警点位" min-width="10"> |
| | | <el-table-column prop="streetName" label="报警点位" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="org" label="所属组织" min-width="10"> |
| | | <el-table-column prop="site" label="所属组织" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="alarmTime" label="报警时间" min-width="12"> |
| | | </el-table-column> |
| | |
| | | </el-table-column> |
| | | <el-table-column prop="state" label="审核状态" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="advice" label="处理意见" min-width="10"> |
| | | <el-table-column prop="handlingOpinion" label="处理意见" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="operation" label="操作" min-width="15"> |
| | | <template slot-scope="scope"> |
| | |
| | | </main> |
| | | <footer> |
| | | <!-- 查看具体信息 --> |
| | | <el-dialog title="事件详情" :visible.sync="dialogView" width="45%" :before-close="handleClose"> |
| | | <el-dialog title="事件详情" destroy-on-close :visible.sync="dialogView" width="45%" :before-close="handleClose"> |
| | | <ViewInfo :info="info"></ViewInfo> |
| | | </el-dialog> |
| | | </footer> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import helper from "@/utils/mydate.js" |
| | | import ViewInfo from './viewInfo' |
| | | import helper from "@/utils/mydate.js"; |
| | | import ViewInfo from './viewInfo'; |
| | | import basecase from "@/api/operate/basecase"; |
| | | import department from "@/api/system/department"; |
| | | import { getVideoPoint } from "@/api/operate/storeManagement"; |
| | | |
| | | export default { |
| | | components: { |
| | | ViewInfo |
| | | }, |
| | | |
| | | created() { |
| | | this.getTableData(); |
| | | |
| | | // 获取组织列表 |
| | | department.getDepartmentList() |
| | | .then(res => { |
| | | this.headerList[0].options = res; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | |
| | | getVideoPoint({ current: 1, size: 100 }) |
| | | .then(({ records }) => { |
| | | this.headerList[4].options = records; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | }, |
| | | |
| | | data() { |
| | | return { |
| | | tableData: [ |
| | | { |
| | | number: '123456', |
| | | type: '人民路右二', |
| | | source: '视频上报', |
| | | level: '一般事件', |
| | | point: '123.123,123.233', |
| | | org: '人民部', |
| | | alarmTime: '2022-02-12 12:00:00', |
| | | continueTime: '2小时30分钟06秒', |
| | | carNumber: '浙B245CM', |
| | | state: '待审核', |
| | | advice: '需及时处理' |
| | | }, |
| | | { |
| | | number: '123457', |
| | | type: '人民路左二', |
| | | source: '视频上报', |
| | | level: '高发事件', |
| | | point: '123.123,123.233', |
| | | org: '人民部', |
| | | alarmTime: '2022-02-12 12:00:00', |
| | | continueTime: '2小时30分钟06秒', |
| | | carNumber: '浙B245CM', |
| | | state: '待审核', |
| | | advice: '需及时处理' |
| | | }, |
| | | { |
| | | number: '123458', |
| | | type: '人寿路右二', |
| | | source: '视频上报', |
| | | level: '一般事件', |
| | | point: '123.123,123.233', |
| | | org: '人民部', |
| | | alarmTime: '2022-02-12 12:00:00', |
| | | continueTime: '2小时30分钟06秒', |
| | | carNumber: '浙B245CM', |
| | | state: '待审核', |
| | | advice: '需及时处理' |
| | | }, |
| | | { |
| | | number: '123459', |
| | | type: '人民路右二', |
| | | source: '视频上报', |
| | | level: '一般事件', |
| | | point: '123.123,123.233', |
| | | org: '人民部', |
| | | alarmTime: '2022-02-12 12:00:00', |
| | | continueTime: '2小时30分钟06秒', |
| | | carNumber: '浙B245CM', |
| | | state: '待审核', |
| | | advice: '需及时处理' |
| | | }, |
| | | { |
| | | number: '123460', |
| | | type: '人民路右二', |
| | | source: '视频上报', |
| | | level: '一般事件', |
| | | point: '123.123,123.233', |
| | | org: '人民部', |
| | | alarmTime: '2022-02-12 12:00:00', |
| | | continueTime: '2小时30分钟06秒', |
| | | carNumber: '浙B245CM', |
| | | state: '待审核', |
| | | advice: '需及时处理' |
| | | } |
| | | ], |
| | | context: "", |
| | | tableData: [], |
| | | dialogView: false, |
| | | info: '', |
| | | info: null, |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | headerList: [ |
| | | { |
| | | id: 1, |
| | | label: '所属组织:', |
| | | value: '', |
| | | placeholder: '请输入所属组织' |
| | | placeholder: '请输入所属组织', |
| | | prop: 'organization', |
| | | type: 'cascader', |
| | | options: [] |
| | | }, |
| | | { |
| | | id: 2, |
| | | label: '报警时间:', |
| | | value: '', |
| | | placeholder: '请输入报警时间' |
| | | placeholder: '请输入报警时间', |
| | | prop: 'alarmTime', |
| | | type: 'timepick' |
| | | }, |
| | | { |
| | | id: 3, |
| | | label: '违规类型:', |
| | | value: '', |
| | | placeholder: '请输入违规类型' |
| | | placeholder: '请输入违规类型', |
| | | prop: 'typeId', |
| | | type: 'input' |
| | | }, |
| | | { |
| | | id: 4, |
| | | label: '事件编号:', |
| | | value: '', |
| | | placeholder: '请输入事件编号' |
| | | placeholder: '请输入事件编号', |
| | | prop: 'code', |
| | | type: 'input' |
| | | }, |
| | | { |
| | | id: 5, |
| | | label: '监控点名称:', |
| | | value: '', |
| | | placeholder: '请输入监控点名称' |
| | | placeholder: '请输入监控点名称', |
| | | prop: 'videoPointId', |
| | | type: 'select', |
| | | options: [] |
| | | }, |
| | | { |
| | | id: 6, |
| | | label: '审核状态:', |
| | | value: '', |
| | | placeholder: '请输入审核状态' |
| | | placeholder: '请输入审核状态', |
| | | type: 'select', |
| | | options: [{ id: 7, name: '未审核' }, { id: 8, name: '已经审核' }, { id: 9, name: '结案' }] |
| | | }, |
| | | { |
| | | id: 7, |
| | | label: '车牌号:', |
| | | value: '', |
| | | placeholder: '请输入车牌号' |
| | | placeholder: '请输入车牌号', |
| | | prop: 'carNumber', |
| | | type: 'input' |
| | | }, |
| | | { |
| | | id: 8, |
| | | label: '处理意见:', |
| | | value: '', |
| | | placeholder: '请输入事件等级' |
| | | placeholder: '请输入事件等级', |
| | | prop: 'handlingOpinion', |
| | | type: 'input' |
| | | }, |
| | | { |
| | | id: 9, |
| | | label: '报警时间:', |
| | | label: '事件等级:', |
| | | value: '', |
| | | placeholder: '请输入所属组织' |
| | | placeholder: '请输入事件等级', |
| | | prop: 'gradeId', |
| | | type: 'input' |
| | | }, |
| | | ], |
| | | form: { |
| | | |
| | | gradeId: null, |
| | | alarmTime: null, |
| | | handlingOpinion: null, |
| | | streetId: null, |
| | | typeId: null, |
| | | code: null, |
| | | carNumber: null, |
| | | state: null, |
| | | videoPointId: null, |
| | | organization: null |
| | | } |
| | | } |
| | | }, |
| | | |
| | | methods: { |
| | | getTableData(params) { |
| | | basecase.getViolationList({ current: this.currentPage, pageSize: this.pageSize, ...params }) |
| | | .then(({ records }) => { |
| | | this.tableData = records; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | }, |
| | | |
| | | searchTableData() { |
| | | const { alarmTime, organization } = this.form; |
| | | const [startTime, endTime] = alarmTime ?? [null, null]; |
| | | const [communityId, streetId] = organization ?? [null, null]; |
| | | const params = Object.assign({}, this.form); |
| | | delete params.alarmTime; |
| | | delete params.organization; |
| | | this.getTableData({ startTime, streetId, communityId, endTime, ...params }); |
| | | }, |
| | | |
| | | changeTime({ createTime }) { |
| | | return helper(createTime); |
| | | }, |
| | | // 设置表格斑马纹 |
| | | tableRowClassName({ row, rowIndex }) { |
| | | if ((rowIndex + 1) % 2 == 0) { |
| | | if ((rowIndex + 1) % 2 === 0) { |
| | | return 'warning-row'; |
| | | } else { |
| | | return 'success-row'; |
| | | } |
| | | return ''; |
| | | }, |
| | | // 表单重置 |
| | | handleReset() { |
| | | this.headerList.forEach(item => { |
| | | item.value = '' |
| | | }) |
| | | this.$refs.condition.resetFields(); |
| | | this.getTableData(); |
| | | }, |
| | | // 关闭弹窗 |
| | | handleClose(done) { |
| | |
| | | handleView(data) { |
| | | this.info = data |
| | | this.dialogView = true |
| | | console.log(data) |
| | | }, |
| | | // 自定义关闭弹窗 |
| | | // myCloseDialog({flag,str,index}){ |
| | | // console.log( this[str]) |
| | | // if(index === 0){ |
| | | |
| | | // } |
| | | // } |
| | | |
| | | exportTableData() { |
| | | basecase.exportViolationData({ current: 1 }) |
| | | .then(() => { |
| | | this.$message.success('操作成功'); |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | |
| | | header { |
| | | background-color: #09152f; |
| | | border: 1pox solid #fff; |
| | | |
| | | .headerContent { |
| | | padding: 20px 40px; |
| | |
| | | background-color: #09152f; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | border: 1pox solid #fff; |
| | | |
| | | .mainTitle { |
| | | line-height: 60px; |
| | |
| | | .el-checkbox { |
| | | width: 80px; |
| | | padding: 0 10px; |
| | | } |
| | | |
| | | .el-select { |
| | | width: 120px; |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | |
| | | <div id="view-info"> |
| | | <el-form ref="info" :model="myInfo" label-width="100px"> |
| | | <el-form-item label="事件编号:"> |
| | | <el-input v-model="myInfo.number" disabled></el-input> |
| | | <el-input v-model="myInfo.code" disabled></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="违规类型:"> |
| | | <el-input v-model="myInfo.type" disabled></el-input> |
| | | <el-input v-model="myInfo.typeName" disabled></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="事件来源:"> |
| | | <el-input v-model="myInfo.source" disabled></el-input> |
| | | <el-input v-model="myInfo.eventSource" disabled></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="事件等级:"> |
| | | <el-input v-model="myInfo.level" disabled></el-input> |
| | | <el-input v-model="myInfo.gradeName" disabled></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="报警点位:"> |
| | | <el-input v-model="myInfo.point" disabled></el-input> |
| | | <el-input v-model="myInfo.streetName" disabled></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="所属组织:"> |
| | | <el-input v-model="myInfo.org" disabled></el-input> |
| | | <el-input v-model="myInfo.site" disabled></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="报警时间:"> |
| | | <el-input v-model="myInfo.alarmTime" disabled></el-input> |
| | |
| | | <el-input v-model="myInfo.state" disabled></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="处理意见:"> |
| | | <el-input v-model="myInfo.advice" disabled></el-input> |
| | | <el-input v-model="myInfo.handlingOpinion" disabled></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | |
| | | <template> |
| | | <div class="study-judge"> |
| | | <div class="study-judge-header"> |
| | | <span>您有1111条待审核报警信息,今日立案0条,再学习0条</span> |
| | | <span>您有1111条待审核报警信息,今日立案0条,再学习{{ currentEvent.review }}条</span> |
| | | </div> |
| | | <div class="study-judge-main"> |
| | | <!-- sjm:study-judge-main --> |
| | | <div class="sjm-header"> |
| | | <div class="sjm-header-left"> |
| | | <span class="moni-name">监控点位名称:中华路XX路口 </span> |
| | | <span class="moni-area">中华街道区域</span> |
| | | <span class="moni-name">监控点位名称: {{ currentEvent.name }} </span> |
| | | <span class="moni-area">{{ currentEvent.street }}</span> |
| | | </div> |
| | | <div class="sjm-header-right"> |
| | | <el-button size="small">实时预览</el-button> |
| | |
| | | <div class="sjm-content-left"> |
| | | <div class="img-item"> |
| | | <span>报警图片</span> |
| | | <img |
| | | src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg" |
| | | alt=""> |
| | | <img :src="currentEvent.picData"> |
| | | <span>报警时间:2022-09-08 14:23:34</span> |
| | | </div> |
| | | <div class="img-item"> |
| | |
| | | </div> |
| | | <el-form ref="currentEvent" label-width="120px" :model="currentEvent" :rules="rules"> |
| | | <el-form-item label="事件编号:"> |
| | | <span>{{ currentEvent.number }}</span> |
| | | <span>{{ currentEvent.code }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="事件等级:"> |
| | | <span>{{ currentEvent.level }}</span> |
| | | <span>{{ currentEvent.grade }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="首次报警时间:"> |
| | | <span>{{ currentEvent.firstTime }}</span> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import basecase from "@/api/operate/basecase"; |
| | | import { FILE_ORIGINAL_URL } from "@/utils"; |
| | | |
| | | export default { |
| | | created() { |
| | | basecase.getInspectionData({ current: 1 }) |
| | | .then(({ records }) => { |
| | | this.eventList = records; |
| | | this.currentEvent = this.eventList[0]; |
| | | if (this.currentEvent.picData) { |
| | | this.currentEvent.picData = `${FILE_ORIGINAL_URL}${this.currentEvent.picData}`; |
| | | } |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | |
| | | basecase.getInspectionCountData() |
| | | .then(res => { |
| | | this.currentEvent.review = res.review; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | }, |
| | | data() { |
| | | const validateAdvice = (rule,value,callback)=>{ |
| | | if(value){ |
| | |
| | | } |
| | | } |
| | | return { |
| | | eventList: [], |
| | | currentEvent: { |
| | | number: '1233123414141414', |
| | | level: '一般事件', |
| | | firstTime: '2022/09/23 12:00:00', |
| | | recentTime: '2022/09/23/ 12:00:00', |
| | | conntinueTime: '0小时10分钟', |
| | | advice: null, |
| | | type: '', |
| | | bigKind: '', |
| | | smallKind: '', |
| | | carNumber: '', |
| | | tip: '' |
| | | code: null, |
| | | grade: null, |
| | | picData: null, |
| | | street: null, |
| | | urlAddress: null, |
| | | name: null, |
| | | latitude: null, |
| | | longitude: null, |
| | | review: 0 |
| | | }, |
| | | adviceList: [ |
| | | { |
| | |
| | | <span class="trend-title">趋势分析</span> |
| | | <el-form ref="form" :model="search" label-width="6vw"> |
| | | <el-form-item label="类型查询"> |
| | | <el-input v-model="search.type" placeholder="内容信息"></el-input> |
| | | <el-select v-model="search.type" placeholder="内容信息"> |
| | | <el-option v-for="option in categoryOptions" :key="option.value" :value="option.value" :label="option.label" ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="时间范围"> |
| | | <el-input v-model="search.timeRange" suffix-icon="el-icon-date" placeholder="选择时间范围"></el-input> |
| | | <el-form-item class="time-area" label="时间范围"> |
| | | <el-date-picker v-model="search.timeRange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | |
| | | <div class="trend-data-show"> |
| | | <!-- 点位切换 --> |
| | | <div class="trend-data-header"> |
| | | <el-button type="text" @click="highFlag = true">高发点位</el-button> |
| | | <el-button type="text" @click="highFlag = false">首次违规点位</el-button> |
| | | <el-button type="text" @click="tabChange(1)">高发点位</el-button> |
| | | <el-button type="text" @click="tabChange(2)">首次违规点位</el-button> |
| | | </div> |
| | | <!-- 对应数据 --> |
| | | <div class="trend-data-main"> |
| | | <!-- --> |
| | | <div class="high-point" v-if="highFlag"> |
| | | <div class="point-item" v-for="item in highList" :key="item.id"> |
| | | <span>{{ item.pointName }}</span> |
| | | <span>{{ item.count }}</span> |
| | | </div> |
| | | </div> |
| | | <!-- 首次违规 --> |
| | | <div class="first-point" v-else> |
| | | <div class="point-item" v-for="item in fisrtList" :key="item.id"> |
| | | <span>{{ item.pointName }}</span> |
| | | <span>{{ item.count }}</span> |
| | | </div> |
| | | <div class="point-item" v-for="item in trendAnalysisList" :key="item.id" @click="pointClick(item)"> |
| | | <span>{{ item.name }}</span> |
| | | <span>{{ item.count }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="trend-main"> |
| | | <div class="trend-main-echarts" id="myRef"> |
| | | <div class="trend-main-echarts" id="echarts"> |
| | | |
| | | </div> |
| | | </div> |
| | | <div class="trend-footer" v-if="timeRangeFlag"> |
| | | <!-- 选择时间范围 --> |
| | | <div class="time-area"> |
| | | <el-date-picker v-model="search.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" |
| | | end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import * as echarts from 'echarts' |
| | | import { transform } from 'echarts-stat'; |
| | | import basecase from "@/api/operate/basecase"; |
| | | import { CATEGOTY } from "@/utils/helper"; |
| | | |
| | | export default { |
| | | created() { |
| | | this.searchList() |
| | | }, |
| | | |
| | | mounted() { |
| | | this.renderEchart(); |
| | | }, |
| | | |
| | | computed: { |
| | | categoryOptions() { |
| | | return CATEGOTY; |
| | | } |
| | | }, |
| | | |
| | | data() { |
| | | return { |
| | | search: { |
| | | type: '', |
| | | timeRange: '' |
| | | type: null, |
| | | timeRange: null |
| | | }, |
| | | timeRangeFlag: false, |
| | | highList: [ |
| | | { |
| | | id: 1, |
| | | pointName: '后庆路200号-球', |
| | | count: '100次', |
| | | }, |
| | | { |
| | | id: 2, |
| | | pointName: '后庆路200号-球', |
| | | count: '100次', |
| | | }, |
| | | { |
| | | id: 3, |
| | | pointName: '后庆路200号-球', |
| | | count: '100次', |
| | | }, |
| | | { |
| | | id: 4, |
| | | pointName: '后庆路200号-球', |
| | | count: '100次', |
| | | }, |
| | | { |
| | | id: 5, |
| | | pointName: '后庆路200号-球', |
| | | count: '100次', |
| | | }, |
| | | ], |
| | | fisrtList: [ |
| | | { |
| | | id: 1, |
| | | pointName: '后庆路205号-球', |
| | | count: '1次', |
| | | }, |
| | | { |
| | | id: 2, |
| | | pointName: '后庆路204号-球', |
| | | count: '1次', |
| | | }, |
| | | { |
| | | id: 3, |
| | | pointName: '后庆路203号-球', |
| | | count: '1次', |
| | | }, |
| | | { |
| | | id: 4, |
| | | pointName: '后庆路202号-球', |
| | | count: '1次', |
| | | }, |
| | | { |
| | | id: 5, |
| | | pointName: '后庆路201号-球', |
| | | count: '1次', |
| | | }, |
| | | ], |
| | | trendAnalysisList: [], |
| | | highFlag: true, |
| | | echarts: null, |
| | | pointName: null |
| | | } |
| | | }, |
| | | methods: { |
| | | renderEchart() { |
| | | // echarts.registerTransform(transform.regression); |
| | | const myChart = echarts.init(document.getElementById('myRef')); |
| | | renderEchart(dataList) { |
| | | if (!this.echarts) { |
| | | this.echarts = echarts.init(document.getElementById('echarts')); |
| | | } |
| | | // 绘制图表 |
| | | myChart.setOption({ |
| | | this.echarts.setOption({ |
| | | xAxis: { |
| | | name: '日/周', |
| | | }, |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [10, 22, 28, 23, 19], |
| | | data: dataList, |
| | | type: 'line', |
| | | smooth: true |
| | | } |
| | | ] |
| | | }); |
| | | }, |
| | | async searchList() { |
| | | const [startTime, endTime] = this.search.timeRange ?? [null, null]; |
| | | const trendAnalysisParam = { |
| | | startTime, |
| | | endTime, |
| | | type: this.search.type |
| | | } |
| | | this.trendAnalysisList = this.highFlag ? await basecase.getTrendAnalysisData(trendAnalysisParam) |
| | | : await basecase.getFirstTrendAnalysisData(trendAnalysisParam); |
| | | }, |
| | | tabChange(params) { |
| | | this.highFlag = params === 1; |
| | | this.searchList(); |
| | | }, |
| | | |
| | | pointClick(data) { |
| | | this.pointName = data.name; |
| | | basecase.getPointTrendAnalysisData({ id: data.id }) |
| | | .then(res => { |
| | | const countList = res.map(item => +item.count); |
| | | this.renderEchart(countList); |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.renderEchart() |
| | | } |
| | | } |
| | | </script> |
| | | |
| | |
| | | display: flex; |
| | | |
| | | .trend-side { |
| | | width: 20vw; |
| | | width: 30vw; |
| | | text-align: left; |
| | | height: 100%; |
| | | border: 1px solid #09152f; |
| | |
| | | } |
| | | |
| | | .trend-data-main { |
| | | |
| | | .high-point, |
| | | .first-point { |
| | | .point-item { |
| | | display: flex; |
| | | padding: 0 2vw; |
| | | justify-content: space-between; |
| | | } |
| | | .point-item { |
| | | display: flex; |
| | | padding: 0 2vw; |
| | | justify-content: space-between; |
| | | } |
| | | } |
| | | } |
| | |
| | | import uploadIll from "./updateUser/uploadResult/ill" |
| | | import MyDetail from '@/components/detail' |
| | | import MyIllDetail from '@/components/illdetail' |
| | | import casequery from "@/api/operate/casequery"; |
| | | import casequery from "@/api/operate/basecase"; |
| | | import helper from '@/utils/mydate' |
| | | export default { |
| | | components: { |
| | |
| | | <script> |
| | | import MyArrive from '../components/arrive' |
| | | import MyEvidence from "../components/evidence" |
| | | import casequery from "@/api/operate/casequery"; |
| | | import casequery from "@/api/operate/basecase"; |
| | | |
| | | export default { |
| | | components: { |
| | |
| | | async created() { |
| | | if (this.storeInfo) { |
| | | this.$set(this, 'store', this.storeInfo); |
| | | const result = await getVideoPoint({ current: 1, size: 1 }); |
| | | const result = await getVideoPoint({ current: 1, size: 100 }); |
| | | this.relationVideoList = result.records; |
| | | if (this.storeInfo && this.isStorePage) { |
| | | this.store.relationVideo = this.store.videoPoint.name; |
| | |
| | | <header> |
| | | <div class="header-nav"> |
| | | <span class="nav-left">数据筛选</span> |
| | | <span class="nav-right" @click="showMoreParamsDialog">高级搜索</span> |
| | | </div> |
| | | <div class="header-content"> |
| | | <div class="search"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-dialog |
| | | title="高级参数" |
| | | :visible.sync="isShowMoreParams" |
| | | width="30%"> |
| | | </el-dialog> |
| | | </main> |
| | | </div> |
| | | </template> |
| | |
| | | changeCurrentPage(page) { |
| | | this.currentPage = page; |
| | | this.getMessageList(); |
| | | }, |
| | | |
| | | showMoreParamsDialog() { |
| | | this.isShowMoreParams = true; |
| | | }, |
| | | |
| | | // 自定义关闭弹窗 |
| | |
| | | &::v-deep .el-dialog__close { |
| | | width: 20px; |
| | | height: 20px; |
| | | // color: #fff; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__body { |
| | |
| | | // 新建/保存消息(1:新建,0保存消息) |
| | | handleSubmit() { |
| | | this.$refs.user.validate((valid) => { |
| | | this.role.body = this.$refs.edit.editor.txt.html(); |
| | | if (valid) { |
| | | if (this.dialogType === 'create') { |
| | | SMS.addNewSMSTemplate(this.role) |
| | |
| | | import MyDetail from '@/components/detail' |
| | | import MyIllDetail from '@/components/illdetail' |
| | | import helper from '@/utils/mydate' |
| | | import casequery from "@/api/operate/casequery"; |
| | | import casequery from "@/api/operate/basecase"; |
| | | |
| | | export default { |
| | | components: { |
| | |
| | | |
| | | created() { |
| | | this.bayonet = deepClone(this.originalBayonet); |
| | | if (this.originalBayonet) { |
| | | this.bayonet.bayonetName = this.originalBayonet.name; |
| | | } |
| | | }, |
| | | |
| | | methods: { |
| | |
| | | config |
| | | .when(process.env.NODE_ENV !== 'development', |
| | | config => { |
| | | // config |
| | | // .plugin('ScriptExtHtmlWebpackPlugin') |
| | | // .after('html') |
| | | // .use('script-ext-html-webpack-plugin', [{ |
| | | // // `runtime` must same as runtimeChunk name. default is `runtime` |
| | | // inline: /runtime\..*\.js$/ |
| | | // }]) |
| | | // .end() |
| | | config |
| | | .optimization.splitChunks({ |
| | | chunks: 'all', |