事件上报
This commit is contained in:
liuye
@@ -32,10 +32,10 @@ export default {
|
||||
customNavigation: true,
|
||||
data() {
|
||||
return {
|
||||
component: 'Statistics',
|
||||
component: 'List',
|
||||
params: {},
|
||||
refresh: true,
|
||||
tabIndex: 1,
|
||||
tabIndex: 0,
|
||||
tabs: [
|
||||
{
|
||||
img: 'https://cdn.sinoecare.com/i/2024/07/17/6697387277fa3.png',
|
||||
|
||||
@@ -123,7 +123,7 @@ export default {
|
||||
id: '',
|
||||
doItShow: false,
|
||||
evaluation: {},
|
||||
isShowBtn: false,
|
||||
isShowBtn: false, //统计列表进页面不显示操作按钮
|
||||
backgroundNavbar: {
|
||||
background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
|
||||
backgroundSize: 'cover',
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
<ai-empty v-if="!datas.length" />
|
||||
</div>
|
||||
<div class="ai-add" @click="toAdd"></div>
|
||||
<div class="ai-add" v-if="isAdd" @click="toAdd"></div>
|
||||
<!-- <AiAdd @add="toAdd" /> -->
|
||||
|
||||
</div>
|
||||
@@ -185,7 +185,6 @@ export default {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
background-color: #F4F5FA;
|
||||
|
||||
.top-tab {
|
||||
width: calc(100% - 64px);
|
||||
|
||||
@@ -14,38 +14,30 @@
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
<div class="statstics-content">
|
||||
<div class="info-content">
|
||||
<div class="title">概况总览</div>
|
||||
<div class="el-row">
|
||||
<div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
|
||||
<h2>{{ item.value }}</h2>
|
||||
<p>{{ item.label }}</p>
|
||||
</div>
|
||||
<div class="el-row">
|
||||
<div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
|
||||
<div class="label"><span></span>{{ item.label }}</div>
|
||||
<h2>{{ item.value }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">事件办结率</div>
|
||||
<div class="info-content">
|
||||
<div class="title">事件办结率</div>
|
||||
<!-- <div class="echart-content" id="finish" v-if="showFinish"></div> -->
|
||||
<canvas canvas-id="finish" id="finish" class="echart-content" v-if="showFinish"/>
|
||||
<div class="num" v-if="showFinish">{{ finshNum || 0 }}%</div>
|
||||
<canvas canvas-id="finish" id="finish" class="echart-content e-canvas" v-if="showFinish"/>
|
||||
<AiEmpty v-else></AiEmpty>
|
||||
</div>
|
||||
|
||||
<div class="title">巡查上报趋势图</div>
|
||||
<div class="info-content">
|
||||
<div class="title">巡查上报趋势图</div>
|
||||
|
||||
<AiEmpty v-if="!trendData.length"></AiEmpty>
|
||||
<!-- <div class="echart-content" id="trend" v-else></div> -->
|
||||
<canvas canvas-id="trend" id="trend" class="echart-content" v-else/>
|
||||
</div>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="title">巡查事件分类
|
||||
<div class="title">巡查事件分类
|
||||
<!-- <div class="type-select" :style="statusInfo.name ? '' : 'color:#999;'" @click="show=true">{{statusInfo.name || '请选择'}}<u-icon name="arrow-right"></u-icon></div> -->
|
||||
<u-select v-model="show" :list="$dict.getDict('clapEventStatusHistory')" value-name="dictValue"
|
||||
label-name="dictName" @confirm="selectStatus"></u-select>
|
||||
</div>
|
||||
<u-select v-model="show" :list="$dict.getDict('clapEventStatusHistory')" value-name="dictValue"
|
||||
label-name="dictName" @confirm="selectStatus"></u-select>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<AiEmpty v-if="!typeData.length"></AiEmpty>
|
||||
<!-- <div class="echart-content" id="type" v-else></div> -->
|
||||
<canvas canvas-id="type" id="type" class="echart-content" v-else/>
|
||||
</div>
|
||||
<div class="pad-b120"></div>
|
||||
@@ -112,13 +104,10 @@ export default {
|
||||
var num = res.data.finishCountMap['累计事件办结'] / res.data.finishCountMap['累计事件上报']
|
||||
this.finshNum = Number(num * 100).toFixed(2)
|
||||
}
|
||||
|
||||
|
||||
res.data.dateCountList.map((item) => {
|
||||
this.trendData.push(item.ecount)
|
||||
this.trendDataX.push(item.ymd)
|
||||
})
|
||||
|
||||
res.data.groupList.map((item) => {
|
||||
var info = {
|
||||
name: item.groupName,
|
||||
@@ -127,66 +116,20 @@ export default {
|
||||
this.typeData.push(info)
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.showFinish) {
|
||||
this.finishChartInit('finish')
|
||||
var finish = {
|
||||
categories: ["2018","2019","2020","2021","2022","2023"],
|
||||
series: [
|
||||
{
|
||||
name: "目标值",
|
||||
data: [35,36,31,33,13,34]
|
||||
},
|
||||
{
|
||||
name: "完成量",
|
||||
data: [18,27,21,24,6,28]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.drawCharts('finish', this.finishData)
|
||||
}
|
||||
// if (this.trendData.length) {
|
||||
// this.trendChartInit()
|
||||
// }
|
||||
// if (this.typeData.length) {
|
||||
// this.typeChartInit()
|
||||
// }
|
||||
})
|
||||
if (this.showFinish) {
|
||||
this.finishChartInit('finish')
|
||||
}
|
||||
if (this.trendData.length) {
|
||||
this.trendChartInit('trend')
|
||||
}
|
||||
if (this.typeData.length) {
|
||||
this.typeChartInit('type')
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
drawCharts(id, data) {
|
||||
const ctx = uni.createCanvasContext(id, this);
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "ring",
|
||||
context: ctx,
|
||||
width: 346,
|
||||
height: 232,
|
||||
series: {series: data},
|
||||
animation: true,
|
||||
background: "#FFFFFF",
|
||||
color: ["#4B87FE", "#4AC98E", "#FF8002"],
|
||||
padding: [15, 10, 0, 15],
|
||||
enableScroll: false,
|
||||
legend: {},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
},
|
||||
extra: {
|
||||
line: {
|
||||
type: "straight",
|
||||
width: 2,
|
||||
activeType: "hollow",
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
getGirdInfo() {
|
||||
this.$instance.post(`/app/apppatrolreportinfo/getRootByGirdMember`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
@@ -198,19 +141,18 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
finishChartInit(id) {
|
||||
console.log(this.finishData)
|
||||
console.log(new uCharts())
|
||||
const ctx = uni.createCanvasContext(id, this);
|
||||
var ctx = uni.createCanvasContext(id, this);
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "ring",
|
||||
width: 350,
|
||||
height: 250,
|
||||
context: ctx,
|
||||
width: 346,
|
||||
height: 232,
|
||||
series: {
|
||||
data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.finishData
|
||||
}
|
||||
],
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
@@ -221,147 +163,113 @@ export default {
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "right",
|
||||
position: "bottom",
|
||||
lineHeight: 25
|
||||
},
|
||||
title: {
|
||||
name: "办结率",
|
||||
fontSize: 12,
|
||||
color: "#222"
|
||||
},
|
||||
subtitle: {
|
||||
name: "70%",
|
||||
fontSize: 25,
|
||||
color: "#7cb5ec"
|
||||
name: this.finshNum+'%',
|
||||
fontSize: 20,
|
||||
color: "#5C8FFA"
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 60,
|
||||
ringWidth: 40,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
labelWidth: 5,
|
||||
border: false,
|
||||
borderWidth: 3,
|
||||
borderWidth: 2,
|
||||
borderColor: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
trendChartInit() {
|
||||
this.trendChart = echarts.init(document.getElementById('trend'))
|
||||
var option2 = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
trendChartInit(id) {
|
||||
const ctx = uni.createCanvasContext(id, this);
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "line",
|
||||
context: ctx,
|
||||
width: 346,
|
||||
height: 232,
|
||||
categories: this.trendDataX,
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
data: this.trendData
|
||||
}
|
||||
],
|
||||
animation: true,
|
||||
background: "#FFFFFF",
|
||||
color: ["#2891FF"],
|
||||
padding: [15, 10, 0, 15],
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#E1E5EF', //x轴的颜色
|
||||
width: 1, //轴线的宽度
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
data: this.trendDataX
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: { //y轴
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
type: 'value',
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
linearType: 'custom',
|
||||
serie: {
|
||||
linearColor: '#5B8FF9'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.trendData,
|
||||
type: 'line',
|
||||
areaStyle: {//覆盖区域的渐变色
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2891FF'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2891FF',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.trendChart.setOption(option2)
|
||||
extra: {
|
||||
line: {
|
||||
type: "straight",
|
||||
width: 2,
|
||||
activeType: "hollow",
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
typeChartInit() {
|
||||
this.typeChart = echarts.init(document.getElementById('type'))
|
||||
var option3 = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
typeChartInit(id) {
|
||||
var ctx = uni.createCanvasContext(id, this);
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "ring",
|
||||
width: 350,
|
||||
height: 250,
|
||||
context: ctx,
|
||||
series: [
|
||||
{
|
||||
name: '巡查事件分类',
|
||||
type: 'pie',
|
||||
radius: ['0%', '70%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
var colorList = ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
|
||||
return colorList[colors.dataIndex];
|
||||
}
|
||||
},
|
||||
},
|
||||
data: this.typeData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
}
|
||||
}
|
||||
data: this.typeData
|
||||
}
|
||||
]
|
||||
};
|
||||
this.typeChart.setOption(option3)
|
||||
],
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'],
|
||||
padding: [5,5,5,5],
|
||||
dataLabel: true,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 40,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 5,
|
||||
border: false,
|
||||
borderWidth: 2,
|
||||
borderColor: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
selectStatus(e) {
|
||||
this.statusInfo.name = e[0].label
|
||||
@@ -379,7 +287,7 @@ export default {
|
||||
return searchType = index
|
||||
}
|
||||
})
|
||||
uni.navigateTo({url: `./StatisticsList?title=${row.label}&searchType=${searchType}&girdId=${this.selectGird.id}`})
|
||||
uni.navigateTo({url: `./StatisticsList?searchType=${searchType}&girdId=${this.selectGird.id}`})
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -387,6 +295,7 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.statistics {
|
||||
padding-top: 16px;
|
||||
.select-gird {
|
||||
width: calc(100% - 64px);
|
||||
box-sizing: border-box;
|
||||
@@ -416,71 +325,104 @@ export default {
|
||||
}
|
||||
.statstics-content {
|
||||
padding: 128px 30px 200px;
|
||||
.el-row {
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: calc(50% - 8px);
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
margin: 0 16px 16px 0;
|
||||
.label {
|
||||
line-height: 40px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 28px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
line-height: 64px;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 48px;
|
||||
color: #333;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(1) {
|
||||
.label {
|
||||
span {
|
||||
border: 4px solid #7A8EC5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(2) {
|
||||
margin-right: 0;
|
||||
.label {
|
||||
span {
|
||||
border: 4px solid #F6BD15;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(3) {
|
||||
.label {
|
||||
span {
|
||||
border: 4px solid #5C8FFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(4) {
|
||||
margin-right: 0;
|
||||
.label {
|
||||
span {
|
||||
border: 4px solid #60DCAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
padding: 24px;
|
||||
.type-select {
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 32px;
|
||||
width: calc(100% - 250px);
|
||||
text-align: right;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.info-content {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 32px;
|
||||
position: relative;
|
||||
padding-bottom: 32px;
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
padding: 24px 16px 24px 24px;
|
||||
|
||||
img {
|
||||
float: right;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 32px;
|
||||
width: calc(100% - 250px);
|
||||
text-align: right;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
padding: 32px 0 60px 0;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #3B424A;
|
||||
line-height: 64px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
float: right;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.echart-content {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.num {
|
||||
@@ -494,7 +436,6 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.pad-b120 {
|
||||
background-color: #F3F7F8;
|
||||
padding-bottom: 120px;
|
||||
|
||||
@@ -1,42 +1,35 @@
|
||||
<template>
|
||||
<div class="list-content">
|
||||
<u-navbar back-icon-color="#000" title="事件上报" title-color="#000" title-width="300" title-size="32"
|
||||
<div class="list">
|
||||
<u-navbar back-icon-color="#000" :title="title" title-color="#000" title-width="300" title-size="32"
|
||||
:title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
|
||||
<div class="header-content-bg">
|
||||
<img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
|
||||
</div>
|
||||
<template>
|
||||
<AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
|
||||
<template #custom>
|
||||
<div class="card-top">
|
||||
<div class="titles">{{ item.content }}</div>
|
||||
|
||||
<div class="types">
|
||||
<span>事件类型</span>
|
||||
<span class="types-right">{{ item.groupName }}</span>
|
||||
</div>
|
||||
<div class="types">
|
||||
<span>事件来源</span>
|
||||
<span class="types-right">{{ $dict.getLabel('residentEventSource', item.eventSource) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="gards">
|
||||
<span>所属网格</span>
|
||||
<span class="gards-right">{{ item.girdName }}</span>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="item" v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
|
||||
<div class="card-top">
|
||||
<div class="titles">{{ item.content }}</div>
|
||||
<div class="source-type">{{ $dict.getLabel('residentEventSource', item.eventSource) }}</div>
|
||||
<div class="info">
|
||||
<span>事件类型</span>
|
||||
<span class="value">{{ item.groupName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="status" :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'"
|
||||
v-if="item.eventStatus">
|
||||
<div class="info">
|
||||
<span>所属网格</span>
|
||||
<span class="value">{{ item.girdName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-bottom">
|
||||
<div class="status" v-if="item.eventStatus"
|
||||
:class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'">
|
||||
<span class="icon"></span>
|
||||
<span>
|
||||
{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
|
||||
</span>
|
||||
<span>{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</AiCard>
|
||||
<AiEmpty v-if="!datas.length"></AiEmpty>
|
||||
</template>
|
||||
<div class="level-type">中风险纠纷</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!datas.length"/>
|
||||
</div>
|
||||
<div class="pad-b120" v-if="datas.length"></div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -46,7 +39,6 @@ import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
customNavigation: true,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
datas: [],
|
||||
@@ -68,13 +60,13 @@ export default {
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
console.log(options)
|
||||
this.searchType = options.searchType
|
||||
this.title = options.title
|
||||
this.title = ['', '', '累计上报', '今日上报', '今日办结', '办理中'][options.searchType]
|
||||
this.girdId = options.girdId
|
||||
},
|
||||
onShow() {
|
||||
// document.title = this.title
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
@@ -120,9 +112,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list-content {
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
background: #F4F5FA;
|
||||
}
|
||||
.list {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
|
||||
.header-content-bg {
|
||||
@@ -134,133 +129,128 @@ export default {
|
||||
height: 592px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-top {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
padding: 24px 0;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item:nth-of-type(1) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
.list-content {
|
||||
margin: 16px 0 0 32px;
|
||||
}
|
||||
|
||||
::v-deep .AiTopFixed .content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .AiCard {
|
||||
background: #f3f6f9;
|
||||
padding: 24px 40px 0 32px;
|
||||
|
||||
.start {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
|
||||
.card-top {
|
||||
padding: 32px;
|
||||
|
||||
.titles {
|
||||
margin-bottom: 34px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.types,
|
||||
.gards {
|
||||
margin-top: 8px;
|
||||
font-size: 26px;
|
||||
|
||||
.types-right,
|
||||
.gards-right {
|
||||
margin-left: 32px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
width: calc(100% - 32px);
|
||||
background: #FFF;
|
||||
box-shadow: 0 0 4px 0 #00000005;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 32px;
|
||||
.card-top {
|
||||
width: 100%;
|
||||
padding: 32px 32px 24px 32px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.titles {
|
||||
width: calc(100% - 132px);
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 44px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.source-type {
|
||||
padding: 0 10px;
|
||||
line-height: 44px;
|
||||
background-color: #EBF3FE;
|
||||
border-radius: 6px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #3D88F5;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 32px;
|
||||
border-top: 1px solid #dddddd;
|
||||
.info {
|
||||
line-height: 40px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.icon {
|
||||
.value {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.status0 {
|
||||
color: #ff883c;
|
||||
|
||||
.icon {
|
||||
background: #ff883c;
|
||||
}
|
||||
}
|
||||
|
||||
.status1 {
|
||||
color: #1aaaff;
|
||||
|
||||
.icon {
|
||||
background: #1aaaff;
|
||||
}
|
||||
}
|
||||
|
||||
.status2 {
|
||||
color: #42d784;
|
||||
|
||||
.icon {
|
||||
background: #42d784;
|
||||
}
|
||||
}
|
||||
|
||||
.status3 {
|
||||
color: #ff4466;
|
||||
|
||||
.icon {
|
||||
background: #ff4466;
|
||||
margin-left: 24px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ::v-deep .AiCard:last-child {
|
||||
// padding-bottom: 24px;
|
||||
// }
|
||||
.pad-b120 {
|
||||
background-color: #f3f6f9;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.grid-name {
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 32px;
|
||||
border-top: 1px solid #ddd;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.status {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.status0 {
|
||||
color: #ff883c;
|
||||
|
||||
.icon {
|
||||
background: #ff883c;
|
||||
}
|
||||
}
|
||||
|
||||
.status1 {
|
||||
color: #1aaaff;
|
||||
|
||||
.icon {
|
||||
background: #1aaaff;
|
||||
}
|
||||
}
|
||||
|
||||
.status2 {
|
||||
color: #42d784;
|
||||
|
||||
.icon {
|
||||
background: #42d784;
|
||||
}
|
||||
}
|
||||
|
||||
.status3 {
|
||||
color: #ff4466;
|
||||
|
||||
.icon {
|
||||
background: #ff4466;
|
||||
}
|
||||
}
|
||||
|
||||
.level-type0 {
|
||||
color: #52C75B;
|
||||
}
|
||||
.level-type1 {
|
||||
color: #FF883C;
|
||||
}
|
||||
.level-type2 {
|
||||
color: #FF3C3C;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -317,8 +317,6 @@ export default {
|
||||
border-top-right-radius: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .top-tabs {
|
||||
// width: 100%;
|
||||
// padding: 0 32px;
|
||||
|
||||
Reference in New Issue
Block a user