Skip to content

C
cgAI
提交 cfa883b9 authored 作者: mmz's avatar mmz
浏览文件
操作

test

上级 d347e3b6
隐藏空白字符变更
内嵌 并排
正在显示 包含 4931 行增加 和 5 行删除
cgAI.zip 0 → 100644
浏览文件 @ cfa883b9
File added
config.js
浏览文件 @ cfa883b9
...@@ -6,7 +6,15 @@ ...@@ -6,7 +6,15 @@
*/ */
// 服务地址 // 服务地址
let https = ""; //打包 let https = ""; //打包
<<<<<<< HEAD
// let https = "http://192.168.102.170:8990/"; //陈兆奇 // let https = "http://192.168.102.170:8990/"; //陈兆奇
=======
// let https = "http://192.168.102.133:9090"; //李童
// let https = "http://192.168.102.105:8990"; //陈兆奇
// let https = "http://192.168.102.209:8990"; //黄家富
// let https = "http://120.27.238.48:8990/"; //线上
// let https = "http://192.168.102.170:8990/"; //陈 兆奇
>>>>>>> 0887611 (test)
// 请求目标服务器域名配置 // 请求目标服务器域名配置
const DOMAIN_NAME = { const DOMAIN_NAME = {
default: https, default: https,
......
public/index.html
浏览文件 @ cfa883b9
...@@ -5,7 +5,11 @@ ...@@ -5,7 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<<<<<<< HEAD
<title>人工智能</title> <title>人工智能</title>
=======
<title>城管AI结案处理系统</title>
>>>>>>> 0887611 (test)
</head> </head>
<body> <body>
<noscript> <noscript>
......
src/App.vue
浏览文件 @ cfa883b9
<template> <template>
<div id="app"> <div id="app">
<router-view /> <router-view v-show='!timeOut'/>
<Maintain v-show="timeOut"></Maintain>
</div> </div>
</template> </template>
<script> <script>
import Maintain from "./components/maintain.vue";
var formatNum = function(num){
return num
}
export default { export default {
created() {}, data() {
return {
timeOut: false,
timeDate: new Date(),
};
},
created() {
// 页面创建判断当前时间
if (formatNum(this.timeDate.getHours()) >= 20 || formatNum(this.timeDate.getHours()) < 7) {
this.timeOut = true;
}
else {
this.timeOut = false;
}
},
beforeDestroy() {
// 销毁计时
if (this.timer) {
clearInterval(this.timer);
}
},
mounted() {
// 实时-时间-计时
var that = this;
var timer = setInterval(function () {
that.timeDate = new Date();
}, 1000);
},
watch: {
timeDate: {
handler(newVal, oldVal) {
if (formatNum(newVal.getHours()) >= 20 || formatNum(newVal.getHours()) < 7) {
this.timeOut = true;
}
else if (formatNum(newVal.getHours()) < 20 || formatNum(newVal.getHours()) >= 7) {
this.timeOut = false;
}
}
}
},
components: { Maintain }
}; };
</script> </script>
<style lang="less"> <style lang="less">
* { * {
box-sizing: border-box; box-sizing: border-box;
<<<<<<< HEAD
=======
}
@font-face {
font-family: "Regular";
src: url("./assets/font/SourceHanSansCN-Regular.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Medium";
src: url("./assets/font/SourceHanSansCN-Medium.otf");
font-weight: normal;
font-style: normal;
}
html,
body {
// height: 1080px;
height: 100%;
width: 100%;
>>>>>>> 0887611 (test)
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
...@@ -31,7 +97,16 @@ export default { ...@@ -31,7 +97,16 @@ export default {
html, html,
body, body,
#app { #app {
<<<<<<< HEAD
width: 100%; width: 100%;
=======
font-family: Source Han Sans CN-Regular, Source Han Sans CN, Helvetica, Arial,
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
// text-align: center;
color: #2c3e50;
>>>>>>> 0887611 (test)
height: 100%; height: 100%;
} }
</style> </style>
src/assets/less/icon.less 0 → 100644
浏览文件 @ cfa883b9
.caseManagement_icon {
display:inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background: url('../../assets/img/caseMa1.png') center center no-repeat;
background-size: 20px 20px;
margin-right: 8px;
}
.caseManagementshow_icon {
display:inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background: url('../../assets/img/caseMa2.png') center center no-repeat;
background-size: 20px 20px;
margin-right: 8px;
}
.dropdown_icon {
display:inline-block;
width: 14px;
height: 6px;
background: url('../../assets/img/dropDown.png') center center no-repeat;
background-size: 14px 6px;
}
.calendar_icon{
display:inline-block;
width: 18px;
height: 18px;
background: url('../../assets/img/calendar.png') center center no-repeat;
background-size: 18px 18px;
margin-top: 15px;
position: absolute;
right: -182px;
}
.calendarshow_icon{
display:inline-block;
width: 18px;
height: 18px;
background: url('../../assets/img/calendarshow.png') center center no-repeat;
background-size: 18px 18px;
margin-top: 15px;
position: absolute;
right: -182px;
}
.bread_icon{
display:inline-block;
width: 4px;
height: 20px;
line-height: 20px;
background: url('../../assets/img/bread.png') center center no-repeat;
background-size: 4px 20px;
// position: absolute;
margin-right: 10px;
}
.caseManagement_icon:before,
.caseManagementshow_icon:before,
.bread_icon:before {
content: '替';
font-size: 20px;
// display:inline-block;
// width: 20px;
// height: 20px;
// line-height: 20px;
visibility: hidden;
vertical-align: middle;
}
src/assets/less/reset.less 0 → 100644
浏览文件 @ cfa883b9
* {
box-sizing: border-box;
// scrollbar-color: #e5e5e5 #f7f7f9;
// scrollbar-width: none;
}
.el-table {
font-size: 16px !important;
font-weight: 400 !important;
font-family: Source Han Sans CN-Regular;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
}
.el-table__cell {
text-align: center !important;
}
// 表头行样式
th.el-table__cell {
background-color: #E1E3E6 !important;
// text-align: center !important;
border: 0 !important;
padding: 0 !important;
padding-left: 14px !important;
height: 52px !important;
color: #6E7173 !important;
font-family: Source Han Sans CN-Regular;
font-weight: normal;
// height: 22px !important;
}
td.el-table__cell {
// text-align: center !important;
// padding-left: 14px !important;
// height: 52px !important;
padding: 11px 0 11px 14px !important;
// color: #B3B3B3 ;
}
.el-table__row{
height: 52px !important;
padding: 11px 0 11px 14px !important;
color: #B3B3B3 ;
}
// 表头文字颜色
thead {
color: #0c1b2b !important;
}
// .el-table__body tr:hover {
// position: relative;
// z-index: 2;
// background: #ffffff !important;
// box-shadow: 0px 2px 12px 0px rgba(51, 88, 195, 0.22);
// }
.el-table tbody tr:hover>td {
background-color: transparent !important;
}
.el-table::before {
background-color: transparent !important;
}
.el-input__inner {
// padding: 15px 20px 15px 28px !important;
border-radius: 4px;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
border: 0 !important;
// height: 48px !important;
// color: #1B53EE !important;
}
.el-input--mini .el-input__inner {
height: 32px !important;
color: #B3B3B3;
}
// 分页样式
.el-pagination {
font-weight: 400 !important;
padding: 0 !important;
// line-height: 32px !important;
display: flex;
// align-items: center;
}
.el-pagination .btn-prev ,.el-pagination .btn-next{
width: 32px;
height: 32px;
border-radius: 4px;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
margin: 0 12px !important;
color: #B3B3B3 ;
}
// .el-pager, .el-pager li {
// width: 32px;
// height: 32px;
// }
.el-pager li {
width: 32px !important;
height: 32px !important;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
margin-right:8px !important;
border-radius: 4px !important;
line-height: 32px !important;
color: #B3B3B3 ;
}
.el-pager li.active {
background: #1B53EE !important;
color: #ffffff !important;
}
.el-pager li:last-child {
margin: 0 !important;
}
.el-pagination__jump {
margin: 0 !important;
color:#B3B3B3 !important;
font-size: 14px !important;
}
.el-input__suffix {
width: 25px;
// background: #000;
}
.el-radio__inner {
display: none !important;
}
.el-radio.is-bordered+.el-radio.is-bordered .is-checked {
background: #000 !important;
}
.el-radio.is-bordered+.el-radio.is-bordered {
// margin: 0 !important;
// margin-right: 18px;
margin: 0 18px 0 0 !important;
// padding: 16px 20px 16px 28px;
}
.el-radio__label {
font-size: 16px !important;
padding-left: 0 !important;
}
.is-checked {
background: #1B53EE !important;
.el-radio__input.is-checked+.el-radio__label {
color: #fff !important;
}
}
// .el-icon-time:before {
// display: none;
// }
.el-button {
border-radius: 4px;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
}
.el-breadcrumb__separator {
color: #070F18 !important;
}
.el-descriptions{
font-size: 16px !important;
white-space: nowrap;
}
.el-descriptions-item__label.has-colon::after {
top: 0 !important;
left: 3px;
}
.el-button+.el-button {
// margin-left: 0 !important;
}
.el-button--text {
margin-right: 0.625rem !important;
padding: 7px 15px !important;
}
.el-carousel__mask {
background: none !important;
}
\ No newline at end of file
src/components/breadCrumb.vue 0 → 100644
浏览文件 @ cfa883b9
<!--
* @Description:
* @Version: 2.0
* @Autor: lwq
* @Date: 2022-04-07 15:51:46
-->
<template>
<div class="breadcrumb">
<i class="bread_icon"></i>
<el-breadcrumb separator=">">
<el-breadcrumb-item
v-if="item.meta.title"
v-for="item in breadcrumb"
:key="item.path"
@click="showRoute"
:to="item.path"
>{{ item.meta.title }}</el-breadcrumb-item
>
</el-breadcrumb>
</div>
</template>
<script>
export default {
name: "breadCrumb",
data() {
return {
breadcrumb: [],
};
},
methods: {
showRoute() {
console.log($route);
},
},
watch: {
$route: {
handler(newV, oldV) {
if (newV) {
this.breadcrumb = this.$route.matched;
}
},
deep: true,
},
},
components: {},
mounted() {
// console.log(123, this.$route.matched);
this.breadcrumb = this.$route.matched;
},
};
</script>
<style scoped lang="less">
.breadcrumb {
width: 100%;
// display: flex;
box-sizing: border-box;
// align-items: center;
padding: 40px;
// height: 100px;
// background-color: #fff;
display: flex;
align-items: center;
.el-breadcrumb {
.el-breadcrumb__item:last-child {
display: inline-block;
:first-child {
color: #070f18 !important;
font-weight: 800;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
// background-color: red;
}
}
// color: black;
}
/deep/.el-breadcrumb__inner {
display: inline-block;
height: 100%;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-size: 20px;
line-height: 20px;
// color: #8f9398;
// font-weight: bold;
}
/deep/.el-breadcrumb__separator {
font-size: 20px;
line-height: 20px;
}
}
</style>
src/components/headerCom.vue 0 → 100644
浏览文件 @ cfa883b9
<!--
* @Description:
* @Version: 2.0
* @Autor: lwq
* @Date: 2022-04-08 15:56:44
-->
<template>
 
<div class="header">
<div class="header_left">
<div class="logo"></div>
<div class="title">城管AI结案处理系统</div>
</div>
<div class="header_right">
<div class="header_icon">
<div class="header_drop">
<el-dropdown @command="handleCommand">
<div>
<img src="../assets/comImg/users.png" />
<span v-if="userMange"> {{ userMange.name }}</span>
</div>
<i class="dropdown_icon"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">修改密码</el-dropdown-item>
<el-dropdown-item command="2">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</div>
</template>
<script>
import Axios from "axios";
export default {
name: "headerCom",
data() {
return {
// repatPassword: '',
userForm: {
id: "",
},
userMange: "",
};
},
components: {},
methods: {
handleCommand() {},
},
};
</script>
<style lang="less" scoped>
.header {
box-sizing: border-box;
// background-image: url("../assets/comImg/header.png");
height: 70px;
width: 100%;
background-color: #b3c0d1;
display: flex;
// justify-content: space-between;
align-items: center;
.header_left {
display: flex;
align-items: center;
.logo {
width: 48px;
height: 48px;
border-radius: 50%;
// background: #fff;
margin-right: 18px;
background-image: url(../assets/img/logo.png);
background-size: cover;
}
.title {
font-size: 26px;
line-height: 26px;
color: #ffffff;
// color: #b3c0d1d;
}
}
.header_right {
width: 570px;
display: flex;
flex-direction: row;
justify-content: right;
align-items: center;
.router_title {
width: 118px;
height: 36px;
display: flex;
align-items: center;
font-size: 18px;
line-height: 18px;
cursor: pointer;
font-family: SourceHanSansCN-Regular;
justify-content: space-between;
color: rgba(229, 241, 255, 0.65);
position: relative;
box-sizing: border-box;
padding-left: 8px;
text-align: center;
// left: -20px;
.Bar {
width: 2px;
height: 16px;
background-color: rgba(246, 250, 255, 0.16);
position: absolute;
right: -15px;
top: 10px;
}
}
.t_router_active {
color: #ffffff;
background-color: rgba(229, 241, 255, 0.16);
}
.header_icon {
width: 124px;
height: 50px;
display: flex;
justify-content: right;
align-items: center;
flex-direction: row;
cursor: pointer;
:first-child {
display: flex;
color: #ffffff;
justify-content: center;
align-items: center;
flex-direction: row;
}
img {
// border-radius: 50%;
width: 48px;
margin-right: 8px;
}
}
}
}
</style>
src/components/maintain.vue 0 → 100644
浏览文件 @ cfa883b9
<template>
<div class="container">
<div class="box">
<img src="../assets/img/main.png" alt="">
<h1>为进一步优化完善网站，我们正在实施网站系统升级维护，<br>
维护时间为每天晚上20:00至早上07:00，因升级维护给您造成的不便，敬请谅解。</h1></div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.container{
width: 100%;
height: 100%;
padding-top: 150px;
}
.box{
width:580px;
margin:0 auto;
text-align: center;
img{
width: 128px;
margin-bottom: 20px;
}
}
h1{
font-size:20px;
text-align:center;
font-weight:normal;
}
</style>
\ No newline at end of file
src/components/picturePreview.vue 0 → 100644
浏览文件 @ cfa883b9
<template>
<div class="aLargerPreview">
<!-- 图片左 -->
<div class="pic-Big">
<!-- 上方小图 -->
<div class="above_picture">
<!-- 左箭头 -->
<div class="left-arrow">
<i class="el-icon-caret-left" @click="prePic"></i>
</div>
<div class="pic-item-box" ref="scrollBox">
<div
v-for="(item, index) in srcListTemp"
:key="index"
class="pic-item"
@click="checkSrc(item, index)"
:style="item == largePictureTemp ? 'border:1px solid red' : ''"
ref="imgItem"
>
<img class="item-img" :src="BaseUrl.default + item.picUrl" alt="" />
</div>
</div>
<!-- 右箭头 -->
<div class="right-arrow">
<i class="el-icon-caret-right" @click="nextPic"></i>
</div>
</div>
<!-- 下方大图 -->
<div class="big_picture">
<!-- 图片信息 -->
<div
style="color: #fff"
class="pictureInformation"
:title="
largePictureTemp.conf
? '可信度' + ':' + largePictureTemp.conf
: '暂无参数'
"
>
{{ largePictureTemp.des ? largePictureTemp.des : "暂无" }}
</div>
<div class="picture-box">
<img
class="big-img"
:src="BaseUrl.default + largePictureTemp.picUrl"
ref="img"
:style="{
transform: 'rotate(' + angle + 'deg) scale(' + step + ')',
boxShadow: ischeck ? '0 0 16px rgba(255,255,255,0.8)' : '',
}"
@click="check"
/>
</div>
</div>
<!-- 文字 -->
<p class="case-type-text">{{ text }}</p>
</div>
<!-- 操作按钮 -->
<div class="operation">
<i class="el-icon-zoom-in" @click="enlargePicture"></i>
<i class="el-icon-zoom-out" @click="zoomOutPicture"></i>
<i class="el-icon-refresh-right" @click="rotatePicture"></i>
</div>
</div>
</template>
<script>
export default {
props: {
//父组件传来的值需定义一下
srcList: {
type: Array, //类型
},
largePicture: {
type: Object, //类型
},
text: {
type: null, //类型
},
},
data() {
return {
srcListTemp: this.srcList,
largePictureTemp: this.largePicture, //
picNumber: 0, //图片索引值
step: 1, //图片大小的倍数
angle: 0, //旋转角度
ischeck: false, //是否选中
};
},
watch: {
// 监听是否选中大图
ischeck(newValue, oldValue) {
if (newValue == true) {
this.scalePic();
this.movePic();
} else {
document.onmousewheel = function () {};
document.onmousemove = function () {};
}
},
},
created() {},
methods: {
// 移动大图
movePic() {
var isDown = false;
var x, y;
var l;
var t;
let img = this.$refs.img;
img.onmousedown = function (e) {
e.preventDefault();
x = e.clientX;
y = e.clientY;
l = img.offsetLeft;
t = img.offsetTop;
isDown = true;
};
document.onmousemove = function (e) {
if (isDown == false) {
return;
} else {
var nx = e.clientX;
var ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);
img.style.left = nl + "px";
img.style.top = nt + "px";
}
};
img.onmouseup = function () {
// img.style.cursor = "default"
isDown = false;
};
},
// 是否选中大图
check() {
this.ischeck = !this.ischeck;
},
// 点击放大图片
enlargePicture() {
if (this.step >= 1.6) return;
this.step += 0.1;
},
// 点击缩小图片
zoomOutPicture() {
if (this.step <= 0.7) return;
this.step -= 0.1;
},
// 点击旋转图片
rotatePicture() {
this.angle += 90;
},
checkSrc(v, i) {
// 点击小图切换大图
this.largePictureTemp = v;
this.picNumber = i;
this.clearStyle();
},
prePic() {
//上一张图片
if (this.picNumber == 0) {
this.picNumber = this.srcListTemp.length - 1;
// return;
} else {
this.picNumber -= 1;
}
this.$refs.scrollBox.scrollLeft =
this.$refs.imgItem[this.picNumber].offsetLeft - 50; //滚动条定位到当前图片位置
this.clearStyle();
this.largePictureTemp = this.srcListTemp[this.picNumber];
},
nextPic() {
//下一张图片
if (this.picNumber == this.srcListTemp.length - 1) {
this.picNumber = 0;
// return;
} else {
this.picNumber += 1;
}
this.$refs.scrollBox.scrollLeft =
this.$refs.imgItem[this.picNumber].offsetLeft - 50; //滚动条定位到当前图片位置
this.clearStyle();
this.largePictureTemp = this.srcListTemp[this.picNumber];
},
scalePic() {
//监听鼠标滚轮事件放大缩小大图
let img = this.$refs.img;
var that = this;
document.onmousewheel = function (e) {
var isbig = e.wheelDelta;
if (isbig >= 0) {
if (that.step >= 1.6) {
} else {
that.step += 0.1;
img.style.transform = "scale(" + that.step + ") ";
}
} else {
if (that.step <= 0.7) {
} else {
that.step -= 0.1;
img.style.transform = "scale(" + that.step + ") ";
}
}
};
},
clearStyle() {
//清除所有变化样式
(this.step = 1),
(this.angle = 0),
this.$refs.img.style.removeProperty("transform");
},
},
};
</script>
<style lang="less" scoped>
// 最外层
.aLargerPreview {
width: 50%;
height: 100%;
// background: red;
position: relative;
// margin-top: 40px;
// 互动操作区域
.operation {
position: absolute;
bottom: 1%;
left: 50%;
transform: translateX(-50%);
i {
font-size: 25px;
cursor: pointer;
color: #fff;
&:nth-child(2) {
margin: 0 30px;
}
}
}
.pic-Big {
width: 50%;
height: 100%;
// background: red;
// border: 1px solid white;
position: fixed;
top: 0;
.case-type-text {
// display: inline-block;
position: absolute;
// text-align: center;
left: 50%;
bottom: 3%;
transform: translateX(-50%);
font-size: 24px;
color: #1b53ee;
z-index: 50;
}
.pictureInformation {
position: absolute;
left: 50%;
transform: translateX(-50%);
// margin-bottom: 20px;
top: 240px;
// bottom: 0;
cursor: default;
z-index: 100;
}
}
// 上方小图区域
.above_picture {
width: 100%;
height: 182px;
// background: #000;
// border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 60px;
.left-arrow,
.right-arrow {
cursor: pointer;
font-size: 50px;
color: #fff;
}
// 每张小图片
.pic-item-box {
// flex: 1;
width: 90%;
// border: 1px solid red;
height: 100%;
display: flex;
align-items: center;
overflow: auto;
transition: 0.3s;
box-sizing: border-box;
// justify-content: center;
// text-align: center;
.pic-item {
height: 150px;
width: 150px;
margin-right: 20px;
flex-shrink: 0;
cursor: pointer;
// display: inline-block;
.item-img {
width: 100%;
height: 100%;
}
}
.pic-item:last-child {
margin-right: 0;
}
}
}
// 下方大图区域
.big_picture {
height: calc(100% - 340px);
// border: 1px solid black;
padding-top: 20px;
// 限定大图的框
.picture-box {
width: 600px;
height: 90%;
margin: 0 auto;
// position: relative;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
// border: 1px solid #fff;
.big-img {
max-height: calc(100% - 400px);
max-width: 600px;
position: absolute;
// margin: auto;
z-index: 50;
cursor: move;
// transform-origin: center;
}
}
}
}
</style>
\ No newline at end of file
src/components/pictureView.vue 0 → 100644
浏览文件 @ cfa883b9
<template>
<div class="aLarger-preview">
<!-- 图片左 -->
<div class="pic-Big">
<!-- 上方小图 -->
<div class="above-picture">
<el-carousel
class="pic-box"
:interval="4000"
type="card"
height="182px"
indicator-position="none"
:autoplay="false"
@change="change"
>
<el-carousel-item v-for="(item, index) in srcListTemp" :key="index">
<el-image
style="width: 182px; height: 182px"
:src="item"
></el-image>
</el-carousel-item>
</el-carousel>
</div>
<!-- 下方大图 -->
<div class="big-picture">
<div class="picture-box">
<img
class="big-img"
:src="largePictureTemp"
ref="img"
:style="{
transform: 'rotate(' + angle + 'deg) scale(' + step + ')',
boxShadow: ischeck ? '0 0 16px rgba(255,255,255,0.8)' : '',
}"
@click="check"
/>
</div>
</div>
<!-- 文字 -->
<p class="case-type-text">{{ text }}</p>
</div>
<!-- 操作按钮 -->
<div class="operation">
<i class="el-icon-zoom-in" @click="enlargePicture"></i>
<i class="el-icon-zoom-out" @click="zoomOutPicture"></i>
<i class="el-icon-refresh-right" @click="rotatePicture"></i>
</div>
</div>
</template>
<script>
export default {
props: {
//父组件传来的值需定义一下
srcList: {
type: Array, //类型
},
largePicture: {
type: String, //类型
},
text: {
type: null, //类型
},
},
data() {
return {
picNumber: 0, //图片的索引值
srcListTemp: this.srcList, //图片列表
largePictureTemp: this.largePicture, //大图地址值
step: 1, //缩放原始大小
angle: 0, //旋转角度
ischeck: false, //是否选中
};
},
watch: {
ischeck(newValue, oldValue) {
if (newValue == true) {
this.scalePic();
this.movePic();
} else {
document.onmousewheel = function () {};
document.onmousemove = function () {};
}
},
},
methods: {
// 移动大图
movePic() {
var isDown = false;
var x, y;
var l;
var t;
let img = this.$refs.img;
img.onmousedown = function (e) {
e.preventDefault();
img.style.cursor = "move";
x = e.clientX;
y = e.clientY;
l = img.offsetLeft;
t = img.offsetTop;
isDown = true;
};
document.onmousemove = function (e) {
if (isDown == false) {
return;
} else {
var nx = e.clientX;
var ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);
img.style.left = nl + "px";
img.style.top = nt + "px";
}
};
img.onmouseup = function () {
isDown = false;
};
},
check() {
this.ischeck = !this.ischeck;
},
enlargePicture() {
if (this.step >= 1.6) return;
this.step += 0.1;
},
zoomOutPicture() {
if (this.step <= 0.7) return;
this.step -= 0.1;
},
rotatePicture() {
this.angle += 90;
},
change(val) {
// console.log(val);
this.picNumber = val;
this.clearStyle();
this.largePictureTemp = this.srcListTemp[this.picNumber];
},
scalePic() {
//监听鼠标滚轮事件放大缩小大图
let img = this.$refs.img;
var that = this;
document.onmousewheel = function (e) {
var isbig = e.wheelDelta;
if (isbig >= 0) {
if (that.step >= 1.6) {
} else {
that.step += 0.1;
img.style.transform = "scale(" + that.step + ") ";
}
} else {
if (that.step <= 0.7) {
} else {
that.step -= 0.1;
img.style.transform = "scale(" + that.step + ") ";
}
}
};
},
clearStyle() {
//清除所有变化样式
(this.step = 1),
(this.angle = 0),
this.$refs.img.style.removeProperty("transform");
},
},
};
</script>
<style lang="less" scoped>
.aLarger-preview {
width: 50%;
height: 100%;
// background: red;
position: relative;
.operation {
position: absolute;
bottom: 1%;
left: 50%;
transform: translateX(-50%);
z-index: 50;
i {
font-size: 25px;
cursor: pointer;
color: #fff;
&:nth-child(2) {
margin: 0 30px;
}
}
}
.pic-Big {
width: 50%;
height: 100%;
position: fixed;
top: 0;
.case-type-text {
// display: inline-block;
position: absolute;
// text-align: center;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
color: #fff;
z-index: 50;
}
}
.above-picture {
width: 100%;
height: 182px;
// background: #000;
// border: 1px solid black;
display: flex;
// align-items: center;
justify-content: center;
margin-top: 40px;
.pic-box {
// text-align: center !important;
// justify-content: center;
width: 80%;
}
.el-carousel__item {
// width: 182px;
// height: 182px;
text-align: center;
}
}
.big-picture {
height: calc(100% - 340px);
.picture-box {
width: 600px;
height: 100%;
margin: 0 auto;
// position: relative;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
// position: relative;
.big-img {
max-height: calc(100% - 340px);
max-width: 600px;
position: absolute;
// margin: auto;
z-index: 50;
cursor: move;
// transform-origin: center;
}
}
}
}
</style>
\ No newline at end of file
src/components/silder.vue 0 → 100644
浏览文件 @ cfa883b9
<!--
* @Description:
* @Version: 2.0
* @Autor: lwq
* @Date: 2022-04-08 16:00:35
-->
<template>
<div class="left_nav">
<router-link
class="router_nav"
active-class="router_active"
tag="div"
v-for="i in routerList"
:key="i.path"
:to="i.path"
>
<i :class="setrouter_active_icon(i)"></i>
{{ i.title }}
</router-link>
</div>
</template>
<script>
export default {
name: "silder",
data() {
return {
routerList: [
{
title: "案件管理",
path: "/dragger/caseManagement",
icon_path: "caseManagement_icon",
icon_path_show: "caseManagementshow_icon",
},
],
};
},
components: {},
created() {
// console.log(this.$route);
},
methods: {
setrouter_active_icon(val) {
// console.log(val);
let icon = val.icon_path;
this.$route.matched.map((v) => {
if (val.path == v.path) {
icon = val.icon_path_show;
}
});
return icon;
},
},
};
</script>
<style lang="less" scoped>
.left_nav {
width: 272px;
// border: 1px solid black;
height: 100%;
background-color: #ffffff;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
.router_nav {
cursor: pointer;
user-select: none;
box-sizing: border-box;
padding-left: 60px;
color: #070f18;
font-size: 20px;
cursor: pointer;
font-family: SourceHanSansCN-Regular;
height: 50px;
text-align: left;
line-height: 50px;
}
.router_active {
padding-left: 59px;
height: 50px;
// border-left: 9px solid #3a72ff;
// background-image: linear-gradient(to right, #2e56ed);
background: rgba(27, 83, 238, 0.1);
background-image: url("../assets/img/left_jian.png");
background-repeat: no-repeat;
background-position: 90%;
color: #1b53ee;
font-weight: 500;
border: 1px solid #1b53ee;
}
}
</style>
src/main.js
浏览文件 @ cfa883b9
...@@ -7,6 +7,10 @@ import baseUrl from "../config"; ...@@ -7,6 +7,10 @@ import baseUrl from "../config";
import ElementUI from "element-ui"; import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css"; import "element-ui/lib/theme-chalk/index.css";
// import "./assets/css/global.less"; // import "./assets/css/global.less";
<<<<<<< HEAD
=======
import "./assets/less/icon.less";
>>>>>>> 0887611 (test)
import "./util/rem"; import "./util/rem";
......
src/router/index.js
浏览文件 @ cfa883b9
...@@ -12,6 +12,44 @@ const routes = [ ...@@ -12,6 +12,44 @@ const routes = [
{ {
path: "/home", path: "/home",
component: Home, component: Home,
<<<<<<< HEAD
=======
redirect: "/dragger",
children: [
{
path: "/dragger",
name: "dragger",
component: Index,
redirect: "/dragger/caseManagement",
children: [
{
path: "caseManagement",
component: () => import("../views/router_view.vue"),
meta: {
title: "案件管理",
},
// redirect: "/dragger/ctrldevice",
children: [
{
path: "/",
component: () =>
import("../views/CaseManagement/caseManagement.vue"),
},
{
path: "detailsOfCase",
component: () =>
import("../views/CaseManagement/detailsOfCase.vue"),
meta: {
title: "案件详情",
},
},
],
},
],
},
],
>>>>>>> 0887611 (test)
}, },
]; ];
......
src/serve/axios.js
浏览文件 @ cfa883b9
...@@ -53,11 +53,11 @@ export default function ( ...@@ -53,11 +53,11 @@ export default function (
{ {
// 不传时，默认参数 // 不传时，默认参数
method = "get", method = "get",
timeout = 180000, timeout = 1800000,
data = {}, data = {},
params = {}, params = {},
headers = { "Content-Type": "application/json" }, // application/x-www-form-urlencoded;charset=UTF-8; headers = { "Content-Type": "application/json" }, // application/x-www-form-urlencoded;charset=UTF-8;
dataType = "json" dataType = "json",
} }
) { ) {
const config = { const config = {
...@@ -68,7 +68,7 @@ export default function ( ...@@ -68,7 +68,7 @@ export default function (
data: data, data: data,
params: params, params: params,
headers: headers, headers: headers,
dataType: dataType dataType: dataType,
}; };
return axios(config); return axios(config);
} }
src/serve/server.js
浏览文件 @ cfa883b9
...@@ -10,6 +10,7 @@ import axios from "./axios"; ...@@ -10,6 +10,7 @@ import axios from "./axios";
*/ */
const server = { const server = {
/*******************城管AI--案件管理***************** */ /*******************城管AI--案件管理***************** */
<<<<<<< HEAD
getDataLast() { getDataLast() {
// 获取数据 // 获取数据
return axios("/getDataLast", { return axios("/getDataLast", {
...@@ -21,6 +22,54 @@ const server = { ...@@ -21,6 +22,54 @@ const server = {
return axios("/saveDataLast", { return axios("/saveDataLast", {
method: "post", method: "post",
data, data,
=======
getCaseList(data, page) {
// 设备案件列表数据
return axios(`/getData/${page}`, {
method: "post",
data,
});
},
aiClose() {
// ai结案
return axios("/ai", {
method: "get",
});
},
getAiResults() {
// 获取ai结案结果
return axios("/getResults", {
method: "get",
>>>>>>> 0887611 (test)
});
},
uploadPic(id, data, phase) {
// 下载图片
return axios(`/pic/${id}/${phase}`, {
method: "post",
data,
});
},
emptyData() {
// 点击重置
return axios("/emptyData", {
method: "get",
});
},
/*******************城管AI--案件详情***************** */
closeCase(data) {
// 结案
return axios("/close", {
method: "post",
data,
});
},
noCase(id) {
// 不可结案
return axios(`/noClose/${id}`, {
method: "GET",
}); });
}, },
}; };
......
src/views/CaseManagement/CaseManagement copy.vue 0 → 100644
浏览文件 @ cfa883b9
<template>
<div class="sem-container">
<!-- 列表视图 -->
<div class="box">
<!-- 主体 -->
<div class="list-container">
<!-- 顶部布局 -->
<div class="list-container-top">
<!-- AI结案按钮 -->
<div class="AIjiean">
<el-button
:style="btnType"
:disabled="disabled"
@click="autoClosing"
v-show="AIClose"
>AI结案</el-button
>
<div class="AIFruit" v-show="!AIClose">
<i class="el-icon-loading" v-show="AIloading"></i>
<div>
待处理：<span>{{ fruitFrom.toBeProcessed }}</span>
</div>
<div>
已结案：<span>{{ fruitFrom.processed }}</span>
</div>
<div>
待复查：<span>{{ fruitFrom.untreated }}</span>
</div>
</div>
</div>
<div class="search">
<!-- 标签选项 -->
<div class="state-tab-box">
<el-radio
v-model="dataRequest.state"
:label="1"
border
@change="change"
>待处理<span class="deal-with">{{ count1 }}</span></el-radio
>
<el-radio
v-model="dataRequest.state"
:label="2"
border
@change="change"
>已结案<span>{{ count2 }}</span></el-radio
>
<el-radio
v-model="dataRequest.state"
:label="3"
border
@change="change"
>待人工复查<span>{{ count3 }}</span></el-radio
>
</div>
<!-- 上传按钮 -->
<div class="upload-button" @click="dialogVisible = true">上传</div>
<!-- 选择日期 -->
<div class="checkTime">
<div class="text">上报时间：</div>
<div class="block">
<el-date-picker
v-model="dataRequest.startTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
:prefix-icon="iconlist1"
class="checkDate hasColor"
@focus="getFocus1"
@blur="blur1"
>
<template>
<i class="calendar_icon"></i>
</template>
</el-date-picker>
</div>
<div class="text">至</div>
<div class="block">
<el-date-picker
v-model="dataRequest.endTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
:prefix-icon="iconlist2"
class="checkDate"
@focus="getFocus2"
@blur="blur2"
>
<template> <i class="el-icon-edit"></i></template>
</el-date-picker>
</div>
</div>
<!-- 右侧按钮 -->
<div class="list-container-top-btn">
<button class="addSem" @click="checkList">查询</button>
<button class="alarm" @click="resettingTime">重置</button>
</div>
</div>
</div>
<!-- 表格 -->
<div class="table-container">
<el-table
:data="caseForm"
style="width: 100%"
height="100%"
v-loading="loading"
>
<el-table-column
prop="id"
label="任务号"
width="160"
></el-table-column>
<el-table-column prop="type" label="类型">
<template slot-scope="scope">
{{ scope.row.type | checkData }}
</template>
</el-table-column>
<el-table-column prop="state" label="状态">
<template slot-scope="scope">
{{ scope.row.state | checkData2 }}
</template>
</el-table-column>
<el-table-column
prop="reportTime"
label="上报时间"
width="250px"
></el-table-column>
<el-table-column
prop="closeTime"
label="结案时间"
width="250px"
></el-table-column>
<el-table-column
prop="community"
label="所属社区"
width="320px"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<span class="look" @click="goReexamine(scope.row)">
<template v-if="scope.row.state === 3">复查</template>
<template v-else>详情</template>
</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页器 -->
<div class="pagination">
<el-pagination
@current-change="handleCurrentChange"
:page-sizes="[10]"
:page-size="100"
:current-page="dataRequest.page"
layout="sizes, prev, pager, next, jumper"
:total="
dataRequest.state == 1
? count1
: dataRequest.state == 2
? count2
: count3
"
>
</el-pagination>
</div>
</div>
</div>
<!-- 上传弹窗 -->
<el-dialog
title="上传案件"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
class="upload-dialog"
>
<el-upload
class="upload-demo"
action
:http-request="uploads"
:before-remove="beforeRemove"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只支持xls、xlsx、zip格式文件
</div>
</el-upload>
<el-select v-model="type" clearable placeholder="请选择类型">
<el-option
v-for="item in options"
:key="item.type"
:label="item.label"
:value="item.type"
>
</el-option>
</el-select>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="upload" class="up-btn"
>上 传</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
type: "100101",
label: "暴露垃圾",
},
{
type: "100103",
label: "便倒桩",
},
{
type: "100102",
label: "道路积水",
},
{
type: "100104",
label: "护树设施",
},
],
type: "",
file: [],
dialogVisible: false,
iconlist1: "calendar_icon",
iconlist2: "calendar_icon",
// 控制AI结案按钮切换
AIClose: true,
// 按钮样式
btnType: " ",
// 动态控制AI结案按钮的启用
disabled: false,
// 日期时间数据
dates: {
startTime: "",
endTime: "",
},
// 加载动画
loading: false,
// AI结案加载动画
AIloading: false,
// 按钮加载
AIloading: false,
// 列表数据
dataRequest: {
page: 1, // 当前页
endTime: "", //结束日期
startTime: "", //开始日期
state: 1, // 单选绑定值
},
page: 1,
// 总条数
count1: null, //待处理
count2: null, //已结案
count3: null, //待复查
// 表格数据
caseForm: [],
// 处理数据统计结果
fruitFrom: {},
};
},
created() {
this.getaiClose();
if (sessionStorage.getItem("dataRequest")) {
this.dataRequest = JSON.parse(sessionStorage.getItem("dataRequest"));
this.getCaseList();
sessionStorage.setItem("dataRequest", "");
if (this.dataRequest.state == 2 || this.dataRequest.state == 3) {
this.btnType =
"background: #E1E3E6; color: #B3B3B3;border:0;box-shadow: none";
this.disabled = true;
} else {
this.btnType = "";
this.disabled = false;
}
} else {
this.getCaseList();
}
// console.log(sessionStorage.getItem("dataRequest"));
// 轮询定时发送请求获取表格数据
// this.time = setInterval(() => {
// that.getCaseList();
// }, 3000);
},
mounted() {
document.getElementsByClassName(
"el-pagination__jump"
)[0].childNodes[0].nodeValue = "跳至";
},
beforeDestroy() {
clearInterval(this.time);
this.time = null;
},
filters: {
checkData(val) {
let _res = "";
switch (val) {
case 100101:
// console.log(121323123123);
_res = "暴露垃圾";
break;
case 100103:
_res = "便道桩";
break;
case 100102:
_res = "道路积水";
break;
case 100104:
_res = "护树设施";
break;
}
return _res;
},
checkData2(val) {
let _res = "";
switch (val) {
case 1:
// console.log(121323123123);
_res = "待处理";
break;
case 2:
_res = "已结案";
break;
case 3:
_res = "待复查";
break;
}
return _res;
},
},
methods: {
upload() {
console.log(111, this.file);
console.log(222, this.type);
this.$axios.uploadPic(this.type, this.file).then((res) => {
console.log("上传结果", res);
if (res.status == 200) {
this.$message.success("上传成功!");
this.dialogVisible = false;
} else {
this.$message.error("上传失败!");
}
});
},
uploads(file) {
const formData = new FormData();
formData.append("file", file.file);
console.log(111, file);
this.file = formData;
console.log(this.file);
},
// 获得选择日期时间焦点触发
getFocus1() {
this.iconlist1 = "calendarshow_icon";
},
getFocus2() {
this.iconlist2 = "calendarshow_icon";
},
blur1() {
this.iconlist1 = "calendar_icon";
},
blur2() {
this.iconlist2 = "calendar_icon";
},
// AI结案结果获取
getaiClose() {
if (
sessionStorage.getItem("click_ai_close") &&
sessionStorage.getItem("click_ai_close") == 1
) {
this.AIClose = false;
this.AIloading = true;
let that = this;
that.getAiResults();
this.time = setInterval(() => {
that.getAiResults();
}, 2000);
}
},
// 点击通过时间查询
checkList() {
if (this.dataRequest) {
this.dataRequest.endTime ? this.dates.endTime : "";
this.dataRequest.page = 1;
}
this.getCaseList();
},
// 点击AI结案
autoClosing() {
// console.log("进行AI结案");
sessionStorage.setItem("click_ai_close", "1");
this.AIClose = false;
this.AIloading = true;
// 发送AI结案请求
this.$axios.aiClose().then((res) => {
// console.log("进行AI结案", res);
if (res.data.code == 200) {
this.$message({
showClose: true,
message: res.data.data,
type: "success",
});
clearInterval(this.time);
sessionStorage.setItem("click_ai_close", "");
this.time = null;
this.AIClose = true;
this.AIloading = false;
} else {
this.$message({
showClose: true,
message: res.data.data,
type: "error",
});
}
this.getCaseList();
});
this.getaiClose();
},
// 获取AI结案结果
getAiResults() {
this.$axios.getAiResults().then((res) => {
// console.log("AI结案结果", res);
if (res.data.code == 200) {
this.fruitFrom = res.data.data;
if (this.fruitFrom.toBeProcessed == 0) {
this.AIClose = true;
sessionStorage.setItem("click_ai_close", "");
clearInterval(this.time);
this.time = null;
this.getCaseList();
this.$message.success("ai结案成功");
}
}
});
},
// 点击重置
resettingTime() {
this.dates = [];
this.dataRequest = {
page: 1,
endTime: "",
startTime: "",
state: 1, // 单选绑定值
};
this.btnType = "";
this.getCaseList();
},
// 点击复查跳转详情页
goReexamine(val) {
let data = JSON.stringify(val);
sessionStorage.setItem("caseDetail", data); //加当前行的数据保存
sessionStorage.setItem("dataRequest", JSON.stringify(this.dataRequest)); //将当前请求表格数据的信息保存
// console.log(data);
this.$router.push({
path: `/dragger/CaseManagement/reexamine`,
// query: { id: 1, state: "待复查" },
});
},
// 切换标签触发事件
change(val) {
// console.log(val);
this.dataRequest.state = val;
this.dataRequest.page = 1;
this.getCaseList();
if (val == 2 || val == 3) {
this.btnType =
"background: #E1E3E6; color: #B3B3B3;border:0;box-shadow: none";
this.disabled = true;
} else {
this.btnType = "";
this.disabled = false;
}
},
// 获取案件列表
getCaseList() {
this.loading = true;
this.$axios
.getCaseList(this.dataRequest, this.dataRequest.page)
.then((res) => {
// console.log(res);
if (res.data.code == 200) {
this.loading = false;
this.caseForm = res.data.data.excelDataList;
this.count1 = res.data.data.count1;
this.count2 = res.data.data.count2;
this.count3 = res.data.data.count3;
} else {
this.$message.error("获取数据失败！");
}
});
},
// 当前页变化
handleCurrentChange(val) {
this.dataRequest.page = val;
this.getCaseList();
},
// 关闭弹窗
handleClose() {
this.dialogVisible = false;
this.type = "";
},
// 移除文件提示
beforeRemove(file) {
return this.$confirm(`确定移除 ${file.name}？`);
},
},
};
</script>
<style lang="less" scoped>
.sem-container {
height: 100%;
.upload-dialog{
.upload-demo {
margin-bottom: 16px;
}
.up-btn {
margin-left: 16px !important;
}
}
}
// 大容器
.box {
width: 100%;
height: 100%
// margin-top: 24px;
}
// 表格视图
.list-container {
width: 100%;
height: 100%;
// background: #ffffff;
// box-shadow: 0px 4px 16px 0px rgba(2, 12, 23, 0.07);
// padding: 20px;
// padding-top: 8px;
position: relative;
.el-tabs {
margin-top: 24px;
}
.table-container {
// margin-top: 11px;
margin-top: 30px;
// height: calc(100% -210px);
height: calc(100% - 254px);
position: relative;
margin-bottom: 26px;
// background-color: #000;
background-color: #000;
span {
font-size: 16px;
cursor: pointer;
}
.look {
color: #1b53ee;
margin-right: 10px;
}
}
// 表格视图顶部
.list-container-top {
// display: flex;
// justify-content: space-between;
// align-items: center;
// border: 1px solid red;
.AIjiean {
width: 100%;
// text-align: center;
display: flex;
justify-content: center;
.el-button {
width: 1300px !important;
height: 56px;
// border-radius: 4px;
font-size: 18px;
color: #1b53ee;
border: 2px solid #1b53ee;
background: #fff;
}
.AIFruit {
width: 1300px;
height: 56px;
border-radius: 4px;
background: #E1E3E6;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
display: flex;
justify-content: center;
align-items: center;
color: #b3b3b3;
span {
margin-right: 16px;
}
div:nth-child(1) >span{
color: #FE9511;
}
div:nth-child(2) >span{
color: #1B53EE;
}
div:nth-child(3) >span{
color: #6E7173;
}
.el-icon-loading {
color: #1B53EE;
}
}
}
.search {
display: flex;
margin-top: 24px;
justify-content: space-between;
padding-left: 2px;
// 案件类型标签
.state-tab-box {
display: flex;
.el-radio {
padding: 16px 20px 16px 28px;
border: 0;
border-radius: 4px;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
margin-right: 18px;
background: #fff;
height: 48px;
span {
// display: inline-block;
padding: 4px 5px 4px 6px;
border-radius: 4px;
background: #F0F2F5;
color: #6E7173;
font-size: 16px;
margin-left: 16px;
}
.deal-with {
background: #EB5B5B;
color: #fff;
}
}
.is-checked {
span {
background: rgba(246, 247, 249, 0.4);
color: #fff;
}
}
}
// 上传按钮
.upload-button {
height: 48px;
width: 88px;
background: #fe9511;
color: #fff;
box-shadow: 0px 1px 2px 1px rgba(27, 83, 238, 0.16);
border-radius: 4px;
text-align: center;
line-height: 48px;
cursor: pointer;
transition: 0.5s;
&:hover{
background: #ffb152;
}
}
.checkTime {
display: flex;
align-items: center;
margin-right: 24px;
// .checkDate {
// width: 178px;
// }
/deep/.el-input__inner {
height: 48px;
// font-size: 12px;
}
/deep/.el-input__inner::placeholder {
color: #b3b3b3;
font-size: 16px;
}
/deep/.el-input__inner:focus::placeholder {
color: #1B53EE;
}
.text {
font-size: 16px;
color: #6e7173;
margin: 0 16px;
}
}
// 右侧按钮
.list-container-top-btn {
button {
white-space: nowrap;
width: 88px;
height: 48px;
border: none;
border-radius: 4px;
// box-shadow: 0px 1px 2px 1px #1b53ee;
background-color: #2f54eb;
color: #ffffff;
font-size: 16px;
cursor: pointer;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
}
.alarm {
margin-left: 20px;
color: #1b53ee;
background: #fff;
// border: 1px solid #85a5ff;
}
}
}
}
// 分页器
.pagination {
// width: 100%;
position: absolute;
// margin-top: 24px;
// bottom: 172px;
right: 0;
/deep/.el-input__inner:last-child {
height: 32px;
color: #1B53EE;
// margin: 0 8px 0 8px;
}
}
}
</style>
\ No newline at end of file
src/views/CaseManagement/CaseManagement.vue 0 → 100644
浏览文件 @ cfa883b9
<template>
<div class="sem-container">
<!-- 列表视图 -->
<div class="box">
<!-- 主体 -->
<div class="list-container">
<!-- 顶部布局 -->
<div class="list-container-top">
<!-- AI结案按钮 -->
<div class="AIjiean">
<el-button
:style="btnType"
:disabled="disabled"
@click="autoClosing"
v-show="AIClose"
>AI结案</el-button
>
<div class="AIFruit" v-show="!AIClose">
<i class="el-icon-loading" v-show="AIloading"></i>
<div>
待处理：<span>{{ fruitFrom.toBeProcessed }}</span>
</div>
<div>
已结案：<span>{{ fruitFrom.processed }}</span>
</div>
<div>
未结案：<span>{{ fruitFrom.untreated }}</span>
</div>
<div>
待复查：<span>{{ fruitFrom.review }}</span>
</div>
</div>
</div>
<div class="search">
<!-- 标签选项 -->
<div class="state-tab-box">
<el-radio
v-model="dataRequest.state"
:label="1"
border
@change="change"
>待处理<span class="deal-with">{{ count1 }}</span></el-radio
>
<el-radio
v-model="dataRequest.state"
:label="2"
border
@change="change"
>已结案<span>{{ count2 }}</span></el-radio
>
<el-radio
v-model="dataRequest.state"
:label="4"
border
@change="change"
>未结案<span>{{ count4 }}</span></el-radio
>
<el-radio
v-model="dataRequest.state"
:label="3"
border
@change="change"
>待人工复查<span>{{ count3 }}</span></el-radio
>
<!-- 上传按钮 -->
<div class="upload-button" @click="dialogVisible = true">
上传案件
</div>
</div>
<!-- 选择日期 -->
<!-- <div class="checkTime">
<div class="text">上报时间：</div>
<div class="block">
<el-date-picker
v-model="dataRequest.startTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
:prefix-icon="iconlist1"
class="checkDate hasColor"
@focus="getFocus1"
@blur="blur1"
>
<template>
<i class="calendar_icon"></i>
</template>
</el-date-picker>
</div>
<div class="text">至</div>
<div class="block">
<el-date-picker
v-model="dataRequest.endTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
:prefix-icon="iconlist2"
class="checkDate"
@focus="getFocus2"
@blur="blur2"
>
<template> <i class="el-icon-edit"></i></template>
</el-date-picker>
</div>
</div> -->
<!-- 右侧按钮 -->
<div class="list-container-top-btn">
<!-- <button class="addSem" @click="checkList">查询</button> -->
<el-button
class="alarm"
:style="clearDisabled ? 'background: #E1E3E6' : ''"
@click="resettingTime"
:disabled="clearDisabled"
>清空</el-button
>
</div>
</div>
</div>
<!-- 表格 -->
<div class="table-container">
<el-table
:data="caseForm"
height="100%"
v-loading="loading"
ref="tableList"
:row-class-name="tableRowClassName"
:row-style="selectedstyle"
>
<el-table-column
prop="id"
label="任务号"
width="180px"
></el-table-column>
<el-table-column prop="type" label="类型">
<template slot-scope="scope">
{{ scope.row.type | checkData }}
</template>
</el-table-column>
<el-table-column prop="state" label="状态">
<template slot-scope="scope">
{{ scope.row.state | checkData2 }}
</template>
</el-table-column>
<el-table-column
prop="reportTime"
label="上报时间"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="closeTime"
label="结案时间"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
prop="community"
label="所属社区"
:show-overflow-tooltip="true"
></el-table-column>
<!-- <el-table-column
prop="result"
label="整改情况(图片)"
:show-overflow-tooltip="true"
width="320px"
></el-table-column> -->
<el-table-column label="操作">
<template slot-scope="scope">
<span
class="look"
@click="goReexamine(scope.row, scope.$index)"
:style="
scope.row.index == getIndex &&
getType == dataRequest.state &&
getPage == dataRequest.page
? 'color:#fff'
: ''
"
>
<template v-if="scope.row.state === 3">复查</template>
<template v-else>详情</template>
</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页器 -->
<div class="pagination">
<el-pagination
@current-change="handleCurrentChange"
:page-sizes="[10]"
:page-size="100"
:current-page="dataRequest.page"
layout="sizes, prev, pager, next, jumper"
:total="
dataRequest.state == 1
? count1
: dataRequest.state == 2
? count2
: dataRequest.state == 3
? count3
: count4
"
>
</el-pagination>
</div>
</div>
</div>
<!-- 上传弹窗 -->
<el-dialog
title="上传案件"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
:close-on-click-modal="false"
class="upload-dialog"
>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="上传案件" prop="file">
<el-upload
class="upload-demo"
ref="upload"
action
:http-request="uploads"
:on-remove="clearFiles"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只支持xlsx格式文件</div>
</el-upload>
</el-form-item>
<el-form-item label="案件类型" prop="type">
<el-select v-model="ruleForm.type" placeholder="请选择案件类型">
<el-option label="暴露垃圾" value="100101"></el-option>
<el-option label="便道桩" value="100103"></el-option>
<!-- <el-option label="道路积水" value="100102"></el-option> -->
<el-option label="护树设施" value="100104"></el-option>
</el-select>
</el-form-item>
<el-form-item label="案件阶段" prop="phase">
<el-select v-model="ruleForm.phase" placeholder="请选择案件阶段">
<el-option label="上报" value="1"></el-option>
<el-option label="处置核查" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
<!-- <el-form label-width="80px" ref="addform" :rules="uploadRules">
<el-form-item label="上传文件" prop="file">
<el-upload
class="upload-demo"
action
:http-request="uploads"
:before-remove="beforeRemove"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只支持xls、xlsx、zip格式文件
</div>
</el-upload>
</el-form-item>
<el-form-item label="案件类型" prop="type">
<el-select v-model="type" clearable placeholder="请选择类型">
<el-option
v-for="item in options"
:key="item.type"
:label="item.label"
:value="item.type"
>
</el-option>
</el-select>
</el-form-item>
</el-form> -->
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button
type="primary"
@click="upload"
v-show="!uploadLoading"
class="up-btn"
>上 传</el-button
>
<el-button
type="primary"
@click="upload"
v-show="uploadLoading"
class="up-btn"
:loading="uploadLoading"
>上 传 中</el-button
>
<!-- <el-button
type="primary"
class="up-btn"
v-show="uploadLoading"
:loading="uploadLoading"
>上 传 中</el-button
> -->
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
clearDisabled: false,
uploadLoading: false,
// 上传表单
ruleForm: {
file: [],
type: "",
phase: null,
},
// 上传表单验证
rules: {
file: [{ required: true, message: "请上传文件", trigger: "change" }],
type: [
{ required: true, message: "请选择案件类型", trigger: "change" },
],
phase: [
{ required: true, message: "请选择案件阶段", trigger: "change" },
],
},
// 上传弹窗
dialogVisible: false,
// 日期时间icon
iconlist1: "calendar_icon",
iconlist2: "calendar_icon",
// 控制AI结案按钮切换
AIClose: true,
// 按钮样式
btnType: " ",
// 动态控制AI结案按钮的启用
disabled: false,
// 日期时间数据
dates: {
startTime: "",
endTime: "",
},
// 加载动画
loading: false,
// AI结案加载动画
AIloading: false,
// 按钮加载
AIloading: false,
// 列表数据
dataRequest: {
page: 1, // 当前页
endTime: "", //结束日期
startTime: "", //开始日期
state: 1, // 单选绑定值
},
page: 1,
// 总条数
count1: null, //待处理
count2: null, //已结案
count3: null, //待复查
count4: null, //未结案
// 表格数据
caseForm: [],
// 处理数据统计结果
fruitFrom: {},
tabScoll: "", //表格滚动高度
getIndex: null,
getPage: null,
getType: null,
};
},
// watch: {
// caseForm: function () {
// this.$nextTick(function () {
// this.$refs.tableList.setCurrentRow(this.caseForm[2]);
// });
// },
// },
created() {
this.getaiClose();
if (sessionStorage.getItem("dataRequest")) {
this.dataRequest = JSON.parse(sessionStorage.getItem("dataRequest"));
this.getCaseList();
this.getPage = this.dataRequest.page;
this.getType = this.dataRequest.state;
if (this.dataRequest.state !== 1) {
this.btnType =
"background: #E1E3E6; color: #B3B3B3;border:0;box-shadow: none";
this.disabled = true;
} else {
this.btnType = "";
this.disabled = false;
}
} else {
this.getCaseList();
}
// sessionStorage.setItem("dataRequest", "");
if (sessionStorage.getItem("listIndex")) {
this.getIndex = sessionStorage.getItem("listIndex");
}
},
updated() {
// 表格当前位置
if (sessionStorage.getItem("scoll")) {
this.tabScoll = sessionStorage.getItem("scoll");
this.$nextTick(() => {
this.$refs.tableList.bodyWrapper.scrollTop = this.tabScoll;
// console.log("滚动位置", this.tabScoll);
// console.log("当前位置", this.$refs.tableList.bodyWrapper.scrollTop);
});
}
sessionStorage.setItem("scoll", "");
},
mounted() {
document.getElementsByClassName(
"el-pagination__jump"
)[0].childNodes[0].nodeValue = "跳至";
},
beforeDestroy() {
// 销毁清除轮循
clearInterval(this.time);
this.time = null;
},
destroyed() {
// sessionStorage.setItem("listIndex", "");
// this.dates = [];
// this.dataRequest = {
// page: 1,
// endTime: "",
// startTime: "",
// state: 1, // 单选绑定值
// };
// this.btnType = "";
// this.getCaseList();
},
filters: {
checkData(val) {
let _res = "";
switch (val) {
case 100101:
// console.log(121323123123);
_res = "暴露垃圾";
break;
case 100103:
_res = "便道桩";
break;
case 100102:
_res = "道路积水";
break;
case 100104:
_res = "护树设施";
break;
}
return _res;
},
checkData2(val) {
let _res = "";
switch (val) {
case 1:
// console.log(121323123123);
_res = "待处理";
break;
case 2:
_res = "已结案";
break;
case 3:
_res = "待复查";
break;
case 4:
_res = "未结案";
break;
}
return _res;
},
},
methods: {
// 标记当前查看案件行
selectedstyle({ row, rowIndex }) {
// console.log(1111, row, rowIndex);
if (
this.getPage == this.dataRequest.page &&
this.getType == this.dataRequest.state
) {
if (this.getIndex == rowIndex) {
// console.log(222, this.getIndex);
return {
background: "#1b53ee",
color: "#fff !important",
};
}
}
},
tableRowClassName({ row, rowIndex }) {
row.index = rowIndex;
},
// 点击调用上传接口
upload() {
// console.log(111, this.file);
// console.log(222, this.type);
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.uploadLoading = true;
this.$axios
.uploadPic(
this.ruleForm.type,
this.ruleForm.file,
this.ruleForm.phase
)
.then((res) => {
// console.log("上传结果", res);
if (res.status == 200) {
this.uploadLoading = false;
this.$message.success("上传成功!");
this.handleClose();
this.dataRequest.state = 1;
this.getCaseList();
} else {
this.$message.error("上传失败!");
this.uploadLoading = false;
}
});
} else {
return false;
}
});
},
// 上传文件钩子
uploads(file) {
const formData = new FormData();
formData.append("file", file.file);
// console.log(111, file);
this.ruleForm.file = formData;
// console.log(this.file);
},
// 获得选择日期时间焦点触发
// getFocus1() {
// this.iconlist1 = "calendarshow_icon";
// },
// getFocus2() {
// this.iconlist2 = "calendarshow_icon";
// },
// blur1() {
// this.iconlist1 = "calendar_icon";
// },
// blur2() {
// this.iconlist2 = "calendar_icon";
// },
// AI结案结果获取
getaiClose() {
if (
sessionStorage.getItem("click_ai_close") &&
sessionStorage.getItem("click_ai_close") == 1
) {
this.AIClose = false;
this.AIloading = true;
this.clearDisabled = true;
let that = this;
that.getAiResults();
this.time = setInterval(() => {
that.getAiResults();
that.getCaseList();
}, 2000);
}
},
// 点击通过时间查询
// checkList() {
// if (this.dataRequest) {
// this.dataRequest.endTime ? this.dates.endTime : "";
// this.dataRequest.page = 1;
// }
// this.getCaseList();
// },
// 点击AI结案
autoClosing() {
// console.log("进行AI结案");
if (this.count1 > 0) {
sessionStorage.setItem("click_ai_close", "1");
this.AIClose = false;
this.AIloading = true;
this.clearDisabled = true;
// 发送AI结案请求
this.$axios.aiClose().then((res) => {
// console.log("进AI结案", res);
if (res.data.code == 200) {
// this.$message({
// showClose: true,
// message: res.data.data,
// type: "success",
// });
// clearInterval(this.time);
// sessionStorage.setItem("click_ai_close", "");
// this.time = null;
// this.AIClose = true;
// this.AIloading = false;
// this.btnType = "";
} else {
this.$message({
showClose: true,
message: res.data.data,
type: "error",
});
}
this.getCaseList();
});
this.getaiClose();
} else {
return;
}
},
// 获取AI结案结果
getAiResults() {
this.$axios.getAiResults().then((res) => {
// console.log("AI结案结果", res);
if (res.data.code == 200) {
this.fruitFrom = res.data.data;
if (res.data.data.sum == res.data.data.execute) {
this.AIClose = true;
this.AIloading = false;
this.clearDisabled = false;
this.btnType = "";
sessionStorage.setItem("click_ai_close", "");
clearInterval(this.time);
this.time = null;
this.getCaseList();
this.$message.success("ai结案完成");
}
}
});
},
// 点击清空
resettingTime() {
this.$confirm("此操作将清空所有案件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.$axios
.emptyData()
.then((res) => {
// console.log(res);
if (res.data.code == 200) {
this.$message({
type: "success",
message: res.data.data,
});
sessionStorage.clear();
this.dates = [];
this.dataRequest = {
page: 1,
endTime: "",
startTime: "",
state: 1, // 单选绑定值
};
clearInterval(this.time);
this.time = null;
this.btnType = "";
this.AIClose = true;
this.getCaseList();
} else {
this.$message({
type: "error",
message: "清空失败",
});
}
})
.catch(() => {
this.$message({
type: "error",
message: "网络错误",
});
});
});
},
// 点击复查跳转详情页
goReexamine(val, index) {
let data = JSON.stringify(val);
sessionStorage.setItem("caseDetail", data); //加当前行的数据保存
sessionStorage.setItem("dataRequest", JSON.stringify(this.dataRequest)); //将当前请求表格数据的信息保存
sessionStorage.setItem(
"scoll",
this.$refs.tableList.bodyWrapper.scrollTop
); //将当前表格滚动位置保存
// console.log(data);
// console.log("当前索引", index);
sessionStorage.setItem("listIndex", index); //保存当前行的索引值
sessionStorage.setItem(
"total",
this.dataRequest.state == 1
? this.count1
: this.dataRequest.state == 2
? this.count2
: this.dataRequest.state == 3
? this.count3
: this.count4
); //保存当前状态的案件总数
this.$router.push({
path: `/dragger/caseManagement/detailsOfCase`,
// query: { id: 1, state: "待复查" },
});
},
// 切换标签触发事件
change(val) {
// console.log(val);
this.dataRequest.state = val;
this.dataRequest.page = 1;
sessionStorage.setItem("dataRequest", JSON.stringify(this.dataRequest)); //将当前请求表格数据的信息保存
this.$refs.tableList.bodyWrapper.scrollTop = 0;
this.getCaseList();
// console.log("object", this.caseForm);
if (val !== 4) {
this.caseForm.map((v) => {
delete v.result;
});
}
if (val !== 1) {
this.btnType =
"background: #E1E3E6; color: #B3B3B3;border:0;box-shadow: none";
this.disabled = true;
} else {
this.btnType = "";
this.disabled = false;
}
},
// 获取案件列表
getCaseList() {
this.loading = true;
this.$axios
.getCaseList(this.dataRequest, this.dataRequest.page)
.then((res) => {
// console.log(11111, res);
if (res.data.code == 200) {
this.loading = false;
this.caseForm = res.data.data.excelDataList;
this.count1 = res.data.data.count1;
this.count2 = res.data.data.count2;
this.count3 = res.data.data.count3;
this.count4 = res.data.data.count4;
this.$nextTick(() => {
this.selectedstyle({ row: undefined, rowIndex: this.getIndex });
});
sessionStorage.setItem("caseList", JSON.stringify(this.caseForm));
} else {
this.$message.error("获取数据失败！");
}
});
},
// 当前页变化
handleCurrentChange(val) {
this.dataRequest.page = val;
this.$refs.tableList.bodyWrapper.scrollTop = 0;
// this.getIndex = null;
this.getCaseList();
},
// 关闭上传文件弹窗
handleClose() {
this.$nextTick(() => {
this.$refs.ruleForm.resetFields();
this.addDeviceForm = {};
});
this.clearFiles();
this.dialogVisible = false;
},
// 清空文件列表
clearFiles() {
this.$refs.upload.clearFiles();
},
},
};
</script>
<style lang="less" scoped>
.sem-container {
height: 100%;
.upload-dialog{
.upload-demo {
margin-bottom: 16px;
}
.up-btn {
margin-left: 16px !important;
}
}
}
// 大容器
.box {
width: 100%;
height: 100%
// margin-top: 24px;
}
// 表格视图
.list-container {
width: 100%;
height: 100%;
// background: #ffffff;
// box-shadow: 0px 4px 16px 0px rgba(2, 12, 23, 0.07);
// padding: 20px;
// padding-top: 8px;
position: relative;
.el-tabs {
margin-top: 24px;
}
.table-container {
// margin-top: 11px;
margin-top: 30px;
// height: calc(100% -210px);
height: calc(100% - 254px);
position: relative;
margin-bottom: 26px;
// background-color: #000;
background-color: #000;
span {
font-size: 16px;
cursor: pointer;
}
.look {
color: #1b53ee;
}
}
// 表格视图顶部
.list-container-top {
// display: flex;
// justify-content: space-between;
// align-items: center;
// border: 1px solid red;
.AIjiean {
width: 100%;
// text-align: center;
display: flex;
justify-content: center;
.el-button {
width: 1300px !important;
height: 56px;
// border-radius: 4px;
font-size: 18px;
color: #1b53ee;
border: 2px solid #1b53ee;
background: #fff;
font-family: Medium;
}
.AIFruit {
width: 1300px;
height: 56px;
border-radius: 4px;
background: #E1E3E6;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
display: flex;
justify-content: center;
align-items: center;
color: #b3b3b3;
span {
margin-right: 16px;
}
div:nth-child(1) >span{
color: #FE9511;
}
div:nth-child(2) >span{
color: #1B53EE;
}
div:nth-child(3) >span{
color: #6E7173;
}
.el-icon-loading {
color: #1B53EE;
}
}
}
.search {
display: flex;
margin-top: 24px;
justify-content: space-between;
padding-left: 2px;
// 案件类型标签
.state-tab-box {
display: flex;
justify-content: space-between;
.el-radio {
padding: 16px 20px 16px 28px;
border: 0;
border-radius: 4px;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
margin-right: 18px;
background: #fff;
height: 48px;
span {
// display: inline-block;
padding: 4px 5px 4px 6px;
border-radius: 4px;
background: #F0F2F5;
color: #6E7173;
// font-size: 16px;
margin-left: 16px;
}
.deal-with {
background: #EB5B5B;
color: #fff;
}
}
.is-checked {
span {
background: rgba(246, 247, 249, 0.4);
color: #fff;
}
}
}
// 上传按钮
.upload-button {
height: 48px;
// width: 88px;
padding: 0 10px;
background: #fe9511;
color: #fff;
box-shadow: 0px 1px 2px 1px rgba(27, 83, 238, 0.16);
border-radius: 4px;
text-align: center;
line-height: 48px;
cursor: pointer;
transition: 0.5s;
margin-left: 20px;
&:hover{
background: #ffb152;
}
}
.checkTime {
display: flex;
align-items: center;
margin-right: 20px;
flex: 1;
justify-content: space-between;
// .checkDate {
// width: 178px;
// }
/deep/.el-input__inner {
height: 48px;
// font-size: 12px;
// width: 80%;
}
/deep/.el-input__inner::placeholder {
color: #b3b3b3;
font-size: 16px;
}
/deep/.el-input__inner:focus::placeholder {
color: #1B53EE;
}
.text {
font-size: 16px;
color: #6e7173;
// margin: 0 16px;
// flex: 1;
// white-space: nowrap;
}
}
// 右侧按钮
.list-container-top-btn {
// flex: 1;
display: flex;
// justify-content: space-between;
button {
width: 88px;
height: 48px;
border: none;
border-radius: 4px;
font-family: Regular;
font-size: 16px;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
}
.alarm {
margin-left: 20px;
color: #1b53ee;
background: #fff;
}
}
}
}
// 分页器
.pagination {
// width: 100%;
position: absolute;
// margin-top: 24px;
// bottom: 172px;
right: 0;
/deep/.el-input__inner:last-child {
height: 32px;
color: #1B53EE;
// margin: 0 8px 0 8px;
}
}
}
</style>
\ No newline at end of file
src/views/CaseManagement/detailsOfCase ccc.vue 0 → 100644
浏览文件 @ cfa883b9
<template>
<div class="detail-container" ref="detailContainer">
<div class="box">
<div class="zhuangtai">
<div class="zt-pic" v-show="detailData.state == 2">
<img src="../../assets/img/yja.png" alt="" />
</div>
<div class="zt-pic" v-show="detailData.state == 3">
<img src="../../assets/img/dfc.png" alt="" />
</div>
<div class="zt-pic" v-show="detailData.state == 1">
<img src="../../assets/img/dcl.png" alt="" />
</div>
<div class="zt-pic" v-show="detailData.state == 4">
<img src="../../assets/img/wja.png" alt="" />
</div>
</div>
<div class="container" v-loading="caseLoading">
<div class="pre" title="上一个" @click="preCase">
<el-button
type="primary"
icon="el-icon-caret-left"
:disabled="this.dataRequest.page == 1 && this.listIndex == 0"
:loading="caseLoading"
></el-button>
</div>
<div class="next" title="下一个" @click="nextCase">
<el-button
type="primary"
icon="el-icon-caret-right"
:disabled="
this.caseList.length == this.total % 10 &&
this.listIndex == this.caseList.length - 1
"
:loading="caseLoading"
></el-button>
</div>
<!-- 基本信息 -->
<div class="ess-info">
<!-- 标题 -->
<div class="left-title">
<span></span>
<div class="title">基本信息</div>
</div>
<!-- 详情 -->
<div class="infor">
<el-descriptions
:labelStyle="{
'margin-bottom': '12px',
'margin-right': '16px',
width: '60px',
color: '#B3B3B3',
}"
:contentStyle="{ color: '#B3B3B3' }"
:column="1"
>
<el-descriptions-item label="采集类型">
{{ detailData.type | checkData }}
</el-descriptions-item>
</el-descriptions>
<el-descriptions
:labelStyle="{
'margin-bottom': '12px',
'margin-right': '16px',
width: '60px',
color: '#B3B3B3',
}"
:contentStyle="{ color: '#B3B3B3' }"
class="margin-top"
:column="3"
>
<el-descriptions-item label="任务号">{{
detailData.id
}}</el-descriptions-item>
<el-descriptions-item label="上报时间">{{
detailData.reportTime
}}</el-descriptions-item>
<el-descriptions-item label="X坐标">{{
detailData.coordinate_x
}}</el-descriptions-item>
<el-descriptions-item label="采集员">{{
detailData.name
}}</el-descriptions-item>
<el-descriptions-item label="所属社区">{{
detailData.community
}}</el-descriptions-item>
<el-descriptions-item label="Y坐标">
{{ detailData.coordinate_y }}</el-descriptions-item
>
<el-descriptions-item label="问题描述">
{{ detailData.des }}</el-descriptions-item
>
</el-descriptions>
</div>
</div>
<!-- 结案信息 -->
<div class="detail">
<!-- 标题 -->
<div class="left-title">
<span></span>
<div class="title">结案信息</div>
</div>
<!-- 详情 -->
<div class="infor">
<el-descriptions
:labelStyle="{
'margin-bottom': '12px',
'margin-right': '16px',
width: '60px',
color: '#B3B3B3',
}"
:contentStyle="{ color: '#B3B3B3' }"
:column="3"
>
<el-descriptions-item label="结案条件">
{{
detailData.closeCondition ? detailData.closeCondition : "--"
}}
</el-descriptions-item>
<el-descriptions-item label="结案时间">
{{ detailData.closeTime ? detailData.closeTime : "--" }}
</el-descriptions-item>
<el-descriptions-item label=""> </el-descriptions-item>
<el-descriptions-item label="结案意见">
{{ detailData.closeOpinion ? detailData.closeOpinion : "--" }}
</el-descriptions-item>
</el-descriptions>
</div>
</div>
<!-- 相关照片 -->
<div class="number-code">
<!-- 标题 -->
<div class="left-title">
<span></span>
<div class="title">相关照片</div>
</div>
<!-- 详情 -->
<div class="infor">
<div class="pic-box">
<div class="pic-item">
<div class="font">上报</div>
<div
class="pic"
@click="dian"
v-if="pictureDataList.length !== 0"
>
<el-image
class="img"
ref="myImg"
:src="BaseUrl.default + bigSrc.picUrl"
>
</el-image>
</div>
<el-empty
description="暂无相关照片"
v-else
class="emptyState"
></el-empty>
</div>
<div class="pic-item">
<div class="font">处置核查</div>
<div class="pic" @click="dian" v-if="reportList.length !== 0">
<el-image class="img" :src="BaseUrl.default + bigSrc2.picUrl">
</el-image>
</div>
<el-empty
description="暂无相关照片"
v-else
class="emptyState"
></el-empty>
</div>
</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="down_button">
<el-button
class="notCase"
v-show="detailData.state == 3 || detailData.state == 4"
@click="notCase"
>不可结案</el-button
>
<el-button
type="primary"
v-show="detailData.state == 3 || detailData.state == 4"
@click="jiean(2)"
>可结案</el-button
>
<!-- <el-button
type="primary"
v-show="detailData.state == 1"
@click="jiean(2)"
>结案</el-button
> -->
<el-button
type="primary"
v-show="detailData.state == 2"
@click="jiean(3)"
>人工复查</el-button
>
<el-button type="info" @click="goBack">返回</el-button>
</div>
</div>
</div>
<!-- 大图预览弹窗 -->
<div class="previewPopup" v-show="aLargerPreview" :key="aLargerPreview">
<!-- 顶部条 -->
<div class="topBar">
<!-- 标题 -->
<div style="color: #fff; font-size: 18px">图片信息</div>
<!-- 关闭按钮 -->
<i
class="el-icon-circle-close close-icon"
style="font-size: 30px; color: #fff"
@click="closeMask"
></i>
</div>
<!-- 下方图片区域 -->
<div class="pic-container">
<!-- 上传的图片 -->
<!-- <picture-view
class="picture-view"
:srcList="pictureDataList"
:largePicture="bigSrc"
:text="'上报'"
></picture-view>
<picture-view
class="picture-view"
:srcList="reportList"
:largePicture="bigSrc2"
:text="'处置核查'"
></picture-view> -->
<!-- --- -->
<picture-preview
class="picture-view"
:srcList="pictureDataList"
:largePicture="bigSrc"
:text="'上报'"
></picture-preview>
<picture-preview
class="picture-view"
:srcList="reportList"
:largePicture="bigSrc2"
:text="'处置核查'"
></picture-preview>
</div>
</div>
</div>
</template>
<script>
import pictureView from "../../components/pictureView.vue";
import baseUrl from "../../../config";
import PicturePreview from "../../components/picturePreview.vue";
export default {
components: { pictureView, PicturePreview },
data() {
return {
isCheck: true,
state: 0, //案件状态
detailData: {}, //案件信息
pictureDataList: [], //整改图片信息
reportList: [], //上报图片列表
caseList: [], //当前页案件列表
listIndex: null, //保存当前案件所处的列表索引
dataRequest: {
page: null, // 当前页
endTime: "", //结束日期
startTime: "", //开始日期
state: null, // 单选绑定值
},
imgDom: null,
isFirst: false, //控制上一个案件按钮的禁用
caseLoading: false,
total: null, //所有案件的总数
aLargerPreview: false, //控制查看大图弹窗
bigSrc: "", //
bigSrc2: "",
};
},
created() {
this.detailData = JSON.parse(sessionStorage.getItem("caseDetail"));
this.dataRequest = JSON.parse(sessionStorage.getItem("dataRequest"));
this.state = sessionStorage.getItem("caseDetail").state;
this.showPicDetail();
this.caseList = JSON.parse(sessionStorage.getItem("caseList"));
// console.log(21122112, this.caseList);
this.listIndex = sessionStorage.getItem("listIndex");
// console.log("当前案件索引", this.listIndex);
this.total = sessionStorage.getItem("total");
// console.log(111, this.dataRequest.page);
},
mounted() {
// 监听键盘事件，上下案件切换
this.aaa();
},
methods: {
// 关闭图片预览弹窗
closeMask() {
this.aLargerPreview = false;
this.aaa();
},
// 键盘事件，控制上下案件切换
aaa() {
var that = this;
document.onkeydown = function (e) {
if (e.code === "ArrowLeft" || e.code === "ArrowUp") {
that.preCase();
} else if (e.code === "ArrowRight" || e.code === "ArrowDown") {
that.nextCase();
}
};
},
// 打开图片预览弹窗
dian() {
this.aLargerPreview = true;
document.onkeydown = function (e) {};
},
// 上一个案件
preCase() {
if (this.dataRequest.page == 1 && this.listIndex == 0) {
this.$message("已是第一个案件!");
return;
}
// console.log("查看上一个案件");
if (this.listIndex == 0 && this.dataRequest.page > 1) {
this.dataRequest.page -= 1;
this.caseLoading = true;
this.$axios
.getCaseList(this.dataRequest, this.dataRequest.page)
.then((res) => {
// console.log(11111, res);
if (res.data.code == 200) {
sessionStorage.setItem(
"dataRequest",
JSON.stringify(this.dataRequest)
); //将当前请求表格数据的信息保存
this.caseList = res.data.data.excelDataList;
this.listIndex = 9;
this.detailData = this.caseList[this.listIndex];
this.showPicDetail();
sessionStorage.setItem("listIndex", this.listIndex);
sessionStorage.setItem(
"caseDetail",
JSON.stringify(this.detailData)
);
this.caseLoading = false;
} else {
this.$message.error("获取数据失败！");
}
});
} else {
this.listIndex--;
this.detailData = this.caseList[this.listIndex];
this.showPicDetail();
sessionStorage.setItem("listIndex", this.listIndex);
sessionStorage.setItem("caseDetail", JSON.stringify(this.detailData));
}
},
// 下一个案件
nextCase() {
// console.log("查看下一个案件");
// 如果是该页最后一个，加载下一页数据
if (
this.caseList.length == this.total % 10 &&
this.listIndex == this.caseList.length - 1
) {
this.$message("已是最后一个案件!");
return;
}
if (this.listIndex == this.caseList.length - 1) {
this.caseLoading = true;
// 页数加1
this.dataRequest.page += 1;
// console.log(this.dataRequest.page);
// 获取案件列表数据
this.$axios
.getCaseList(this.dataRequest, this.dataRequest.page)
.then((res) => {
if (res.data.code == 200) {
this.caseLoading = false;
sessionStorage.setItem(
"dataRequest",
JSON.stringify(this.dataRequest)
); //将当前请求表格数据的信息保存
this.caseList = res.data.data.excelDataList;
this.listIndex = 0; //索引值改为0
this.detailData = this.caseList[this.listIndex];
this.showPicDetail();
sessionStorage.setItem("listIndex", this.listIndex);
sessionStorage.setItem(
"caseDetail",
JSON.stringify(this.detailData)
);
} else {
this.$message.error("获取数据失败！");
}
})
.catch(() => {
this.$message("已是最后一个案件!");
return;
});
} else {
this.listIndex++; //索引值加1
// console.log(this.caseList[this.listIndex]);
this.detailData = this.caseList[this.listIndex];
// console.log(123, this.detailData);
this.showPicDetail();
sessionStorage.setItem("listIndex", this.listIndex);
sessionStorage.setItem("caseDetail", JSON.stringify(this.detailData));
}
},
// 所有图片的列表
showPicDetail() {
this.pictureDataList = [];
this.reportList = [];
// this.detailData.beforePictureDataList.forEach((item) => {
// this.pictureDataList.push(baseUrl.default + item.picUrl);
// });
// this.detailData.pictureDataList.forEach((item) => {
// this.reportList.push(baseUrl.default + item.picUrl);
// });
// this.bigSrc = this.pictureDataList[0];
// this.bigSrc2 = this.reportList[0];
this.pictureDataList = this.detailData.beforePictureDataList;
this.reportList = this.detailData.pictureDataList;
this.bigSrc = this.pictureDataList[0];
this.bigSrc2 = this.reportList[0];
},
// 点击不可结案
notCase() {
this.$axios.noCase(this.detailData.id).then((res) => {
// console.log("------", res);
if (res.data.code == 200) {
this.$message({
showClose: true,
message: "操作完成",
type: "success",
});
sessionStorage.setItem("caseDetail", "");
sessionStorage.setItem("dataRequest", "");
this.$router.push("/dragger/CaseManagement");
}
});
},
// 点击返回
goBack() {
this.$router.go(-1);
},
// 获取当前时间
getTime() {
let year = new Date().getFullYear();
let mouth =
new Date().getMonth() < 10
? "0" + (new Date().getMonth() + 1)
: new Date().getMonth() + 1;
let date = new Date().getDate();
let hh = new Date().getHours();
let mf =
new Date().getMinutes() < 10
? "0" + new Date().getMinutes()
: new Date().getMinutes();
let ss =
new Date().getSeconds() < 10
? "0" + new Date().getSeconds()
: new Date().getSeconds();
this.detailData.closeTime =
year + "-" + mouth + "-" + date + " " + hh + ":" + mf + ":" + ss;
},
// 获取详细信息
jiean(val) {
this.getTime();
let data = JSON.parse(JSON.stringify(this.detailData));
data.state = val;
this.detailData.closeOpinion = "经人工判别，问题已经处理完毕，同意结案。";
// return;
this.$axios
.closeCase(data)
.then((res) => {
// console.log(111, res);
if (res.data.code == 200) {
if (val === 3) {
this.$message({
showClose: true,
message: "操作完成",
type: "success",
});
} else {
this.$message({
showClose: true,
message: "操作完成",
type: "success",
});
}
this.$router.go(-1);
} else {
// this.$message.error("结案失败");
this.$message({
showClose: true,
message: res.data.data,
type: "error",
});
}
})
.catch((err) => {
this.$message({
showClose: true,
message: "结案失败",
type: "error",
});
});
},
},
// 过滤器
filters: {
checkData(val) {
let _res = "";
switch (val) {
case 100101:
// console.log(121323123123);
_res = "暴露垃圾";
break;
case 100103:
_res = "便道桩";
break;
case 100102:
_res = "道路积水";
break;
case 100104:
_res = "护树设施";
break;
}
return _res;
},
checkData2(val) {
let _res = "";
switch (val) {
case 1:
// console.log(121323123123);
_res = "待处理";
break;
case 2:
_res = "已结案";
break;
case 3:
_res = "待复查";
break;
}
return _res;
},
},
};
</script>
<style lang="less" scoped>
.previewPopup {
width: 100%;
height: 100%;
position: absolute;
top: 0;
// right: 0;
// bottom: 0;
left: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.8);
// display: flex;
.topBar {
width: 100%;
height: 44px;
background: #1b53ee;
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
.close-icon {
cursor: pointer;
z-index: 100;
}
}
.pic-container {
width: 100%;
height: calc(100% - 44px);
// background: red;
display: flex;
}
}
.detail-container {
height: 100%;
width: 100%;
// position: relative;
// border: 1px solid red;
.pre {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-40px);
// z-index: 10;
cursor: pointer;
}
.next {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-40px);
cursor: pointer;
}
// 大容器
.box {
width: 100%;
height: 100%;
position: relative;
// 状态
.zhuangtai {
position: absolute;
right: 0;
top: 0;
.zt-pic {
img {
width: 176px;
height: 176px;
}
}
}
// 视图
.container {
// border: 1px solid red;
width: 100%;
height: 100%;
background: #ffffff;
box-shadow: 0px 4px 16px 0px rgba(2, 12, 23, 0.07);
padding: 26px 48px 0px 48px;
border-radius: 8px;
// display: flex;
// flex-direction: column;
// justify-content: space-around;
// position: relative;
// overflow: hidden;
// 基本信息
// 左侧标题
/deep/.el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
padding-bottom: 0.5rem;
}
.left-title {
// margin-top: 23px;
display: flex;
align-items: center;
margin-bottom: 20px;
span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3865f2;
margin-right: 8px;
}
.title {
display: inline-block;
color: #070f18;
font-size: 18px;
font-family: SourceHanSansCN-Regular;
font-weight: Regular;
margin-right: 8px;
}
}
// 详情
.infor {
margin-left: 18px;
.el-descriptions-item {
color: #b3b3b3;
}
}
// 相关照片
.number-code {
.infor {
display: flex;
justify-content: start;
// height: 100%;
align-items: flex-end;
// height: calc(100% - 481px);
// width: 100%;
// text-align: center;
.pic-box {
display: flex;
justify-content: left;
overflow: auto;
.pic-item {
text-align: center;
width: 182px;
// height: 200px;
// text-align: center;
margin-right: 70px;
.pic {
width: 100%;
height: 200px;
// background-color: #ccc;
.img {
width: 182px;
height: 182px;
}
}
.font {
font-size: 16px;
margin-bottom: 12px;
color: #b3b3b3;
cursor: default;
}
}
}
}
}
// 底部按钮
.down_button {
// width: calc(100% - 48px);
display: flex;
justify-content: center;
// height: calc(100% - 670px);
// align-items: end;
position: absolute;
bottom: 10px;
left: 35%;
// background: #ccc;
.el-button {
font-size: 16px !important;
letter-spacing: 1px;
height: 48px !important;
width: 164px !important;
font-family: Source Han Sans CN-Regular;
}
.el-button--primary {
border: none !important;
color: #fff !important;
background: #2f54eb !important;
box-shadow: 0px 2px 6px 0px rgba(47, 84, 235, 0.2);
margin: 0 48px !important;
}
.el-button--info {
background: #e6e6e6;
color: #070f18 !important;
border: 0;
}
.notCase {
background: #fe9511;
color: #fff;
box-shadow: 0px 1px 2px 1px rgba(27, 83, 238, 0.16);
}
}
}
}
}
</style>
src/views/CaseManagement/detailsOfCase.vue 0 → 100644
浏览文件 @ cfa883b9
<template>
<div class="detail-container" ref="detailContainer">
<div class="box">
<div class="zhuangtai">
<div class="zt-pic" v-show="detailData.state == 2">
<img src="../../assets/img/yja.png" alt="" />
</div>
<div class="zt-pic" v-show="detailData.state == 3">
<img src="../../assets/img/dfc.png" alt="" />
</div>
<div class="zt-pic" v-show="detailData.state == 1">
<img src="../../assets/img/dcl.png" alt="" />
</div>
<div class="zt-pic" v-show="detailData.state == 4">
<img src="../../assets/img/wja.png" alt="" />
</div>
</div>
<div class="container" v-loading="caseLoading">
<div class="pre" title="上一个" @click="preCase">
<el-button
type="primary"
icon="el-icon-caret-left"
:disabled="this.dataRequest.page == 1 && this.listIndex == 0"
:loading="caseLoading"
></el-button>
</div>
<div class="next" title="下一个" @click="nextCase">
<el-button
type="primary"
icon="el-icon-caret-right"
:disabled="
this.caseList.length == this.total % 10 &&
this.listIndex == this.caseList.length - 1
"
:loading="caseLoading"
></el-button>
</div>
<!-- 基本信息 -->
<div class="ess-info">
<!-- 标题 -->
<div class="left-title">
<span></span>
<div class="title">基本信息</div>
</div>
<!-- 详情 -->
<div class="infor">
<el-descriptions
:labelStyle="{
'margin-bottom': '12px',
'margin-right': '16px',
width: '60px',
color: '#B3B3B3',
}"
:contentStyle="{ color: '#B3B3B3' }"
:column="1"
>
<el-descriptions-item label="采集类型">
{{ detailData.type | checkData }}
</el-descriptions-item>
</el-descriptions>
<el-descriptions
:labelStyle="{
'margin-bottom': '12px',
'margin-right': '16px',
width: '60px',
color: '#B3B3B3',
}"
:contentStyle="{ color: '#B3B3B3' }"
class="margin-top"
:column="3"
>
<el-descriptions-item label="任务号">{{
detailData.id
}}</el-descriptions-item>
<el-descriptions-item label="上报时间">{{
detailData.reportTime
}}</el-descriptions-item>
<el-descriptions-item label="X坐标">{{
detailData.coordinate_x
}}</el-descriptions-item>
<el-descriptions-item label="采集员">{{
detailData.name
}}</el-descriptions-item>
<el-descriptions-item label="所属社区">{{
detailData.community
}}</el-descriptions-item>
<el-descriptions-item label="Y坐标">
{{ detailData.coordinate_y }}</el-descriptions-item
>
<el-descriptions-item label="问题描述">
{{ detailData.des }}</el-descriptions-item
>
</el-descriptions>
</div>
</div>
<!-- 结案信息 -->
<div class="detail">
<!-- 标题 -->
<div class="left-title">
<span></span>
<div class="title">结案信息</div>
</div>
<!-- 详情 -->
<div class="infor">
<el-descriptions
:labelStyle="{
'margin-bottom': '12px',
'margin-right': '16px',
width: '60px',
color: '#B3B3B3',
}"
:contentStyle="{ color: '#B3B3B3' }"
:column="3"
>
<el-descriptions-item label="结案条件">
{{
detailData.closeCondition ? detailData.closeCondition : "--"
}}
</el-descriptions-item>
<el-descriptions-item label="结案时间">
{{ detailData.closeTime ? detailData.closeTime : "--" }}
</el-descriptions-item>
<el-descriptions-item label=""> </el-descriptions-item>
<el-descriptions-item label="结案意见">
{{ detailData.closeOpinion ? detailData.closeOpinion : "--" }}
</el-descriptions-item>
</el-descriptions>
</div>
</div>
<!-- 相关照片 -->
<div class="number-code">
<!-- 标题 -->
<div class="left-title">
<span></span>
<div class="title">相关照片</div>
</div>
<div class="bottom-pic">
<!-- 详情 -->
<div class="infor">
<div class="font">上报</div>
<div class="pic-box" v-if="pictureDataList.length !== 0">
<div
class="pic-item"
v-for="(item, index) in pictureDataList"
:key="index"
>
<!-- <div
class="font"
:title="item.conf ? '可信度 ' + ':' + item.conf : ''"
>
{{ item.des }}
</div> -->
<div class="pic" @click="dian">
<el-image
class="img"
ref="myImg"
:src="BaseUrl.default + item.picUrl"
:preview-src-list="srcList"
>
</el-image>
</div>
</div>
<!-- <div class="pic-item">
<div class="font">整改后</div>
<div class="pic">
<el-image
class="img"
:src="BaseUrl.default + detailData.afterRectification"
:preview-src-list="srcList"
>
</el-image>
</div>
</div> -->
</div>
<el-empty
description="暂无相关照片"
v-else
class="emptyState"
></el-empty>
</div>
<div class="infor">
<div class="font">处置核查</div>
<div class="pic-box" v-if="picList.length !== 0">
<div
class="pic-item"
v-for="(item, index) in picList"
:key="index"
>
<!-- <div
class="font"
:title="item.conf ? '可信度 ' + ':' + item.conf : ''"
>
{{ item.des }}
</div> -->
<div class="pic" @click="dian">
<el-image
class="img"
ref="myImg"
:src="BaseUrl.default + item.picUrl"
:preview-src-list="srcList2"
>
</el-image>
</div>
</div>
<!-- <div class="pic-item">
<div class="font">整改后</div>
<div class="pic">
<el-image
class="img"
:src="BaseUrl.default + detailData.afterRectification"
:preview-src-list="srcList"
>
</el-image>
</div>
</div> -->
</div>
<el-empty
description="暂无相关照片"
v-else
class="emptyState"
></el-empty>
</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="down_button">
<el-button
class="notCase"
v-show="detailData.state == 3 || detailData.state == 4"
@click="notCase"
>不可结案</el-button
>
<el-button
type="primary"
v-show="detailData.state == 3 || detailData.state == 4"
@click="jiean(2)"
>可结案</el-button
>
<!-- <el-button
type="primary"
v-show="detailData.state == 1"
@click="jiean(2)"
>结案</el-button
> -->
<el-button
type="primary"
v-show="detailData.state == 2"
@click="jiean(3)"
>人工复查</el-button
>
<el-button type="info" @click="goBack">返回</el-button>
</div>
</div>
</div>
<!-- 大图预览弹窗 -->
<!-- <div class="aLargerPreview" v-show="aLargerPreview"> -->
<!-- 遮罩层 -->
<!-- <div class="zhezhao" @click="closeMask"></div> -->
<!-- 图片左 -->
<!-- <div class="pic-Big"> -->
<!-- 上方小图 -->
<!-- <div class="above_picture">
<div class="left-arrow">
<i class="el-icon-caret-left" style="font-size: 40px"></i>
</div>
<div class="pic-item-box">
<div class="pic-item"></div>
<div class="pic-item"></div>
<div class="pic-item"></div>
<div class="pic-item"></div>
<div class="pic-item"></div>
<div class="pic-item"></div>
<div class="pic-item"></div>
</div>
<div class="right-arrow">
<i class="el-icon-caret-right" style="font-size: 40px"></i>
</div>
</div> -->
<!-- 下方大图 -->
<!-- <div class="big_picture"></div>
</div> -->
<!-- 图片右 -->
<!-- <div class="pic-Big pic-Right"></div> -->
<!-- </div> -->
</div>
</template>
<script>
export default {
data() {
return {
state: 0, //案件状态
detailData: {}, //案件信息
srcList: [], //预览列表
srcList2: [], //预览2
pictureDataList: [], //上报图片信息
picList: [], //处置核查图片
caseList: [], //当前页案件列表
listIndex: null, //保存当前案件所处的列表索引
dataRequest: {
page: null, // 当前页
endTime: "", //结束日期
startTime: "", //开始日期
state: null, // 单选绑定值
},
imgDom: null,
isFirst: false, //控制上一个案件按钮的禁用
caseLoading: false,
total: null, //所有案件的总数
aLargerPreview: false,
};
},
created() {
sessionStorage.getItem("caseDetail");
this.detailData = JSON.parse(sessionStorage.getItem("caseDetail"));
this.dataRequest = JSON.parse(sessionStorage.getItem("dataRequest"));
this.state = sessionStorage.getItem("caseDetail").state;
this.showPicDetail();
this.caseList = JSON.parse(sessionStorage.getItem("caseList"));
// console.log(21122112, this.caseList);
this.listIndex = sessionStorage.getItem("listIndex");
// console.log("当前案件索引", this.listIndex);
this.total = sessionStorage.getItem("total");
// console.log(111, this.dataRequest.page);
console.log(111111, this.detailData);
},
watch: {
// imgDom: {
// handler(newV, oldV) {
// console.log(oldV);
// },
// deep: true,
// },
},
mounted() {
// 监听键盘事件，上下案件切换
this.aaa();
// this.$refs.detailContainer.onkeydown = function (e) {
// // console.log(11111, e);
// if (e.code === "ArrowLeft" || e.code === "ArrowUp") {
// that.preCase();
// } else if (e.code === "ArrowRight" || e.code === "ArrowDown") {
// that.nextCase();
// }
// };
},
methods: {
close() {
console.log("1232");
},
closeMask() {
this.aLargerPreview = false;
},
aaa() {
var that = this;
document.onkeydown = function (e) {
// console.log(11111, e);
if (e.code === "ArrowLeft" || e.code === "ArrowUp") {
that.preCase();
} else if (e.code === "ArrowRight" || e.code === "ArrowDown") {
that.nextCase();
}
};
},
dian() {
this.aLargerPreview = true;
document.onkeydown = function (e) {};
console.log(111, this.$refs.myImg);
var that = this;
document
.querySelectorAll(".el-image-viewer__wrapper")[0]
.addEventListener("click", (e) => {
// console.log(123456789, e.path[0].className);
if (
e.path[0].className == "el-image-viewer__mask" ||
e.path[0].className == "el-icon-close" ||
e.path[0].className == "el-image-viewer__btn el-image-viewer__close"
) {
that.aaa();
}
});
},
// 上一个案件
preCase() {
this.caseLoading = true;
if (this.dataRequest.page == 1 && this.listIndex == 0) {
this.$message("已是第一个案件!");
this.caseLoading = false;
return;
}
this.srcList = [];
this.srcList2 = [];
// console.log("查看上一个案件");
if (this.listIndex == 0 && this.dataRequest.page > 1) {
this.dataRequest.page -= 1;
this.$axios
.getCaseList(this.dataRequest, this.dataRequest.page)
.then((res) => {
// console.log(11111, res);
if (res.data.code == 200) {
sessionStorage.setItem(
"dataRequest",
JSON.stringify(this.dataRequest)
); //将当前请求表格数据的信息保存
this.caseList = res.data.data.excelDataList;
this.listIndex = 9;
this.detailData = this.caseList[this.listIndex];
this.showPicDetail();
sessionStorage.setItem("listIndex", this.listIndex);
} else {
this.$message.error("获取数据失败！");
}
});
} else {
this.listIndex--;
// console.log(this.caseList[this.listIndex]);
this.detailData = this.caseList[this.listIndex];
this.showPicDetail();
sessionStorage.setItem("listIndex", this.listIndex);
}
this.caseLoading = false;
},
// 下一个案件
nextCase() {
this.caseLoading = true;
// console.log("查看下一个案件");
// 如果是该页最后一个，加载下一页数据
if (
this.caseList.length == this.total % 10 &&
this.listIndex == this.caseList.length - 1
) {
this.$message("已是最后一个案件!");
this.caseLoading = false;
return;
}
this.srcList = [];
this.srcList2 = [];
if (this.listIndex == this.caseList.length - 1) {
// 页数加1
this.dataRequest.page += 1;
// console.log(this.dataRequest.page);
// 获取案件列表数据
this.$axios
.getCaseList(this.dataRequest, this.dataRequest.page)
.then((res) => {
// console.log(123, res);
// console.log(11111, res);
if (res.data.code == 200) {
sessionStorage.setItem(
"dataRequest",
JSON.stringify(this.dataRequest)
); //将当前请求表格数据的信息保存
this.caseList = res.data.data.excelDataList;
this.listIndex = 0; //索引值改为0
this.detailData = this.caseList[this.listIndex];
this.showPicDetail();
sessionStorage.setItem("listIndex", this.listIndex);
} else {
this.$message.error("获取数据失败！");
}
})
.catch(() => {
this.$message("已是最后一个案件!");
return;
});
} else {
this.listIndex++; //索引值加1
// console.log(this.caseList[this.listIndex]);
this.detailData = this.caseList[this.listIndex];
this.showPicDetail();
sessionStorage.setItem("listIndex", this.listIndex);
}
this.caseLoading = false;
},
// 所有图片的列表
showPicDetail() {
this.picList = JSON.parse(
JSON.stringify(this.detailData.pictureDataList)
);
this.pictureDataList = this.detailData.beforePictureDataList;
// this.pictureDataList = this.detailData.pictureDataList
// console.log(22222, this.pictureDataList);
// 遍历加入放大浏览中
this.pictureDataList.forEach((item) => {
// console.log(999, item.picUrl);
this.srcList.push(this.BaseUrl.default + item.picUrl);
});
this.picList.forEach((item) => {
// console.log(999, item.picUrl);
this.srcList2.push(this.BaseUrl.default + item.picUrl);
});
},
// 点击不可结案
notCase() {
this.$axios.noCase(this.detailData.id).then((res) => {
// console.log("------", res);
if (res.data.code == 200) {
this.$message({
showClose: true,
message: "操作完成",
type: "success",
});
sessionStorage.setItem("caseDetail", "");
sessionStorage.setItem("dataRequest", "");
this.$router.push("/dragger/CaseManagement");
}
});
},
// 点击返回
goBack() {
this.$router.go(-1);
},
// 获取当前时间
getTime() {
let year = new Date().getFullYear();
let mouth =
new Date().getMonth() < 10
? "0" + (new Date().getMonth() + 1)
: new Date().getMonth() + 1;
let date = new Date().getDate();
let hh = new Date().getHours();
let mf =
new Date().getMinutes() < 10
? "0" + new Date().getMinutes()
: new Date().getMinutes();
let ss =
new Date().getSeconds() < 10
? "0" + new Date().getSeconds()
: new Date().getSeconds();
this.detailData.closeTime =
year + "-" + mouth + "-" + date + " " + hh + ":" + mf + ":" + ss;
},
// 获取详细信息
jiean(val) {
this.getTime();
let data = JSON.parse(JSON.stringify(this.detailData));
data.state = val;
this.detailData.closeOpinion = "经人工判别，问题已经处理完毕，同意结案。";
// return;
this.$axios
.closeCase(data)
.then((res) => {
// console.log(111, res);
if (res.data.code == 200) {
if (val === 3) {
this.$message({
showClose: true,
message: "操作完成",
type: "success",
});
} else {
this.$message({
showClose: true,
message: "操作完成",
type: "success",
});
}
this.$router.go(-1);
} else {
// this.$message.error("结案失败");
this.$message({
showClose: true,
message: res.data.data,
type: "error",
});
}
})
.catch((err) => {
this.$message({
showClose: true,
message: "结案失败",
type: "error",
});
});
},
},
// 过滤器
filters: {
checkData(val) {
let _res = "";
switch (val) {
case 100101:
// console.log(121323123123);
_res = "暴露垃圾";
break;
case 100103:
_res = "便道桩";
break;
case 100102:
_res = "道路积水";
break;
case 100104:
_res = "护树设施";
break;
}
return _res;
},
checkData2(val) {
let _res = "";
switch (val) {
case 1:
// console.log(121323123123);
_res = "待处理";
break;
case 2:
_res = "已结案";
break;
case 3:
_res = "待复查";
break;
}
return _res;
},
},
};
</script>
<style lang="less" scoped>
// .aLargerPreview {
// width: 100%;
// height: 100%;
// position: fixed;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// overflow: auto;
// z-index: 10;
// .zhezhao {
// width: 100%;
// height: 100%;
// // border: 1px solid red;
// background: rgba(0, 0, 0, 0.372);
// }
// .pic-Big {
// width: 50%;
// height: 100%;
// // background: red;
// border: 1px solid red;
// position: fixed;
// top: 0;
// }
// .pic-Right {
// // background: #000;
// border: 1px solid black;
// right: 0;
// }
// .above_picture {
// width: 100%;
// height: 182px;
// // background: #000;
// border: 1px solid black;
// display: flex;
// align-items: center;
// justify-content: space-between;
// .pic-item-box {
// // flex: 1;
// // width: 100%;
// border: 1px solid red;
// height: 100%;
// display: flex;
// overflow: hidden;
// .pic-item {
// height: 100%;
// width: 182px;
// background: #000;
// margin-right: 20px;
// }
// }
// }
// .big_picture {
// height: calc(100% - 200px);
// width: 100%;
// border: 1px solid red;
// position: absolute;
// bottom: 0;
// }
// }
.detail-container {
height: 100%;
width: 100%;
// position: relative;
// border: 1px solid red;
.pre {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-40px);
// z-index: 10;
cursor: pointer;
}
.next {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-40px);
cursor: pointer;
}
// 大容器
.box {
width: 100%;
height: 100%;
position: relative;
// 状态
.zhuangtai {
position: absolute;
right: 0;
top: 0;
.zt-pic {
img {
width: 176px;
height: 176px;
}
}
}
// 视图
.container {
// border: 1px solid red;
width: 100%;
height: 100%;
background: #ffffff;
box-shadow: 0px 4px 16px 0px rgba(2, 12, 23, 0.07);
padding: 26px 48px 0px 48px;
border-radius: 8px;
// display: flex;
// flex-direction: column;
// justify-content: space-around;
// position: relative;
// overflow: hidden;
// 基本信息
// 左侧标题
/deep/.el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
padding-bottom: 0.5rem;
}
.left-title {
// margin-top: 23px;
display: flex;
align-items: center;
margin-bottom: 20px;
span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3865f2;
margin-right: 8px;
}
.title {
display: inline-block;
color: #070f18;
font-size: 18px;
font-family: SourceHanSansCN-Regular;
font-weight: Regular;
margin-right: 8px;
}
}
// 详情
.infor {
margin-left: 18px;
.el-descriptions-item {
color: #b3b3b3;
}
}
// 相关照片
.number-code {
.bottom-pic {
display: flex;
}
.infor {
display: flex;
justify-content: start;
// height: 100%;
align-items: center;
width: 50%;
// height: calc(100% - 481px);
// width: 100%;
// text-align: center;
.font {
font-size: 16px;
margin-bottom: 12px;
color: #b3b3b3;
cursor: default;
margin-right: 10px;
white-space: nowrap;
}
.pic-box {
display: flex;
justify-content: left;
overflow: auto;
.pic-item {
text-align: center;
width: 182px;
// height: 200px;
// text-align: center;
margin-right: 70px;
.pic {
width: 100%;
height: 200px;
// background-color: #ccc;
.img {
width: 182px;
height: 182px;
}
}
}
}
}
}
// 底部按钮
.down_button {
// width: calc(100% - 48px);
display: flex;
justify-content: center;
// height: calc(100% - 670px);
// align-items: end;
position: absolute;
bottom: 10px;
left: 35%;
// background: #ccc;
.el-button {
font-size: 16px !important;
letter-spacing: 1px;
height: 48px !important;
width: 164px !important;
font-family: Source Han Sans CN-Regular;
}
.el-button--primary {
border: none !important;
color: #fff !important;
background: #2f54eb !important;
box-shadow: 0px 2px 6px 0px rgba(47, 84, 235, 0.2);
margin: 0 48px !important;
}
.el-button--info {
background: #e6e6e6;
color: #070f18 !important;
border: 0;
}
.notCase {
background: #fe9511;
color: #fff;
box-shadow: 0px 1px 2px 1px rgba(27, 83, 238, 0.16);
}
}
}
}
}
</style>
src/views/index.vue 0 → 100644
浏览文件 @ cfa883b9
<!--
* @Description:
* @Version: 2.0
* @Autor: lwq
* @Date: 2022-03-11 10:35:57
-->
<template>
<div class="backstage">
<headerCom />
<div class="content">
<leftSilder />
<div class="right_main">
<breadCrumb :routeMsg="routeMsg" />
<div class="right_content">
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
import breadCrumb from "../components/breadCrumb.vue";
import headerCom from "../components/headerCom.vue";
import leftSilder from "../components/silder.vue";
export default {
name: "backstage",
data() {
return {
routeMsg: {},
userMange: null,
};
},
components: {
breadCrumb,
headerCom,
leftSilder,
},
};
</script>
<style lang="less" scoped>
.backstage {
width: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
background-color: #f7f9fe;
.header {
box-sizing: border-box;
// background-image: url("../assets/img/header.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// padding: 15px 26px 15px 20px;
padding: 0 26px 0 46px;
height: 70px;
width: 100%;
background-color: #1b53ee;
display: flex;
justify-content: space-between;
.title {
font-size: 36px;
line-height: 36px;
font-family: YouSheBiaoTiHei;
color: #ffffff;
// color: #b3c0d1d;
}
.header_right {
width: 570px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.router_title {
width: 118px;
height: 36px;
display: flex;
align-items: center;
font-size: 18px;
line-height: 18px;
cursor: pointer;
font-family: SourceHanSansCN-Regular;
justify-content: space-between;
color: rgba(229, 241, 255, 0.65);
position: relative;
box-sizing: border-box;
padding-left: 8px;
text-align: center;
// left: -20px;
.Bar {
width: 2px;
height: 16px;
background-color: rgba(246, 250, 255, 0.16);
position: absolute;
right: -15px;
top: 10px;
}
}
.t_router_active {
color: #ffffff;
background-color: rgba(229, 241, 255, 0.16);
}
.header_icon {
width: 124px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
:first-child {
display: flex;
color: #ffffff;
justify-content: center;
align-items: center;
flex-direction: row;
}
img {
// border-radius: 50%;
width: 48px;
margin-right: 8px;
}
}
}
}
.content {
width: 100%;
height: calc(100% - 66px);
display: flex;
justify-content: space-between;
.left_nav {
width: 272px;
height: 100%;
background-color: #ffffff;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
z-index: 10;
.router_nav {
cursor: pointer;
user-select: none;
box-sizing: border-box;
// padding-left: 45px;
color: #070f18;
text-align: center;
cursor: pointer;
font-family: SourceHanSansCN-Regular;
height: 50px;
// text-align: left;
line-height: 50px;
}
.router_active {
height: 50px;
background-image: linear-gradient(to right, #2e56ed);
background: rgba(56, 83, 226, 0.65);
// background-image: url("../assets/img/left_jian.png");
// background-repeat: no-repeat;
font-weight: 500;
background-position: 90%;
color: #1b53ee;
}
}
.right_main {
width: calc(100% - 272px);
background-color: #f4f5f7;
.right_content {
height: calc(100% - 101px);
padding: 0 40px 40px 40px;
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论