761 lines
20 KiB
Vue
761 lines
20 KiB
Vue
<template>
|
|
<div class="yp—home flex">
|
|
<!-- 左边 -->
|
|
<div class="leftbox">
|
|
<div class="title">
|
|
<span v-for="idx in 3" :key="idx" :class="'sircleL' + idx" class="sircle mr5"></span>
|
|
<span class="ml10 mr10">专题统计</span>
|
|
<span v-for="idx in 3" :key="idx" :class="'sircleR' + idx" class="sircle ml5"></span>
|
|
</div>
|
|
<div class="commCnt">
|
|
<div class="hh50">
|
|
<div class="comm-title">类型统计</div>
|
|
<div class="echartsBox">
|
|
<MoreBarEcharts echartsId="cztjEcharts" :data="obj.data_lxtj"></MoreBarEcharts>
|
|
</div>
|
|
</div>
|
|
<div class="hh50">
|
|
<div class="comm-title">会商统计</div>
|
|
<div class="echartsBox">
|
|
<LineEcharts echartsId="hstjEcharts" :data="obj.data_hstj"></LineEcharts>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右边 -->
|
|
<div class="rightbox">
|
|
<div class="title">
|
|
<span v-for="idx in 3" :key="idx" :class="'sircleL' + idx" class="sircle mr5"></span>
|
|
<span class="ml10 mr10">专题研判</span>
|
|
<span v-for="idx in 3" :key="idx" :class="'sircleR' + idx" class="sircle ml5"></span>
|
|
<el-button class="btn" type="primary" @click="handleYP">研判报告</el-button>
|
|
</div>
|
|
<div class="commCnt">
|
|
<div ref="searchBox">
|
|
<el-form :model="searchList" ref="searchFormRef" :inline="true">
|
|
<el-form-item label="类型">
|
|
<el-cascader clearable ref="cascaRef" v-model="searchList.lx" @change="changeCascader" collapse-tags
|
|
:show-all-levels="false" :disabled="readonly_lx" :options="cascaderList" :props="{ multiple: true }"
|
|
placeholder="请选择类型" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="人员">
|
|
<el-input @change="changeRy" v-model="searchList.ry" :disabled="readonly_ry" clearable
|
|
placeholder="请输入姓名或身份证"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="地点">
|
|
<div class="flex align-center">
|
|
<el-select v-model="searchList.dd" @change="changeBm" style="width: 180px;" :disabled="readonly_dd"
|
|
placeholder="行政区划">
|
|
<el-option label="区域" value="1"></el-option>
|
|
<el-option label="部门" value="2"></el-option>
|
|
</el-select>
|
|
<el-input @change="changeRy" :disabled="readonly_dd" v-model="searchList.xxdz" clearable
|
|
placeholder="请输入详细地址"></el-input>
|
|
</div>
|
|
</el-form-item> -->
|
|
<el-form-item label="时间">
|
|
<el-date-picker v-model="searchList.datetimes" type="daterange" unlink-panels :range-separator="'至'"
|
|
start-placeholder="开始日期时间" end-placeholder="结束日期时间" format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSearch">查询</el-button>
|
|
<el-button type="primary" @click="resetForm">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<ul class="listBox" :style="{ height: pageData.boxHeight + 'px' }">
|
|
<li class="list-item" ref="listBoxRef" v-for="(it, idx) in list" :key="idx">
|
|
<div class="comm-title title-s">{{ it.title }}</div>
|
|
<div class="list-table">
|
|
<MyTable :tableData="it.tableList" :tableColumn="it.tableColumn" :key="idx + '' + it.keyCount"
|
|
:fixed="false" :tableHeight="pageData.tableHeight" :tabelModel="it.title"
|
|
:tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
|
<template #jjdbh="{ row }">
|
|
<span @click="jqDetail(row)">{{ row.jjdbh }}</span>
|
|
</template>
|
|
<template #asjbh="{ row }">
|
|
<span @click="caseDetail(row, row.lx)">{{ row.asjbh }}</span>
|
|
</template>
|
|
<template #jqlbdm="{ row }">
|
|
<DictTag :tag="false" :value="row.jqlbdm" :options="JQLB" />
|
|
</template>
|
|
|
|
<template #ajzlbdm="{ row }">
|
|
<DictTag :tag="false" :value="row.ajzlbdm" :options="GA_D_XSAJLBDM" />
|
|
</template>
|
|
|
|
<template #controls="{ row }">
|
|
<el-link type="primary" size="small" @click="handleHs(row, it.lylx)">网上会商</el-link>
|
|
</template>
|
|
</MyTable>
|
|
<Pages @changeNo="changeNo($event, it.title)" @changeSize="changeSize($event, it.title)"
|
|
:tableHeight="pageData.tableHeight" :pageConfiger="{ ...it.pageConfiger }"></Pages>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <YpModel v-model="showModel" :textContent="textContent"></YpModel> -->
|
|
<!-- 弹窗 -->
|
|
<!-- <DetailDialog ref="detaileRef"></DetailDialog> -->
|
|
<!-- 研判报告弹窗 -->
|
|
<JudgmentReport v-model="visible" :search="search" :xzlx="xzlx"></JudgmentReport>
|
|
<DiscussionDialog v-model="showDialog" :dataList="dataList" :lx="lx" />
|
|
<PoliceIncidentDetails v-model="showJqDetail" :dataList="dataList" title="警情详情" />
|
|
<CaseDetails v-model="showCaseDetail" :dataList="dataList" title="案件详情" :lx="ajlx" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { lzJcjPjdbSelectPage } from '@/api/semanticAnalysis.js'
|
|
import { ElMessage } from "element-plus";
|
|
import JudgmentReport from './components/judgmentReport.vue'
|
|
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
|
import MoreBarEcharts from "@/views/home/echarts/moreBarEcharts.vue";
|
|
import LineEcharts from "@/views/home/echarts/moreLineEcharts.vue";
|
|
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
|
import Pages from "@/components/aboutTable/Pages.vue";
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { tbJqGetPageList, xsajSelectPage, xzajSelectPage } from '@/api/yj.js'
|
|
import DiscussionDialog from './components/discussionDialog.vue';
|
|
import PoliceIncidentDetails from './components/policeIncidentDetails.vue';
|
|
import CaseDetails from './components/caseDetails.vue';
|
|
const router = useRouter();
|
|
import { nextTick, onMounted, reactive, getCurrentInstance, ref, watch } from 'vue';
|
|
const { proxy } = getCurrentInstance();
|
|
const { JQLB } = proxy.$dict("JQLB"); //获取字典数据
|
|
const { GA_D_XSAJLBDM } = proxy.$fzdict("GA_D_XSAJLBDM"); //获取字典数据
|
|
const readonly_lx = ref(false)
|
|
const readonly_ry = ref(false)
|
|
const readonly_dd = ref(false)
|
|
const searchBox = ref();
|
|
const listBoxRef = ref();
|
|
// 图数据
|
|
const obj = ref({
|
|
data_lxtj: {
|
|
xData: ['网络舆情', '警情', '案件', '风险隐患'],
|
|
color: [['#0DBAC5', '#28EEBF'], ['#F06C0D', '#EEB416']],
|
|
labelColor: '#000',
|
|
list: [
|
|
{ label: '总数', val: [0, 0, 0, 0] },
|
|
]
|
|
},
|
|
data_hstj: {
|
|
xData: ['网络舆情', '警情', '案件', '风险隐患'],
|
|
color: ['#0386FB', '#00FFFF'],
|
|
labelColor: '#000',
|
|
list: [
|
|
{ label: '总数', val: [0, 0, 10, 0] },
|
|
]
|
|
}
|
|
})
|
|
const searchList = ref({})
|
|
let cascaderList = ref([
|
|
{ value: '01', label: '网络舆情', leaf: true },
|
|
{
|
|
value: '02', label: '警情', children: [
|
|
{ value: '021', label: '治安警情', leaf: true },
|
|
{ value: '022', label: '刑事警情', leaf: true },
|
|
{ value: '023', label: '交通警情', leaf: true },
|
|
]
|
|
},
|
|
{ value: '03', label: '刑事案件', leaf: true },
|
|
{ value: '04', label: '行政案件', leaf: true },
|
|
{ value: '05', label: '风险隐患', leaf: true },
|
|
])
|
|
const tableColumn = ref({
|
|
xz: [
|
|
{ label: "案件编号", prop: "asjbh", showOverflowTooltip: true, showSolt: true },
|
|
{ label: "案件标题", prop: "ajmc", showOverflowTooltip: true },
|
|
{ label: "简要案情", prop: "jyaq", showOverflowTooltip: true },
|
|
{ label: "案件类型", prop: "ajzlbdm", showOverflowTooltip: true, showSolt: true },
|
|
{ label: "案件时间", prop: "asjfssjAsjfskssj", showOverflowTooltip: true },
|
|
],
|
|
xs: [
|
|
{ label: "案件编号", prop: "asjbh", showOverflowTooltip: true, showSolt: true },
|
|
{ label: "案件标题", prop: "ajmc", showOverflowTooltip: true },
|
|
{ label: "简要案情", prop: "jyaq", showOverflowTooltip: true },
|
|
{ label: "案件类型", prop: "ajzlbdm", showOverflowTooltip: true, showSolt: true },
|
|
{ label: "案件时间", prop: "asjfssjAsjfskssj", showOverflowTooltip: true },
|
|
],
|
|
})
|
|
|
|
|
|
|
|
// 每个列表对应的值
|
|
const list = reactive([
|
|
{
|
|
title: '网络舆情', //标题
|
|
lylx: '01',
|
|
tableList: [],
|
|
keyCount: 0,
|
|
pageConfiger: {
|
|
page: 1,
|
|
total: 0,
|
|
pageSize: 6,
|
|
},
|
|
tableColumn: [
|
|
{ label: "舆情标题", prop: "yqbt", showOverflowTooltip: true },
|
|
{ label: "舆情内容", prop: "yqnr", showOverflowTooltip: true },
|
|
{ label: "舆情来源", prop: "yqly", showOverflowTooltip: true },
|
|
{ label: "舆情时间", prop: "yqsj", showOverflowTooltip: true },
|
|
],
|
|
},
|
|
{
|
|
title: '警情', //标题
|
|
tableList: [],
|
|
lylx: '02',
|
|
keyCount: 1,
|
|
pageConfiger: {
|
|
page: 1,
|
|
total: 0,
|
|
pageSize: 6,
|
|
},
|
|
tableColumn: [
|
|
{ label: "接警单编号", prop: "jjdbh", showOverflowTooltip: true, showSolt: true, },
|
|
{ label: "报警电话", prop: "bjdh", showOverflowTooltip: true },
|
|
{ label: "报警时间", prop: "bjsj", showOverflowTooltip: true },
|
|
{ label: "报警内容", prop: "bjnr", showOverflowTooltip: true },
|
|
{ label: "警情类型", prop: "jqlbdm", showSolt: true, showOverflowTooltip: true },
|
|
],
|
|
},
|
|
{
|
|
title: '案件', //标题
|
|
lylx: '03',
|
|
tableList: [],
|
|
keyCount: 2,
|
|
pageConfiger: {
|
|
page: 1,
|
|
total: 0,
|
|
pageSize: 10,
|
|
},
|
|
tableColumn: tableColumn.value.xs,
|
|
// [
|
|
// { label: "案件编号", prop: "asjbh", showOverflowTooltip: true },
|
|
// { label: "案件标题", prop: "ajmc", showOverflowTooltip: true },
|
|
// { label: "简要案情", prop: "jyaq", showOverflowTooltip: true },
|
|
// { label: "案件类型", prop: "ajzlbdm", showOverflowTooltip: true, showSolt: true },
|
|
// { label: "案件时间", prop: "asjfssjAsjfskssj", showOverflowTooltip: true },
|
|
// ],
|
|
},
|
|
{
|
|
title: '风险隐患', //标题
|
|
tableList: [],
|
|
keyCount: 3,
|
|
lylx: '04',
|
|
pageConfiger: {
|
|
page: 1,
|
|
total: 0,
|
|
pageSize: 6,
|
|
},
|
|
tableColumn: [
|
|
{ label: "隐患标题", prop: "yhbt", showOverflowTooltip: true },
|
|
{ label: "隐患内容", prop: "yhnr", showOverflowTooltip: true },
|
|
{ label: "隐患类型", prop: "yhlx", showOverflowTooltip: true },
|
|
{ label: "上报时间", prop: "sbsj", showOverflowTooltip: true },
|
|
],
|
|
},
|
|
])
|
|
const searchForm = ref({}) //赛选
|
|
|
|
// 列表公用
|
|
const pageData = reactive({
|
|
keyCount: 0,
|
|
tableConfiger: {
|
|
rowHieght: 61,
|
|
showSelectType: "null",
|
|
loading: false,
|
|
showIndex: false,
|
|
rowHeight: 30,
|
|
},
|
|
controlsWidth: 120, //操作栏宽度
|
|
});
|
|
watch(() => JQLB.value, (val) => {
|
|
if (val) {
|
|
cascaderList.value[1].children = val.map((el) => {
|
|
return { value: el.dm, label: el.zdmc, leaf: true }
|
|
})
|
|
}
|
|
},
|
|
{
|
|
deep: true, immediate: true
|
|
})
|
|
onMounted(() => {
|
|
getCount()
|
|
tabHeightFn()
|
|
getJqList() //警情列表
|
|
getAjList()//案件列表
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 选择类型
|
|
const changeCascader = (val) => {
|
|
readonly_lx.value = false;
|
|
readonly_ry.value = val ? true : false
|
|
readonly_dd.value = val ? true : false
|
|
searchList.value.ry = ''
|
|
searchList.value.ssbm = ''
|
|
}
|
|
|
|
// 重置
|
|
const resetForm = () => {
|
|
searchList.value = {}
|
|
searchForm.value = {}
|
|
readonly_lx.value = false
|
|
readonly_ry.value = false
|
|
readonly_dd.value = false
|
|
}
|
|
const dataSearch = ref({})
|
|
// 搜索
|
|
const xzlx = ref('02')
|
|
const onSearch = () => {
|
|
|
|
let len = []
|
|
xzlx.value = Array.isArray(searchList.value.lx) ? searchList.value.lx[0][0] : ''
|
|
console.log(xzlx.value);
|
|
const bjlbs = Array.isArray(searchList.value.lx) ? searchList.value.lx.map(item => {
|
|
len.push(item[0])
|
|
return item[item.length - 1]
|
|
}) : []
|
|
const uniqueArr = [...new Set(len)].length
|
|
if (uniqueArr > 1) {
|
|
return ElMessage.warning('只能选择一个类型')
|
|
}
|
|
dataSearch.value = {
|
|
startTime: searchList.value.datetimes ? searchList.value.datetimes[0] : '',
|
|
endTime: searchList.value.datetimes ? searchList.value.datetimes[1] : '',
|
|
bjlbs: bjlbs,
|
|
}
|
|
|
|
|
|
switch (xzlx.value) {
|
|
case '01':
|
|
break;
|
|
case '02':
|
|
getJqList()
|
|
break;
|
|
case '03':
|
|
getAjList()
|
|
break;
|
|
case '04':
|
|
getAjList()
|
|
break;
|
|
default:
|
|
getJqList()
|
|
getAjList()
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 警情列表
|
|
const getJqList = () => {
|
|
let params = {
|
|
pageCurrent: list[1].pageConfiger.page,
|
|
pageSize: list[1].pageConfiger.pageSize,
|
|
...dataSearch.value,
|
|
bjlbs: dataSearch.value.bjlbs?.join(',') || '',
|
|
}
|
|
lzJcjPjdbSelectPage(params).then(res => {
|
|
list[1].tableList = res.records || [];
|
|
list[1].pageConfiger.total = res.total;
|
|
})
|
|
}
|
|
// 案件列表
|
|
const getAjList = () => {
|
|
let params = {
|
|
pageCurrent: list[2].pageConfiger.page,
|
|
pageSize: list[2].pageConfiger.pageSize,
|
|
startTime: dataSearch.value.startTime,
|
|
endTime: dataSearch.value.endTime,
|
|
}
|
|
if (!dataSearch.value.bjlbs || dataSearch.value.bjlbs == '04') {
|
|
xzajSelectPage(params).then(res => {
|
|
list[2].tableColumn = tableColumn.value.xz
|
|
list[2].tableList = res.records.map(item => {
|
|
return {
|
|
...item,
|
|
lx: '2'
|
|
}
|
|
}) || [];
|
|
list[2].pageConfiger.total = res.total;
|
|
})
|
|
|
|
} else {
|
|
xsajSelectPage(params).then(res => {
|
|
list[2].tableColumn = tableColumn.value.xs
|
|
list[2].tableList = res.records.map(item => {
|
|
return {
|
|
...item,
|
|
lx: '1'
|
|
}
|
|
}) || [];
|
|
list[2].pageConfiger.total = res.total;
|
|
})
|
|
}
|
|
}
|
|
// 网上会商
|
|
const showDialog = ref(false)
|
|
const dataList = ref()
|
|
const lx = ref('1')
|
|
const handleHs = (val, it) => {
|
|
showDialog.value = true
|
|
dataList.value = { ...val }
|
|
lx.value = it
|
|
}
|
|
|
|
const ArrData = ref([
|
|
{
|
|
label: '警情',
|
|
value: 'jqsl'
|
|
},
|
|
{
|
|
label: '案件',
|
|
value: 'ajsl'
|
|
},
|
|
{
|
|
label: '风险隐患',
|
|
value: 'fxyh'
|
|
},
|
|
{
|
|
label: '网络舆情',
|
|
value: 'wlyq'
|
|
},
|
|
])
|
|
// 获取统计数据
|
|
const getCount = () => {
|
|
// 获取处置状态统计
|
|
qcckGet({}, '/mosty-gsxt/hsyp/znypLxtj').then(res => {
|
|
let arr = ArrData.value.map(item => {
|
|
return {
|
|
...item,
|
|
count: res[item.value] || 0
|
|
}
|
|
}) || [];
|
|
obj.value.data_lxtj.xData = arr.map(v => v.label);
|
|
obj.value.data_lxtj.list = [{ label: '总数', val: arr.map(v => v.count) }];
|
|
|
|
});
|
|
// 会商统计
|
|
qcckGet({}, '/mosty-gsxt/hsyp/znypHstj').then(res => {
|
|
let arr = ArrData.value.map(item => {
|
|
return {
|
|
...item,
|
|
count: res[item.value] || 0
|
|
}
|
|
}) || [];
|
|
obj.value.data_hstj.xData = arr.map(v => v.label);
|
|
obj.value.data_hstj.list = [{ label: '总数', val: arr.map(v => v.count) }];
|
|
});
|
|
};
|
|
|
|
// 分页
|
|
const changeNo = (e, type) => {
|
|
switch (type) {
|
|
case '网络舆情':
|
|
list[0].pageConfiger.page = e;
|
|
break;
|
|
case '警情':
|
|
list[1].pageConfiger.page = e;
|
|
getJqList()
|
|
break;
|
|
case '案件':
|
|
list[2].pageConfiger.page = e;
|
|
getAjList()
|
|
break;
|
|
case '风险隐患':
|
|
list[3].pageConfiger.page = e;
|
|
break;
|
|
}
|
|
// getJqList()
|
|
}
|
|
// 分页大小
|
|
const changeSize = (e, type) => {
|
|
switch (type) {
|
|
case '网络舆情':
|
|
list[0].pageConfiger.pageSize = e;
|
|
break;
|
|
case '警情':
|
|
list[1].pageConfiger.pageSize = e;
|
|
getJqList()
|
|
break;
|
|
case '案件':
|
|
list[2].pageConfiger.pageSize = e;
|
|
getAjList()
|
|
break;
|
|
case '风险隐患':
|
|
list[3].pageConfiger.pageSize = e;
|
|
break;
|
|
}
|
|
|
|
}
|
|
// 警情详情
|
|
const showJqDetail = ref(false)
|
|
const jqDetail = (val) => {
|
|
showJqDetail.value = true
|
|
dataList.value = { ...val }
|
|
}
|
|
// 案件详情
|
|
const showCaseDetail = ref(false)
|
|
const ajlx = ref()
|
|
const caseDetail = (val, lx) => {
|
|
ajlx.value = lx
|
|
showCaseDetail.value = true
|
|
dataList.value = { ...val }
|
|
}
|
|
// 打开研判报告
|
|
const visible = ref(false)
|
|
const search = ref({})
|
|
const handleYP = () => {
|
|
visible.value = true
|
|
|
|
if (searchList.value.lx.length == 0) {
|
|
xzlx.value = '02'
|
|
return
|
|
}
|
|
switch (xzlx.value) {
|
|
case '01':
|
|
break;
|
|
case '02':
|
|
let data = []
|
|
if (searchList.value.lx) {
|
|
data = searchList.value.lx.map(item => {
|
|
return item[item.length - 1]
|
|
})
|
|
}
|
|
search.value = {
|
|
lx: searchList.value.lx ? data : '',
|
|
startTime: searchList.value.datetimes ? searchList.value.datetimes[0] : '',
|
|
endTime: searchList.value.datetimes ? searchList.value.datetimes[1] : '',
|
|
}
|
|
break;
|
|
case '03':
|
|
search.value = {
|
|
startTime: searchList.value.datetimes ? searchList.value.datetimes[0] : '',
|
|
endTime: searchList.value.datetimes ? searchList.value.datetimes[1] : '',
|
|
}
|
|
break;
|
|
case '04':
|
|
search.value = {
|
|
startTime: searchList.value.datetimes ? searchList.value.datetimes[0] : '',
|
|
endTime: searchList.value.datetimes ? searchList.value.datetimes[1] : '',
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
// 表格高度计算
|
|
const tabHeightFn = () => {
|
|
pageData.boxHeight = window.innerHeight - searchBox.value.offsetHeight - 250
|
|
nextTick(() => {
|
|
pageData.tableHeight = listBoxRef.value[0].offsetHeight - 70;
|
|
});
|
|
window.onresize = function () {
|
|
tabHeightFn();
|
|
};
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.yp—home {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 15px;
|
|
box-sizing: border-box;
|
|
color: #000;
|
|
|
|
.leftbox {
|
|
width: 450px;
|
|
height: 100%;
|
|
margin-right: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.rightbox {
|
|
flex: 1 0 0;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
@mixin common($width: 16px, $opacity: 1) {
|
|
height: $width;
|
|
width: $width;
|
|
border-radius: 50%;
|
|
background: #0386FB;
|
|
opacity: $opacity;
|
|
}
|
|
|
|
// 共同
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 60px;
|
|
font-size: 24px;
|
|
position: relative;
|
|
|
|
.sircle {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sircleL1 {
|
|
@include common(8px, 0.5);
|
|
}
|
|
|
|
.sircleL2 {
|
|
@include common(12px, 0.75);
|
|
}
|
|
|
|
.sircleL3 {
|
|
@include common(16px);
|
|
}
|
|
|
|
.sircleR1 {
|
|
@include common(16px);
|
|
}
|
|
|
|
.sircleR2 {
|
|
@include common(12px, 0.75);
|
|
}
|
|
|
|
.sircleR3 {
|
|
@include common(8px, 0.5);
|
|
}
|
|
|
|
.btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 10px;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
.commCnt {
|
|
height: calc(100% - 60px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
padding: 10px 20px;
|
|
box-sizing: border-box;
|
|
|
|
.comm-title {
|
|
position: relative;
|
|
font-size: 20px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 78px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #3596F9 0%, rgba(53, 150, 249, 0) 100%);
|
|
border-radius: 4px 4px 4px 4px;
|
|
}
|
|
}
|
|
|
|
.echartsBox {
|
|
height: calc(100% - 30px);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
}
|
|
|
|
.listBox {
|
|
height: calc(100% - 110px);
|
|
margin-top: 4px;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
|
|
.list-item {
|
|
width: 49.5%;
|
|
height: calc(100% / 2 - 5px);
|
|
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.02);
|
|
border-radius: 8px 8px 8px 8px;
|
|
border: 1px solid #E8EDF6;
|
|
padding: 4px 4px;
|
|
box-sizing: border-box;
|
|
margin-bottom: 5px;
|
|
|
|
.title-s {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.list-table {
|
|
margin-top: 5px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.list-item:nth-child(2n+1) {
|
|
margin-right: 1%;
|
|
}
|
|
}
|
|
|
|
::v-deep .searchBox {
|
|
margin-bottom: 0 !important;
|
|
padding: 2px !important;
|
|
}
|
|
|
|
::v-deep .el-table .table_blue_row {
|
|
background: #fff !important;
|
|
}
|
|
|
|
::v-deep .el-table th.el-table__cell {
|
|
font-size: 13px;
|
|
background: #EFF5F7;
|
|
}
|
|
|
|
::v-deep .el-table__empty-block {
|
|
width: 100% !important;
|
|
}
|
|
|
|
::v-deep .el-scrollbar__view {
|
|
border-right: none;
|
|
}
|
|
|
|
::v-deep .el-table .el-table__cell {
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
::v-deep .el-table th.el-table__cell>.cell {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
::v-deep .el-link {
|
|
margin: 3px;
|
|
}
|
|
|
|
.html_bt>>>p {
|
|
color: red;
|
|
}
|
|
|
|
::v-deep .el-date-editor .el-range-separator {
|
|
color: #333;
|
|
}
|
|
</style>
|