<template>
|
<div>
|
<basic-container style="height: 100%">
|
<!--<div class="banner-text">
|
<span>
|
<a href="https://avue.top/#/pay" target="_blank">
|
<img src="https://img.shields.io/badge/Avue-2.6.15-green.svg" alt="Build Status">
|
</a>
|
<img src="https://img.shields.io/badge/Spring%20Boot-2.3.6.RELEASE-yellowgreen.svg" alt="Downloads">
|
<img src="https://img.shields.io/badge/Spring%20Cloud-Hoxton.SR9-blue.svg" alt="Coverage Status">
|
</span>
|
<br>
|
|
<span>
|
<el-collapse v-model="activeNames">
|
<el-collapse-item name="1">
|
<div>基于Spring Cloud Gateway</div>
|
<div>基于Spring Cloud Hoxton.SR9</div>
|
<div>基于Spring Boot 2.3.6.RELEASE</div>
|
<div>基于Spring Cloud Alibaba 2.2.3.RELEASE</div>
|
</el-collapse-item>
|
<el-collapse-item name="2">
|
<div>基于Spring Security OAuth实现鉴权体系；</div>
|
<div>深度定制，支持全流程的登录授权，Server Resource</div>
|
</el-collapse-item>
|
<el-collapse-item name="3">
|
<div>支持docker部署</div>
|
<div>支持Rancher2 + Kubernetes部署</div>
|
<div>支持企业Paas Rainbond 部署</div>
|
</el-collapse-item>
|
<el-collapse-item name="4">
|
<div>基于开源LCN 分布式事务解决方案深度定制</div>
|
<div>完美兼容2.X，优化集群部署，提升性能</div>
|
</el-collapse-item>
|
<el-collapse-item name="5">
|
<div>扩展Spring Cache无缝兼容</div>
|
<div>支持开发过程无感知</div>
|
</el-collapse-item>
|
<el-collapse-item name="6">
|
<div>基于activiti5.22整合OAuth2</div>
|
<div>支持在线流程设计</div>
|
</el-collapse-item>
|
<el-collapse-item name="7">
|
<div>支持数据库存储SCG路由信息</div>
|
<div>支持前端动态编辑</div>
|
</el-collapse-item>
|
<el-collapse-item name="8">
|
<div>单点登录</div>
|
<div>扩展SBA支持服务监听事件redis保存</div>
|
<div>扩展Turbine,定制展示UI</div>
|
<div>扩展ResourceServer完全屏蔽实现细节开发更简单</div>
|
</el-collapse-item>
|
</el-collapse>
|
</span>
|
</div>-->
|
<div class="wel-wrap">
|
<div class="wel-top-main">
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{acceptCase}}</h1>
|
<h2>受理案件</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{majorCase}}</h1>
|
<h2>重大案件</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{closed}}</h1>
|
<h2>已结案</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{administrativeSanction}}</h1>
|
<h2>行政处罚</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{rounding(forfeit)}}</h1>
|
<h2>罚没资金（万元）</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{laws}}</h1>
|
<h2>法律法规</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{powers}}</h1>
|
<h2>执行清单</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{market}}</h1>
|
<h2>市场主体</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{organ}}</h1>
|
<h2>执法机构</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{person}}</h1>
|
<h2>执法人员</h2>
|
</div>
|
</div>
|
</div>
|
<div class="wel-bottom-main">
|
<div class="wel-bottom-block">
|
<div class="wel-bottom-title">
|
我的待办
|
</div>
|
<div class="daiban-main">
|
<div class="daiban-block" v-for="(item,index) in daibanData" :key="index">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left wodedaiban-box-left">
|
<tooltip-over
|
:content="item.name"
|
ref="tooltipdaiban"
|
class="tooltip-box">
|
</tooltip-over>
|
</div>
|
<div class="daiban-right wodedaiban-box-right">
|
<h1>{{item.createTime}}</h1>
|
</div>
|
</div>
|
</div>
|
<!--<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>王六六提交了一个行政案件</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>2022/8/09</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>王刘峰提交了一个行政案件</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>2022/8/08</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>刘诗诗提交了一个行政案件</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>2022/8/07</h1>
|
</div>
|
</div>
|
</div>-->
|
</div>
|
</div>
|
<div class="wel-bottom-block">
|
<div class="wel-bottom-title">
|
案件进度
|
</div>
|
<div class="daiban-main">
|
<div class="daiban-block" v-for="(item,index) in anjianData" :key="index">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<tooltip-over
|
:content="item.name"
|
ref="tooitipJindu"
|
class="tooltip-box">
|
</tooltip-over>
|
</div>
|
<div class="daiban-right">
|
<h1>{{item.isOver == 0 ? '进行中' : '已结案'}}</h1>
|
</div>
|
</div>
|
</div>
|
<!--<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>孙军违法售卖</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>已结案</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>王丽打架斗殴</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>已结案</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>塔谈夜市脏乱</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>进行中</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>新天地网吧打架斗殴</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>进行中</h1>
|
</div>
|
</div>
|
</div>-->
|
</div>
|
</div>
|
<div class="wel-bottom-block">
|
<div class="wel-bottom-title">
|
通知公告
|
</div>
|
<div class="daiban-main">
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<tooltip-over
|
content="《中华人民共和国招标投标法》新增了第286条"
|
ref="tooitipgonggao"
|
class="tooltip-box">
|
</tooltip-over>
|
</div>
|
<div class="daiban-right">
|
<h1>2022/8/11</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<tooltip-over
|
content="《工程建设项目施工招标投标办法》修改第186条的内容"
|
ref="tooitipgonggao2"
|
class="tooltip-box">
|
</tooltip-over>
|
</div>
|
<div class="daiban-right">
|
<h1>2022/8/10</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<tooltip-over
|
content="《工程建设项目勘察设计招标投标办法》修改第106条的内容"
|
ref="tooitipgonggao3"
|
class="tooltip-box">
|
</tooltip-over>
|
</div>
|
<div class="daiban-right">
|
<h1>2022/8/07</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<tooltip-over
|
content="《城市商品房预售管理办法》修改第46条的内容"
|
ref="tooitipgonggao4"
|
class="tooltip-box">
|
</tooltip-over>
|
</div>
|
<div class="daiban-right">
|
<h1>2022/8/05</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</basic-container>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import {getIndexData, indexTodoList,getIndexCase} from '@/api/wel'
|
import {rounding} from "../libs/rounding";
|
import tooltipOver from "../components/tooltipOver/tooltipOver";
|
|
export default {
|
name: 'Wel',
|
components: {
|
tooltipOver
|
},
|
data() {
|
return {
|
activeNames: ['1', '2', '3', '4'],
|
DATA: [],
|
text: '',
|
actor: '',
|
count: 0,
|
isText: false,
|
acceptCase:0, //受理案件
|
majorCase:0, //重大案件
|
closed:0, //已结案
|
administrativeSanction:0, //行政处罚
|
forfeit:0, //罚没资金
|
laws:0, //法律法规
|
powers:0, //执法清单
|
market:0, //市场主体
|
organ:0, //执法机构
|
person:0, //执法人员
|
daibanData: [], //待办
|
anjianData: [], //进度
|
}
|
},
|
computed: {
|
...mapGetters(['website'])
|
},
|
created() {
|
this.getIndexData()
|
this.indexTodoList()
|
this.getIndexCase()
|
},
|
methods: {
|
rounding, //引入保留两位小数
|
getIndexData() { //首页上方十个方块数据接口
|
getIndexData().then(res => {
|
this.acceptCase = res.data.data.acceptCase
|
this.majorCase = res.data.data.majorCase
|
this.closed = res.data.data.closed
|
this.administrativeSanction = res.data.data.administrativeSanction
|
this.forfeit = res.data.data.forfeit
|
this.laws = res.data.data.laws
|
this.powers = res.data.data.powers
|
this.market = res.data.data.market
|
this.organ = res.data.data.organ
|
this.person = res.data.data.person
|
}).catch(e => {
|
|
})
|
},
|
indexTodoList() { //首页我的待办列表接口
|
indexTodoList().then(res => {
|
this.daibanData = res.data.data
|
}).catch(e => {
|
|
})
|
},
|
getIndexCase() { //首页案件进度列表接口
|
getIndexCase().then(res => {
|
this.anjianData = res.data.data
|
}).catch(e => {
|
|
})
|
},
|
getData() {
|
if (this.count < this.DATA.length - 1) {
|
this.count++
|
} else {
|
this.count = 0
|
}
|
this.isText = true
|
this.actor = this.DATA[this.count]
|
},
|
setData() {
|
let num = 0
|
let count = 0
|
let active = false
|
const timeoutstart = 5000
|
const timeoutend = 1000
|
const timespeed = 10
|
setInterval(() => {
|
if (this.isText) {
|
if (count == this.actor.length) {
|
active = true
|
} else {
|
active = false
|
}
|
if (active) {
|
num--
|
this.text = this.actor.substr(0, num)
|
if (num == 0) {
|
this.isText = false
|
setTimeout(() => {
|
count = 0
|
this.getData()
|
}, timeoutend)
|
}
|
} else {
|
num++
|
this.text = this.actor.substr(0, num)
|
if (num == this.actor.length) {
|
this.isText = false
|
setTimeout(() => {
|
this.isText = true
|
count = this.actor.length
|
}, timeoutstart)
|
}
|
}
|
}
|
}, timespeed)
|
}
|
}
|
}
|
</script>
|
|
<style scoped="scoped" lang="scss">
|
h1,h2,h3,h4{
|
margin:0;
|
}
|
::v-deep{
|
.el-card{
|
background-color: #f5f5f5;
|
height: 100%;
|
}
|
.el-card__body{
|
height: calc(100% - 20px);
|
}
|
.el-card__body{
|
padding-top: 0;
|
}
|
}
|
/*.el-collapse-item__header {
|
display: block !important;
|
}
|
|
.wel-contailer {
|
position: relative;
|
}
|
|
.banner-text {
|
position: relative;
|
padding: 0 20px;
|
font-size: 20px;
|
text-align: center;
|
color: #333;
|
}
|
|
.banner-img {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
opacity: 0.8;
|
display: none;
|
}
|
|
.actor {
|
height: 250px;
|
overflow: hidden;
|
font-size: 18px;
|
color: #333;
|
}
|
|
.actor:after {
|
content: '';
|
width: 3px;
|
height: 25px;
|
vertical-align: -5px;
|
margin-left: 5px;
|
background-color: #333;
|
display: inline-block;
|
animation: blink 0.4s infinite alternate;
|
}
|
|
.typeing:after {
|
animation: none;
|
}
|
|
@keyframes blink {
|
to {
|
opacity: 0;
|
}
|
}*/
|
.wel-wrap{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.wel-top-main{
|
width: calc(100% + 20px);
|
display: flex;
|
flex-wrap: wrap;
|
.wel-top-block{
|
width: calc(20% - 20px);
|
height: 110px;
|
background: #ffffff;
|
border-radius: 15px;
|
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin: 10px;
|
&:nth-child(1){
|
margin-left: 0;
|
}
|
&:nth-child(6){
|
margin-left: 0;
|
}
|
.wel-block-left{
|
width: 90px;
|
height: 90px;
|
margin-right: 10px;
|
img{
|
width: 100%;
|
}
|
}
|
.wel-block-right{
|
display: flex;
|
flex-direction: column;
|
h1{
|
font-size: 28px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #111111;
|
}
|
h2{
|
font-size: 16px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #111111;
|
}
|
}
|
}
|
}
|
.wel-bottom-main{
|
width: calc(100% + 20px);
|
display: flex;
|
flex-wrap: wrap;
|
height: calc(100% - 245px);
|
.wel-bottom-block{
|
width: calc(33.3% - 20px);
|
height: 100%;
|
background: #ffffff;
|
border-radius: 15px;
|
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
|
display: flex;
|
flex-direction: column;
|
margin: 10px;
|
position: relative;
|
&:nth-child(1) {
|
margin-left: 0;
|
}
|
&:nth-child(3) {
|
margin-right: 0;
|
}
|
.wel-bottom-title{
|
position: absolute;
|
left: 30px;
|
top: 0;
|
width: 218px;
|
height: 60px;
|
background: url("../../src/assets/lawImg/welIndexTitle-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
text-align: center;
|
font-size: 16px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 54px;
|
}
|
}
|
.daiban-main{
|
width: 100%;
|
height: calc(100% - 80px);
|
overflow-y: auto;
|
display: flex;
|
flex-direction: column;
|
margin-top: 70px;
|
padding: 0 20px;
|
box-sizing: border-box;
|
.daiban-block{
|
width: 100%;
|
display: flex;
|
padding: 8px 0;
|
.daibanIcon{
|
width: 18px;
|
height: 18px;
|
margin-right: 12px;
|
}
|
.daiban-content-box{
|
display: flex;
|
justify-content: space-between;
|
width: calc(100% - 18px - 12px);
|
.daiban-left{
|
width: calc(100% - 84px - 10px);
|
h1{
|
margin-right: 10px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-size: 14px;
|
background: #ffffff;
|
border-radius: 15px;
|
}
|
}
|
.daiban-right{
|
width: 84px;
|
h1{
|
font-size: 14px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
}
|
}
|
.wodedaiban-box-left{
|
width: calc(100% - 150px - 10px);
|
}
|
.wodedaiban-box-right{
|
width: 150px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
