1674 lines
46 KiB
Vue
1674 lines
46 KiB
Vue
<template>
|
||
<div class="AppQxnDv">
|
||
<div class="left">
|
||
<AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
|
||
</AiDvPanel>
|
||
<div class="left-list">
|
||
<div
|
||
class="left-item"
|
||
v-for="(item, index) in areaList"
|
||
:class="[gridParentId === item.gridId ? 'active' : '']"
|
||
:key="index"
|
||
@click="init(item.gridId)">
|
||
<i>{{ index + 1 }}</i>
|
||
<div class="left-item__top">
|
||
<h2>{{ item.gridName }}</h2>
|
||
<el-select v-model="gridId" @change="onStationChange" size="mini" v-if="gridParentId === item.gridId && index !== 0" placeholder="请选择派出所">
|
||
<el-option
|
||
:label="item.gridName"
|
||
:value="item.gridId"
|
||
v-for="(item, index) in policeStationList"
|
||
:key="index">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="left-item__bottom">
|
||
<span>网格员：{{ item.allGridMemberCount }}</span>
|
||
<span>已办：{{ item.allWXMemberCount }}</span>
|
||
<span>事件：{{ item.allWXMemberCount }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="right-left">
|
||
<AiDvPanel style="width: 100%" border="border6" title="警格事件概況">
|
||
<div class="right-left__total AppQxnDv-total">
|
||
<div class="item">
|
||
<h2>全部上报事件</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wxGridReportOverviewInfo['全部上报事件数量'] }}</span>
|
||
<i>条</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>已办结事件</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wxGridReportOverviewInfo['已办结数量'] }}</span>
|
||
<i>条</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>办理中事件</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wxGridReportOverviewInfo['办理中数量'] }}</span>
|
||
<i>条</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>待处理事件</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ wxGridReportOverviewInfo['待受理数量'] }}</span>
|
||
<i>条</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-left__top">
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>上报来源分布</h2>
|
||
</div>
|
||
<ai-echart-v2
|
||
style="height: 220px; width: 245px; margin-top: 10px;"
|
||
:ref="'chart1'"
|
||
:data="chartData1"
|
||
:ops="chartConfig1">
|
||
</ai-echart-v2>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>事件办理情況</h2>
|
||
</div>
|
||
<ai-echart-v2
|
||
style="height: 220px; width: 265px; margin-top: 10px;"
|
||
:ref="'chart2'"
|
||
:data="chartData2"
|
||
:ops="chartConfig2">
|
||
</ai-echart-v2>
|
||
</div>
|
||
</div>
|
||
<div class="right-left__middle">
|
||
<div class="left">
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>事件受理率</h2>
|
||
</div>
|
||
<DoughnutChart :labelStyle="{width: '96px'}" :ratio="sllRate" :value="sllData"></DoughnutChart>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>事件办结率</h2>
|
||
</div>
|
||
<DoughnutChart :labelStyle="{width: '96px'}" :ratio="sjbjRate" :value="sjbjData"></DoughnutChart>
|
||
</div>
|
||
</div>
|
||
<div class="right wrapper">
|
||
<div class="AppQxnDv-title">
|
||
<h2>最新办理动态</h2>
|
||
<el-select v-model="type" @change="onChange" style="width: 92px" size="mini" placeholder="请选择">
|
||
<el-option label="新办结" value="0"></el-option>
|
||
<el-option label="新受理" value="1"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<ai-table
|
||
width="265px"
|
||
style="margin-top: 10px;"
|
||
height="210px"
|
||
:tableData="tableData1"
|
||
:col-configs="colConfigs1"
|
||
:isShowPagination="false"
|
||
@getList="() => {}">
|
||
</ai-table>
|
||
</div>
|
||
</div>
|
||
<div class="right-left__bottom">
|
||
<div class="AppQxnDv-title">
|
||
<div class="left AppQxnDv-title__tab">
|
||
<h2
|
||
@click="onTypeChange(index)"
|
||
:class="[currIndex === index ? 'active' : '']"
|
||
v-for="(item, index) in eventList"
|
||
:key="index">
|
||
{{ item.categoryName }}
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<ai-echart-v2
|
||
style="height: 236px; margin-top: 10px; width: 100%;"
|
||
:ref="'chart3'"
|
||
:data="chartData3"
|
||
:ops="chartConfig3">
|
||
</ai-echart-v2>
|
||
</div>
|
||
</AiDvPanel>
|
||
</div>
|
||
<div class="right-middle">
|
||
<AiDvPanel style="width: 100%" border="border6" title="综合概况图">
|
||
<div class="right-left__total AppQxnDv-total">
|
||
<div class="item">
|
||
<h2>警格上报事件</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['警格累计上报'] }}</span>
|
||
<i>条</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>居民上报事件</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['居民累计上报'] }}</span>
|
||
<i>条</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>今日待处理</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['今日待处理'] }}</span>
|
||
<i>条</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>今日办理中</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['今日办理中'] }}</span>
|
||
<i>条</i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<h2>今日已办结</h2>
|
||
<div class="item-bottom">
|
||
<span>{{ middleTotalInfo['今日办结'] }}</span>
|
||
<i>条</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrapper">
|
||
<DvMap :instance="instance" style="width: 100%; height: 356px;" type="1"></DvMap>
|
||
</div>
|
||
<div class="right-middle__bottom">
|
||
<div class="AppQxnDv-title">
|
||
<h2>事件列表</h2>
|
||
<div class="right">
|
||
<el-select clearable @change="getReportList" v-model="search.source" style="width: 82px; margin-right:6px;" size="mini" placeholder="上报来源">
|
||
<el-option label="巡查上报" value="0"></el-option>
|
||
<el-option label="居民上报" value="1"></el-option>
|
||
</el-select>
|
||
<el-select clearable @change="getReportList" v-model="search.categoryId" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
|
||
<el-option
|
||
v-for="(item, index) in eventList"
|
||
:key="index"
|
||
:label="item.categoryName"
|
||
:value="item.categoryId">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select clearable @change="getReportList" v-model="search.status" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件状态">
|
||
<el-option label="待受理" value="0"></el-option>
|
||
<el-option label="办理中" value="1"></el-option>
|
||
<el-option label="已办结" value="2"></el-option>
|
||
<el-option label="已拒绝" value="3"></el-option>
|
||
</el-select>
|
||
<el-select clearable @change="getReportList" v-model="search.dateRange" style="width: 82px; margin-right:6px;" size="mini" placeholder="最近30天">
|
||
<el-option label="昨天" value="0"></el-option>
|
||
<el-option label="近7天" value="1"></el-option>
|
||
<el-option label="近30天" value="2"></el-option>
|
||
</el-select>
|
||
<el-input placeholder="关键词" v-model="search.param" v-throttle="() => {getReportList()}" style="width: 98px;">
|
||
<el-button slot="append" icon="el-icon-search"></el-button>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
<ai-table
|
||
style="margin-top: 10px; width: 556px;"
|
||
height="420px"
|
||
:tableData="tableData3"
|
||
:col-configs="colConfigs3"
|
||
:isShowPagination="false"
|
||
@getList="() => {}">
|
||
</ai-table>
|
||
</div>
|
||
</AiDvPanel>
|
||
</div>
|
||
<div class="right-right">
|
||
<AiDvPanel class="bottom" style="width: 410px" border="border6" title="办理排行">
|
||
<ai-table
|
||
height="890px"
|
||
:tableData="reportHandleList"
|
||
:col-configs="colConfigs2"
|
||
:isShowPagination="false"
|
||
@getList="() => {}">
|
||
<el-table-column slot="index" label="排名" align="center" width="58">
|
||
<template slot-scope="{ $index }">
|
||
<div class="table-index" :class="[$index < 3 ? 'table-index__active' : '']">
|
||
<span>{{ $index + 1 }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</AiDvPanel>
|
||
</div>
|
||
</div>
|
||
<transition name="fade">
|
||
<div class="event-info" v-if="isShow">
|
||
<div class="info-mask" @click="isShow = false"></div>
|
||
<div class="info-content">
|
||
<div class="info-title">
|
||
<h2>事件详情</h2>
|
||
</div>
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShow = false" />
|
||
<h3 :title="eventInfo.desc">{{ eventInfo.desc }}</h3>
|
||
<div class="info-wrapper">
|
||
<div class="info-wrapper__item">
|
||
<label>办理状态：</label>
|
||
<span :style="{color: mapStatus(eventInfo.status, 'color')}">{{ mapStatus(eventInfo.status, 'name') }}</span>
|
||
</div>
|
||
<div class="info-wrapper__item">
|
||
<label>上报来源：</label>
|
||
<span>{{ eventInfo.typeName }}</span>
|
||
</div>
|
||
<div class="info-wrapper__item">
|
||
<label>发生地点：</label>
|
||
<span>{{ eventInfo.location.address }}</span>
|
||
</div>
|
||
<div class="info-wrapper__item">
|
||
<label>事件类别：</label>
|
||
<span>{{ eventInfo.case_name }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-bottom">
|
||
<h3>办理流程</h3>
|
||
<div class="info-bottom__wrapper">
|
||
<div class="info-bottom__item" v-for="(item, index) in eventInfo.process_list" :key="index">
|
||
<h4>{{ item.solve_username }}</h4>
|
||
<div class="middle">
|
||
<p :title="item.process_desc">{{ item.process_desc }}</p>
|
||
<span>{{ $moment(item.solved_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||
</div>
|
||
<i>{{ mapProcessType(item.process_type) }}</i>
|
||
</div>
|
||
</div>
|
||
<div class="progress" v-if="false">
|
||
<div class="progress-item active" v-for="(item, index) in eventInfo.process_list" :key="index">
|
||
<h4>{{ mapStatus(item.status, 'name') }}</h4>
|
||
<div class="progress-item__middle">
|
||
<i></i>
|
||
</div>
|
||
<p>{{ item.solve_username }}</p>
|
||
<span>{{ $moment(item.solved_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import DvMap from './components/DvMap'
|
||
import DoughnutChart from './components/DoughnutChart'
|
||
export default {
|
||
name: 'AppQxnEventDv',
|
||
label: '事件上报',
|
||
|
||
props: {
|
||
instance: Function
|
||
},
|
||
|
||
components: {
|
||
DvMap,
|
||
DoughnutChart
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
policeStationList: [],
|
||
currIndex: 0,
|
||
areaList: [],
|
||
type: '0',
|
||
isShow: false,
|
||
middleTotalInfo: {},
|
||
gridId: '',
|
||
gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
|
||
chartConfig1: {
|
||
legend: {
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '0%',
|
||
top: '40px',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0, 102, 154, 0.65)',
|
||
borderColor: 'rgba(0, 102, 154, 0.65)',
|
||
textStyle: { color: '#fff' },
|
||
axisPointer: { type: 'cross' }
|
||
},
|
||
color: ['#33CCCC', '#DBB36E'],
|
||
xAxis: {
|
||
type: "category",
|
||
axisTick: {show: false},
|
||
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
|
||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||
},
|
||
yAxis: {
|
||
nameGap: 23,
|
||
minInterval: 1,
|
||
splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
|
||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||
axisPointer: { snap: true }
|
||
},
|
||
series: [
|
||
{
|
||
name: '警格上报',
|
||
type: 'bar',
|
||
barWidth: '15',
|
||
stack: 'one'
|
||
},
|
||
{
|
||
name: '居民上报',
|
||
barWidth: '15',
|
||
type: 'bar',
|
||
stack: 'one'
|
||
}
|
||
]
|
||
},
|
||
chartConfig2: {
|
||
legend: {
|
||
itemWidth: 16,
|
||
itemGap: 4,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: '12'
|
||
},
|
||
icon: 'roundRect'
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '0%',
|
||
top: '40px',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0, 102, 154, 0.65)',
|
||
borderColor: 'rgba(0, 102, 154, 0.65)',
|
||
textStyle: { color: '#fff' },
|
||
axisPointer: { type: 'cross' }
|
||
},
|
||
color: ['#33CCCC', '#2C97E8','#BFEAFF', '#DBB36E'],
|
||
xAxis: {
|
||
type: "category",
|
||
axisTick: {show: false},
|
||
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
|
||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||
},
|
||
yAxis: {
|
||
nameGap: 23,
|
||
minInterval: 1,
|
||
splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
|
||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||
axisPointer: { snap: true }
|
||
},
|
||
daemon: (color) => ({
|
||
showSymbol: false,
|
||
smooth: true,
|
||
lineStyle: {
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 2,
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: this.Hex2RGBA(color, 0.3) },
|
||
{ offset: 1, color: this.Hex2RGBA(color, 0.1) }
|
||
]
|
||
}
|
||
}
|
||
})
|
||
},
|
||
chartData3: [] ,
|
||
chartConfig3: {
|
||
xAxis: {
|
||
type: "category",
|
||
axisTick: {show: false},
|
||
axisLabel: {color: '#8FABBF', fontSize: 12},
|
||
axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } }
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0, 102, 154, 0.65)',
|
||
borderColor: 'rgba(0, 102, 154, 0.65)',
|
||
textStyle: { color: '#fff' },
|
||
axisPointer: { type: 'cross' }
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '0%',
|
||
top: '40px',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
yAxis: {
|
||
nameGap: 23,
|
||
minInterval: 1,
|
||
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
|
||
axisPointer: { show: false },
|
||
axisLabel: {color: '#8FABBF', fontSize: 12}
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
triggerTooltip: false,
|
||
shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
|
||
},
|
||
color: [
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(51, 204, 204, 1)' },
|
||
{ offset: 1, color: 'rgba(31, 89, 89, 0.25)' }
|
||
]
|
||
},
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(44, 151, 232, 1)' },
|
||
{ offset: 1, color: 'rgba(21, 154, 255, 0)' }
|
||
]
|
||
},
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(191, 234, 255, 1)' },
|
||
{ offset: 1, color: 'rgba(191, 234, 255, 0.1)' }
|
||
]
|
||
},
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
x2: 0,
|
||
y: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(219, 179, 110, 1)' },
|
||
{ offset: 1, color: 'rgba(219, 179, 110, 0.1)' }
|
||
]
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '已办结',
|
||
type: 'bar',
|
||
barWidth: '8'
|
||
},
|
||
{
|
||
name: '待受理',
|
||
barWidth: '8',
|
||
type: 'bar'
|
||
},
|
||
{
|
||
name: '处理中',
|
||
barWidth: '8',
|
||
type: 'bar'
|
||
},
|
||
{
|
||
name: '已拒绝',
|
||
barWidth: '8',
|
||
type: 'bar'
|
||
}
|
||
]
|
||
},
|
||
wxGridReportOverviewInfo: {},
|
||
tableData1: [],
|
||
colConfigs1: [
|
||
{ prop: 'createTime', label: '时间', align: 'center', width: '60px', dateFormat: 'MM/DD' },
|
||
{ prop: 'reporterName', label: '姓名', align: 'center' },
|
||
{ prop: 'caseName', label: '事件名称', align: 'left', width: 130 }
|
||
],
|
||
eventInfo: {},
|
||
reportHandleList: [],
|
||
colConfigs2: [
|
||
{ slot: 'index' },
|
||
{ prop: 'name', label: '姓名', align: 'center' },
|
||
{ prop: 'overCount', label: '已办结', align: 'center', width: 60 },
|
||
{ prop: 'handleCount', label: '办理中', align: 'center', width: 60 },
|
||
{ prop: 'reportCount', label: '上报数', align: 'center', width: 60 },
|
||
{
|
||
prop: 'reportCount',
|
||
label: '联系TA',
|
||
align: 'center',
|
||
render: (h, params) => {
|
||
return h(
|
||
'p', {
|
||
style: {
|
||
width: '52px',
|
||
height: '22px',
|
||
textAlign: 'center',
|
||
lineHeight: '22px',
|
||
color: '#D4F2FF',
|
||
cursor: 'pointer',
|
||
margin: '0 auto',
|
||
borderRadius: '4px',
|
||
backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
|
||
},
|
||
on: {
|
||
click: e => {
|
||
this.getLaunchCode(params.row.wxUserId)
|
||
}
|
||
},
|
||
}, '联系TA'
|
||
)
|
||
}
|
||
}
|
||
],
|
||
colConfigs3: [
|
||
{ prop: 'createTime', label: '时间', align: 'center', dateFormat: 'MM/DD' },
|
||
{ prop: 'desc', label: '事件内容', align: 'left', width: 300 },
|
||
{
|
||
prop: 'status',
|
||
label: '状态',
|
||
align: 'center',
|
||
render: (h, params) => {
|
||
return h(
|
||
'i', {
|
||
style: {
|
||
display: 'inline-block',
|
||
fontStyle: 'normal',
|
||
width: '52px',
|
||
height: '20px',
|
||
textAlgin: 'center',
|
||
lineHeight: '20px',
|
||
color: this.mapStatus(params.row.status, 'color'),
|
||
margin: '0 auto',
|
||
borderRadius: '2px',
|
||
background: this.mapStatus(params.row.status, 'bgColor'),
|
||
}
|
||
}, this.mapStatus(params.row.status, 'name')
|
||
)
|
||
}
|
||
},
|
||
{
|
||
prop: 'reportCount',
|
||
label: '查看',
|
||
align: 'center',
|
||
render: (h, params) => {
|
||
return h(
|
||
'p', {
|
||
style: {
|
||
color: '#00AAFF',
|
||
cursor: 'pointer'
|
||
},
|
||
on: {
|
||
click: () => {
|
||
this.getEventInfo(params.row.orderId, params.row)
|
||
}
|
||
},
|
||
}, '查看>>'
|
||
)
|
||
}
|
||
}
|
||
],
|
||
tableData3: [],
|
||
search: {
|
||
dateRange: '',
|
||
param: '',
|
||
source: '',
|
||
status: '',
|
||
categoryId: ''
|
||
},
|
||
eventList: []
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
chartData1 () {
|
||
if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
|
||
return []
|
||
}
|
||
|
||
return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
|
||
return {
|
||
name: v['月份'] + '月',
|
||
'警格上报': v['警格上报'],
|
||
'居民上报': v['居民上报']
|
||
}
|
||
})
|
||
},
|
||
|
||
chartData2 () {
|
||
if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
|
||
return []
|
||
}
|
||
|
||
return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
|
||
return {
|
||
name: v['月份'] + '月',
|
||
'上报总数': v['上报数量'],
|
||
'已办理': v['已拒绝数量'],
|
||
'已拒绝': v['已拒绝数量']
|
||
}
|
||
})
|
||
},
|
||
|
||
sllData () {
|
||
return [{
|
||
key: '累计受理事件',
|
||
value: this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']
|
||
},{
|
||
key: '累计上报事件',
|
||
value: this.wxGridReportOverviewInfo['全部上报事件数量']
|
||
}]
|
||
},
|
||
|
||
sllRate () {
|
||
if (!this.wxGridReportOverviewInfo['待受理数量']) {
|
||
return 0
|
||
}
|
||
|
||
return Number((((this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']) / this.wxGridReportOverviewInfo['全部上报事件数量']) * 100).toFixed(2))
|
||
},
|
||
|
||
sjbjData () {
|
||
return [{key: '累计办结事件', value: this.wxGridReportOverviewInfo['已办结数量']}, {key: '累计受理事件', value: this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']}]
|
||
},
|
||
|
||
sjbjRate () {
|
||
if (!this.wxGridReportOverviewInfo['待受理数量']) {
|
||
return 0
|
||
}
|
||
|
||
return Number(((this.wxGridReportOverviewInfo['已办结数量'] / (this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量'])) * 100).toFixed(2))
|
||
},
|
||
},
|
||
|
||
mounted () {
|
||
this.instance.post(`/api/wxgridcata/list`, null, {
|
||
params: {
|
||
level: 1,
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.eventList = res.data.records
|
||
this.init()
|
||
}
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
mapProcessType (status) {
|
||
return {
|
||
'1': '创建',
|
||
'2': '受理',
|
||
'3': '分配',
|
||
'4': '转交',
|
||
'5': '办结',
|
||
'6': '拒绝',
|
||
'7': '办理中'
|
||
}[status]
|
||
},
|
||
|
||
getLaunchCode (wxUserId) {
|
||
this.instance.post(`/api/appdvcpconfig/getLaunchCode`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
userid: wxUserId,
|
||
operatorUserid: this.$store.state.user.info.wxUserId
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
location.href = `wxwork://launch?launch_code=${res.data}`
|
||
}
|
||
})
|
||
},
|
||
|
||
mapStatus (status, type) {
|
||
const index = Number(status)
|
||
return [{
|
||
color: '#FFB300',
|
||
name: '待受理',
|
||
bgColor: 'rgba(255, 203, 82, 0.14)'
|
||
}, {
|
||
color: '#508AFE',
|
||
name: '办理中',
|
||
bgColor: 'rgba(123, 176, 254, 0.14)'
|
||
}, {
|
||
color: '#07B759',
|
||
name: '已办结',
|
||
bgColor: 'rgba(19, 246, 201, 0.14)'
|
||
}, {
|
||
color: '#FF4C4C',
|
||
name: '已拒绝',
|
||
bgColor: 'rgba(255, 112, 112, 0.14)'
|
||
}][index][type]
|
||
},
|
||
|
||
init (gridId) {
|
||
this.gridId = ''
|
||
this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
|
||
this.instance.post(`/api/wxgridinfo/tree`, null, {
|
||
params: {
|
||
gridParentId: gridId || '',
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.getInfo()
|
||
if (gridId) {
|
||
this.policeStationList = res.data
|
||
} else {
|
||
this.areaList = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
onStationChange () {
|
||
this.$nextTick(() => {
|
||
this.instance.post(`/api/wxgridinfo/tree`, null, {
|
||
params: {
|
||
gridParentId: this.gridId,
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.getInfo()
|
||
}
|
||
})
|
||
})
|
||
},
|
||
|
||
getEventInfo (orderId, info) {
|
||
this.instance.post(`/api/wxgridinfo/reportInfo`, null, {
|
||
params: {
|
||
orderId,
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.eventInfo = {
|
||
...res.data,
|
||
typeName: info.type === '1' ? '居民上报' : '巡查上报',
|
||
status: info.status
|
||
}
|
||
|
||
this.isShow = true
|
||
}
|
||
})
|
||
},
|
||
|
||
onTypeChange (index) {
|
||
this.currIndex = index
|
||
this.getWxGridReportCata()
|
||
},
|
||
|
||
onChange () {
|
||
this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
gridId: this.gridId || this.gridParentId,
|
||
type: this.type
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.tableData1 = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
getReportList () {
|
||
this.instance.post(`/api/wxgridinfo/reportList`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
gridId: this.gridId || this.gridParentId,
|
||
size: '50',
|
||
...this.search
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.tableData3 = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
getWxGridReportCata () {
|
||
this.instance.post(`/api/wxgridinfo/wxGridReportCata`, null, {
|
||
params: {
|
||
categoryId: this.eventList[this.currIndex].categoryId,
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.chartData3 = res.data.map(v => {
|
||
return {
|
||
name: v['二级分类名称'],
|
||
'已办结': v['已办结'] || 0,
|
||
'待受理': v['待处理'] || 0,
|
||
'处理中': v['处理中'] || 0,
|
||
'已拒绝': v['已拒绝'] || 0
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
getInfo () {
|
||
this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.middleTotalInfo = res.data
|
||
}
|
||
})
|
||
|
||
this.getWxGridReportCata()
|
||
|
||
this.instance.post(`/api/wxgridinfo/reportHandleList`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
gridId: this.gridId || this.gridParentId,
|
||
size: '50',
|
||
dateRange: '2'
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.reportHandleList = res.data
|
||
}
|
||
})
|
||
|
||
this.getReportList()
|
||
|
||
this.instance.post(`/api/wxgridinfo/wxGridReportOverview`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
gridId: this.gridId || this.gridParentId
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.wxGridReportOverviewInfo = res.data
|
||
}
|
||
})
|
||
|
||
this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
|
||
params: {
|
||
corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
|
||
gridId: this.gridId || this.gridParentId,
|
||
type: this.type
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.tableData1 = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
Hex2RGBA(color, alpha = 1) {
|
||
let hex = 0;
|
||
if (color.charAt(0) == "#") {
|
||
if (color.length == 4) {
|
||
//检测诸如#FFF简写格式
|
||
color = "#" + color.charAt(1).repeat(2) +
|
||
color.charAt(2).repeat(2) +
|
||
color.charAt(3).repeat(2);
|
||
}
|
||
hex = parseInt(color.slice(1), 16);
|
||
}
|
||
let r = hex >> 16 & 0xFF;
|
||
let g = hex >> 8 & 0xFF;
|
||
let b = hex & 0xFF;
|
||
return `rgba(${r},${g},${b},${alpha})`;
|
||
},
|
||
RGBtoHex(r, g, b) {
|
||
let hex = r << 16 | g << 8 | b;
|
||
return "#" + hex.toString(16);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppQxnDv {
|
||
display: flex;
|
||
height: 100%;
|
||
padding-top: 16px;
|
||
box-sizing: border-box;
|
||
background: #0c0c0c;
|
||
overflow: hidden;
|
||
|
||
.event-info {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 111;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
|
||
.info-bottom__wrapper {
|
||
height: 120px;
|
||
margin-top: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.info-bottom__item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
line-height: 1;
|
||
margin-bottom: 12px;
|
||
color: #fff;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
div {
|
||
flex: 1;
|
||
margin: 0 18px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 12px;
|
||
color: #d0e1e8;
|
||
|
||
p {
|
||
margin-bottom: 8px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
i {
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
color: #9BB7D4;
|
||
}
|
||
}
|
||
|
||
.info-mask {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba($color: #000000, $alpha: 0.1);
|
||
}
|
||
|
||
.info-content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
z-index: 11;
|
||
width: 498px;
|
||
height: 430px;
|
||
padding: 15px 25px 0;
|
||
background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/event-bg.png);
|
||
background-size: 100% 100%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
& > h3 {
|
||
margin-top: 28px;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #02FEFF;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 1;
|
||
}
|
||
|
||
.info-bottom {
|
||
margin-top: 20px;
|
||
padding-top: 14px;
|
||
|
||
& > h3 {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #02FEFF;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
margin-top: 18px;
|
||
padding: 0 28px;
|
||
color: #9BB7D4;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
|
||
.progress-item {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 78px;
|
||
|
||
&:after {
|
||
position: absolute;
|
||
top: 37px;
|
||
left: 0%;
|
||
width: 105px;
|
||
height: 2px;
|
||
background: #647886;
|
||
content: ' ';
|
||
}
|
||
|
||
&:first-child::after {
|
||
width: 133px;
|
||
left: -28px;
|
||
}
|
||
|
||
&:first-child::before {
|
||
position: absolute;
|
||
top: 38px;
|
||
left: -28px;
|
||
width: 8px;
|
||
height: 8px;
|
||
z-index: 11;
|
||
background: #647886;
|
||
border-radius: 50%;
|
||
content: ' ';
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
&:nth-of-type(4n)::before {
|
||
position: absolute;
|
||
top: 38px;
|
||
right: -28px;
|
||
z-index: 11;
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #647886;
|
||
border-radius: 50%;
|
||
content: ' ';
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
&.active {
|
||
h4 {
|
||
color: rgba(7, 183, 89, 1);
|
||
}
|
||
|
||
&:first-child::before {
|
||
background: rgba(7, 183, 89, 1);
|
||
}
|
||
|
||
&:nth-of-type(4n)::before {
|
||
background: rgba(7, 183, 89, 1);
|
||
}
|
||
|
||
&:after {
|
||
background: rgba(7, 183, 89, 1);
|
||
}
|
||
|
||
.progress-item__middle {
|
||
background: rgba(7, 183, 89, 0.4);
|
||
|
||
i {
|
||
background: rgba(7, 183, 89, 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
h4 {
|
||
margin-bottom: 12px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.progress-item__middle {
|
||
position: relative;
|
||
z-index: 11;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-bottom: 11px;
|
||
border-radius: 50%;
|
||
background: rgba(47, 140, 232, 0.4);
|
||
|
||
i {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #2F8CE8;
|
||
transform: translate(-50%, -50%);
|
||
content: '';
|
||
}
|
||
}
|
||
|
||
span {
|
||
line-height: 16px;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-wrapper {
|
||
margin-top: 18px;
|
||
|
||
.info-wrapper__item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
line-height: 1;
|
||
margin-bottom: 10px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
label {
|
||
width: 70px;
|
||
margin-right: 20px;
|
||
color: #9BB7D4;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
span {
|
||
width: 70%;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
img {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 18px;
|
||
z-index: 1;
|
||
width: 24px;
|
||
height: 24px;
|
||
cursor: pointer;
|
||
transition: all ease 300;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
.info-title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
h2 {
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.table-index {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
span {
|
||
width: 22px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
border: 1px solid #42BED5;
|
||
}
|
||
|
||
&.table-index__active span {
|
||
border-color: #EDAA38;
|
||
}
|
||
}
|
||
|
||
.wrapper {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.AppQxnDv-title {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
color: rgba(172, 201, 230, 0.8);
|
||
background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);
|
||
|
||
& > div {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&:first-child {
|
||
h2:first-child {
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 27px;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: rgba(41, 77, 102, 1);
|
||
content: ' ';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
& > h2 {
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 27px;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: rgba(41, 77, 102, 1);
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
|
||
.AppQxnDv-title__tab {
|
||
h2 {
|
||
cursor: pointer;
|
||
}
|
||
|
||
h2.active {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
h2 {
|
||
position: relative;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: #5299CC;
|
||
content: ' ';
|
||
}
|
||
|
||
&::before {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 14px;
|
||
z-index: 1;
|
||
width: 9px;
|
||
height: 2px;
|
||
background: rgba(41, 77, 102, 1);
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
.AppQxnDv-total {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
|
||
h2 {
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.item-bottom {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
span {
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
color: #02FEFF;
|
||
}
|
||
|
||
i {
|
||
margin-left: 4px;
|
||
font-style: normal;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-select) {
|
||
height: 24px;
|
||
line-height: 24px;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
padding: 0 26px 0 6px;
|
||
font-size: 12px;
|
||
color: rgba(179, 229, 229, 1);
|
||
border: 1px solid #2A7A92;
|
||
border-radius: 2px;
|
||
background: transparent;
|
||
|
||
&::placeholder {
|
||
color: rgba(179, 229, 229, 0.6);
|
||
}
|
||
}
|
||
|
||
.el-input__suffix {
|
||
right: 1px;
|
||
top: 0px;
|
||
}
|
||
|
||
i {
|
||
color: #B3E5E5;
|
||
}
|
||
}
|
||
|
||
:deep(.el-input) {
|
||
height: 24px;
|
||
line-height: 24px;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
padding: 0 6px;
|
||
font-size: 12px;
|
||
color: rgba(179, 229, 229, 1);
|
||
border: 1px solid #2A7A92;
|
||
border-radius: 2px;
|
||
background: transparent;
|
||
|
||
&::placeholder {
|
||
color: rgba(179, 229, 229, 0.6);
|
||
}
|
||
}
|
||
|
||
.el-input-group__append {
|
||
padding: 0 16px;
|
||
background: #007994;
|
||
border: none;
|
||
border-radius: 0 2px 2px 0;
|
||
}
|
||
|
||
.el-input__suffix {
|
||
right: 1px;
|
||
top: 0px;
|
||
}
|
||
|
||
i {
|
||
color: #B3E5E5;
|
||
}
|
||
}
|
||
|
||
:deep(.ai-table) {
|
||
.el-table {
|
||
font-size: 12px;
|
||
color: #d0e1e8;
|
||
background-color: transparent!important;
|
||
|
||
th.el-table__cell.is-leaf, .el-table td.el-table__cell {
|
||
border: none!important;
|
||
}
|
||
|
||
tr.el-table__row--striped td {
|
||
background: rgba(33, 180, 253, 0.1)!important;
|
||
}
|
||
|
||
.el-table__header tr th:first-child .cell {
|
||
padding: 0!important;
|
||
}
|
||
|
||
.el-table__body tr td:first-child .cell {
|
||
padding: 0!important;
|
||
}
|
||
|
||
&.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||
background-color: rgba(33, 180, 253, 0.1)!important;
|
||
}
|
||
|
||
th.el-table__cell {
|
||
background-color: transparent;
|
||
}
|
||
|
||
tr {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.el-table__cell {
|
||
padding: 7px 0;
|
||
color: #d0e1e8;
|
||
}
|
||
|
||
.el-table__header tr .cell {
|
||
color: #02FEFF!important;
|
||
}
|
||
}
|
||
.ai-table__header {
|
||
background: rgba(33, 180, 253, 0.1)!important;
|
||
}
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 14px;
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
min-height: 20px;
|
||
background-clip: content-box;
|
||
box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
& > .right {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
|
||
.right-left {
|
||
width: 530px;
|
||
|
||
.right-left__middle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 245px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.right {
|
||
width: 275px;
|
||
}
|
||
}
|
||
|
||
.right-left__top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
div {
|
||
width: 275px;
|
||
|
||
&:first-child {
|
||
width: 245px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right-middle {
|
||
width: 556px;
|
||
margin: 0 40px;
|
||
|
||
.right-middle__middle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
|
||
.right-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
& > .left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 240px;
|
||
margin-right: 20px;
|
||
|
||
.left-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
|
||
.left-item {
|
||
position: relative;
|
||
width: 100%;
|
||
cursor: pointer;
|
||
margin-bottom: 10px;
|
||
padding: 30px 14px 14px;
|
||
background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.2) 100%);
|
||
border-radius: 6px;
|
||
box-shadow: inset 0 -1px 0 0 transparent;
|
||
transition: all ease 0.3s;
|
||
|
||
&:hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
&.active {
|
||
background-image: linear-gradient(0deg, #28b6fd24 0%, #00669aa6 99%);
|
||
box-shadow: inset 0 -1px 0 0 #23B2C7;
|
||
|
||
&:hover {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
i {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 22px;
|
||
height: 21px;
|
||
line-height: 21px;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
background-image: linear-gradient(177deg, #02eeee66 0%, #0190d866 100%);
|
||
border-radius: 6px 0 6px 0;
|
||
}
|
||
|
||
.left-item__bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
span {
|
||
color: #fff;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.left-item__top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
.el-select {
|
||
width: 100px;
|
||
}
|
||
|
||
h2 {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|