Commit 7f0cdc6a authored by leidahong's avatar leidahong

新增事件、事件详情、搜索

parent ddbc4ea3
This source diff could not be displayed because it is too large. You can view the blob instead.
<template>
<div id="app">
<keep-alive :include="include">
<router-view/>
<router-view />
</keep-alive>
</div>
</template>
......@@ -9,10 +9,11 @@
export default {
computed: {
include() {
return ['Home', 'Search']
}
}
}
return ["Home", "Search"];
},
},
};
</script>
<style lang="scss">
@import "./assets/icon/iconfont.css";
</style>
import request from '../utils/request'
import request from "../utils/request";
// 获取验证码
export function getCodeImg() {
return request({
url: '/code',
headers: {
isToken: false
},
method: 'get'
})
url: "/code",
headers: {
isToken: false,
},
method: "get",
});
}
// 登录
export function login(data) {
return request({
url: '/auth/login',
method: 'post',
data
})
url: "/auth/login",
method: "post",
data,
});
}
// 获取用户信息
export function getUserInfo() {
return request({
url: '/system/user/getInfo',
method: 'get'
})
url: "/system/user/getInfo",
method: "get",
});
}
//新增事件
export function addEvent(data) {
return request({
url: "/wcwy/eventInfo/add",
method: "post",
data,
});
}
// 获取处理列表
export function getEventList(params) {
return request({
url: 'wcwy/api/event',
params
})
url: "wcwy/api/event",
params,
});
}
// 获取处理详情
export function getEventDetail(id) {
return request({
url: '/wcwy/eventInfo/' + id
})
url: "/wcwy/eventInfo/" + id,
});
}
// 获取处理后详情
export function getEventInfo(id) {
return request({
url: '/wcwy/eventInfo/get/' + id
})
url: "/wcwy/eventInfo/get/" + id,
});
}
// 获取消息列表
export function getMessageList(params) {
return request({
url: '/wcwy/api/eventMessage',
params
})
url: "/wcwy/api/eventMessage",
params,
});
}
// 获取消息详情
export function getMessageDetail(id) {
return request({
url: '/wcwy/api/eventMessage/getInfo/' + id
})
url: "/wcwy/api/eventMessage/getInfo/" + id,
});
}
// 上传图片
export function uploadImg(data) {
return request({
url: '/file/upload',
method: 'post',
url: "/file/upload",
method: "post",
data,
})
});
}
// 获取未读消息数量
export function getMessageCount() {
return request({
url: '/wcwy/api/eventMessage/getUnreadCnt'
})
url: "/wcwy/api/eventMessage/getUnreadCnt",
});
}
// 处理事件
export function handleEvent(data) {
return request({
url: '/wcwy/api/event/process',
method: 'post',
url: "/wcwy/api/event/process",
method: "post",
data,
})
});
}
// 获取事件类型统计
export function getTypeChartData() {
return request({
url: '/wcwy/api/event/getEventCategoryStatics'
})
url: "/wcwy/api/event/getEventCategoryStatics",
});
}
// 获取事件处理量统计
export function getCountChartData() {
return request({
url: '/wcwy/api/event/getEventProcessCntStatics'
})
}
\ No newline at end of file
url: "/wcwy/api/event/getEventProcessCntStatics",
});
}
//社区列表
export function getCommunityList(params) {
return request({
url: "/atlas/atlas/community/list",
params,
});
}
//小区列表
export function getVillageList(params) {
return request({
url: "/wcwy/house/getHouseList/" + params,
});
}
@font-face {
font-family: "iconfont"; /* Project id 4070328 */
src: url('iconfont.woff2?t=1686102393775') format('woff2'),
url('iconfont.woff?t=1686102393775') format('woff'),
url('iconfont.ttf?t=1686102393775') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shouye2:before {
content: "\e606";
}
.icon-wode1:before {
content: "\e735";
}
.icon-tianjia:before {
content: "\e7df";
}
.icon-daiban:before {
content: "\e63e";
}
.icon-daiban1:before {
content: "\e629";
}
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Vue from "vue";
import VueRouter from "vue-router";
import { getToken } from "@/utils/auth";
Vue.use(VueRouter);
const routes = [
{
path: '/home',
name: 'Home',
component: () => import('../views/Home.vue'),
children:[
path: "/home",
name: "Home",
component: () => import("../views/Home.vue"),
children: [
{
path: '',
name: 'EventList',
component: () => import('../views/EventList.vue'),
path: "/",
name: "EventList",
component: () => import("../views/EventList.vue"),
meta: {
title: '事件'
}
title: "事件",
},
},
{
path: '/message',
name: 'Message',
component: () => import('../views/Message.vue'),
path: "/message",
name: "Message",
component: () => import("../views/Message.vue"),
meta: {
title: '消息'
}
title: "消息",
},
},
{
path: '/statistics',
name: 'Statistics',
component: () => import('../views/Statistics.vue'),
path: "/statistics",
name: "Statistics",
component: () => import("../views/Statistics.vue"),
meta: {
title: '统计'
}
}
]
title: "统计",
},
},
],
},
{
path: '/',
name: 'Login',
component: () => import('../views/Login.vue'),
path: "/",
name: "Login",
component: () => import("../views/Login.vue"),
meta: {
title: '登录'
}
title: "登录",
},
},
{
path: '/event-detail',
name: 'EventDetail',
component: () => import('../views/EventDetail.vue'),
path: "/event-detail",
name: "EventDetail",
component: () => import("../views/EventDetail.vue"),
meta: {
title: '事件详情'
}
title: "事件详情",
},
},
{
path: '/search',
name: 'Search',
component: () => import('../views/Search.vue'),
path: "/search",
name: "Search",
component: () => import("../views/Search.vue"),
meta: {
title: '搜索'
}
title: "搜索",
},
},
{
path: '/handle',
name: 'Handle',
component: () => import('../views/Handle.vue'),
path: "/handle",
name: "Handle",
component: () => import("../views/Handle.vue"),
meta: {
title: '处理'
}
}
]
title: "处理",
},
},
{
path: "/addEvent",
name: "AddEvent",
component: () => import("../views/addEvent.vue"),
meta: {
title: "添加",
},
},
];
const router = new VueRouter({
routes
})
routes,
});
router.beforeEach((to, from, next) => {
if (to.path === "/") {
if (getToken()) next("/home");
}
next();
});
export default router
export default router;
export const eleDrag = (dragDom) => {
const oDiv = document.querySelector(dragDom);
let disX = 0;
let disY = 0;
oDiv.addEventListener("touchstart", (e) => {
let touch = e.touches[0];
disX = touch.clientX - oDiv.offsetLeft;
disY = touch.clientY - oDiv.offsetTop;
document.addEventListener("touchmove", defaultEvent, false);
});
oDiv.addEventListener("touchmove", (e) => {
let touch = e.touches[0];
let oLeft = touch.clientX - disX;
let oTop = touch.clientY - disY;
if (oLeft < 10) {
oLeft = 10;
} else if (
oLeft >
document.documentElement.clientWidth - oDiv.offsetWidth - 10
) {
oLeft = document.documentElement.clientWidth - oDiv.offsetWidth - 10;
}
if (oTop < 0) {
oTop = 0;
} else if (
oTop >
document.documentElement.clientHeight - oDiv.offsetHeight - 50
) {
oTop = document.documentElement.clientHeight - oDiv.offsetHeight - 50;
}
oDiv.style.left = oLeft + "px";
oDiv.style.top = oTop + "px";
});
oDiv.addEventListener("touchend", () => {
document.removeEventListener("touchmove", defaultEvent, false);
});
const defaultEvent = (e) => {
e.preventDefault();
};
};
import axios from 'axios'
import axios from "axios";
import { getToken, removeToken } from "@/utils/auth";
import router from '@/router'
import { Toast } from 'vant'
const baseURL = process.env.NODE_ENV === "production" ? "/hmit-api" : "/proxyApi"
import router from "@/router";
import { Toast } from "vant";
const baseURL = process.env.NODE_ENV === "production" ? "/api" : "/proxyApi";
const request = axios.create({
baseURL,
timeout: 10000,
withCredentials: true
baseURL,
timeout: 10000,
withCredentials: true,
});
request.interceptors.request.use(
config => {
config.headers["Authorization"] = "Bearer " + getToken();
return config
},
error => {
return Promise.reject(error)
}
)
request.interceptors.response.use((response) => {
(config) => {
config.headers["Authorization"] = "Bearer " + getToken();
return config;
},
(error) => {
return Promise.reject(error);
}
);
request.interceptors.response.use(
(response) => {
const res = response.data;
if (res.code === 200) {
return res
return res;
} else if (res.code === 401) {
Toast.fail(res.msg)
router.replace('/login')
Toast.fail(res.msg);
removeToken();
router.push("/");
} else {
Toast.fail(res.msg)
return res
Toast.fail(res.msg);
return res;
}
}, (err) => {
Toast('网络请求异常,请稍后重试!');
return err
});
export default request;
\ No newline at end of file
},
(err) => {
Toast("网络请求异常,请稍后重试!");
return err;
}
);
export default request;
......@@ -3,77 +3,96 @@
<div class="detail-container">
<div class="detail-item">
<div class="label">事件编号</div>
<div class="val">{{ info.eventNo }}</div>
<div class="val">{{ info.eventNo || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">事件类型</div>
<div class="val">{{ info.category }}</div>
<div class="val">{{ info.category || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">事发地点</div>
<div class="val">{{ info.address }}</div>
<div class="val">{{ info.address || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">上报网络</div>
<div class="val">{{ info.gridName }}</div>
<div class="val">{{ info.gridName || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">事件描述</div>
<div class="val" style="line-height: .42rem;">{{ info.description }}</div>
<div class="val" style="line-height: 0.42rem">
{{ info.description || "--" }}
</div>
<div class="val">
<div class="img-box">
<img
:src="item"
@click="preview(imgUrlList, index)"
v-for="(item, index) in imgUrlList"
/>
</div>
</div>
</div>
<div class="detail-item">
<div class="label">涉及人数</div>
<div class="val">{{ info.involvedNumber }}</div>
<div class="val">{{ info.involvedNumber || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">上报人</div>
<div class="val">{{ info.reportName }}</div>
<div class="val">{{ info.reportName || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">上报人电话</div>
<div class="val">{{ info.reflectorMobile }}</div>
<div class="val">{{ info.reflectorMobile || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">上报时间</div>
<div class="val">{{ info.reportDate }}</div>
<div class="val">{{ info.reportDate || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">事件等级</div>
<div class="val">{{ info.rankNo }}</div>
<div class="val">{{ info.rankNo || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">处理天数</div>
<div class="val">{{ info.expectedDays }}</div>
<div class="val">{{ info.expectedDays || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">处理状态</div>
<div class="val">{{ info.status }}</div>
<div class="val">{{ info.status || "--" }}</div>
</div>
<div class="detail-item">
<div class="label">处理时间</div>
<div class="val">{{ info.registerDate }}</div>
<div class="val">{{ info.registerDate || "--" }}</div>
</div>
<div class="detail-item" v-if="hasProcess">
<div class="label">处理内容</div>
<div class="val">{{ info.processContent }}</div>
<div class="val">{{ info.processContent || "--" }}</div>
</div>
<div class="detail-item" v-if="hasProcess">
<div class="label">处理前</div>
<div class="val">
<div class="img-box" >
<img :src="item" @click="preview(beforeHandleImgs, index)" v-for="(item, index) in beforeHandleImgs" />
<div class="img-box">
<img
:src="item"
@click="preview(beforeHandleImgs, index)"
v-for="(item, index) in beforeHandleImgs"
/>
</div>
</div>
</div>
<div class="detail-item" v-if="hasProcess">
<div class="label">处理后</div>
<div class="val">
<div class="img-box" >
<img :src="item" @click="preview(afterHandleImgs, index)" v-for="(item, index) in afterHandleImgs" />
<div class="img-box">
<img
:src="item"
@click="preview(afterHandleImgs, index)"
v-for="(item, index) in afterHandleImgs"
/>
</div>
</div>
</div>
<div class="detail-item">
<!-- <div class="detail-item">
<div class="label">附件</div>
<div class="val">
<div class="file-list">
......@@ -83,125 +102,153 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
<div class="handle-btn-box" v-if="Object.keys(info).length > 0 && !hasProcess">
<van-button type="info" style="height: .86rem; background-color: #3978F8;color: #fff;" round size="large" @click="toHandle">去处理</van-button>
<div
class="handle-btn-box"
v-if="Object.keys(info).length > 0 && !hasProcess"
>
<van-button
type="info"
style="height: 0.86rem; background-color: #3978f8; color: #fff"
round
size="large"
@click="toHandle"
>去处理</van-button
>
</div>
</div>
</template>
<script>
import { ImagePreview } from 'vant';
import { getEventDetail, getEventInfo } from '../api/index'
import { ImagePreview } from "vant";
import { getEventDetail, getEventInfo } from "../api/index";
export default {
data() {
return {
id: '',
id: "",
info: {},
afterHandleImgs: [],
beforeHandleImgs: []
beforeHandleImgs: [],
imgUrlList: [],
scrollTop: 0,
};
},
computed: {
hasProcess() {
return this.info.status === '已处理'
}
return this.info.status === "已处理";
},
},
methods: {
getInfo() {
getEventDetail(this.id).then(res => {
getEventDetail(this.id).then((res) => {
this.info = res.data;
if (res.data.status === '已处理') {
this.getPrecessInfo()
if (res.data.status === "已处理") {
this.getPrecessInfo();
}
})
});
},
getPrecessInfo() {
getEventInfo(this.id).then(res => {
getEventInfo(this.id).then((res) => {
this.info.processContent = res.data.processContent;
if (res.data.beforeProcessImgList) {
this.beforeHandleImgs = res.data.beforeProcessImgList.split(',').map(i => {
return 'http://192.168.20.11:10008/file/' + i
});
this.beforeHandleImgs = res.data.beforeProcessImgList.split(",");
}
if (res.data.afterProcessImgList) {
this.afterHandleImgs = res.data.afterProcessImgList.split(',').map(i => {
return 'http://192.168.20.11:10008/file/' + i
});
this.afterHandleImgs = res.data.afterProcessImgList.split(",");
}
if (res.data.imgUrlList) {
this.info.imgUrlList = res.data.imgUrlList.split(",");
}
if (res.data.fileUrlList) {
this.info.fileList = res.data.fileUrlList.split(',');
this.info.fileList = res.data.fileUrlList.split(",");
}
})
});
},
toHandle() {
this.$router.push('/handle?id=' + this.id);
this.$router.push("/handle?id=" + this.id);
},
preview(images, startPosition) {
this.scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
alert(this.scrollTop);
ImagePreview({
images, startPosition
images,
startPosition,
});
},
},
mounted() {
this.id = this.$route.query.id;
this.getInfo();
}
},
async beforeRouteLeave(to, from, next) {
if (
!document.querySelector(".van-image-preview") ||
document.querySelector(".van-image-preview").style.display === "none"
) {
next(true);
} else {
next(false);
await new Promise((resolve) => setTimeout(resolve, 0));
document.documentElement.scrollTop = this.scrollTop;
document.body.scrollTop = this.scrollTop;
}
},
};
</script>
<style lang="scss" scoped>
.event-detail {
.detail-container{
border-top: 15px solid #F7F7F7;
.detail-container {
border-top: 15px solid #f7f7f7;
border-bottom: 15px solid #f7f7f7;
padding: .3rem .35rem 1.28rem;
padding: 0.3rem 0.35rem 1.28rem;
.detail-item {
.label{
.label {
color: #999;
font-size: .25rem;
font-size: 0.25rem;
}
.val{
.val {
color: #111;
margin-top: .2rem;
font-size: .31rem;
.img-box{
margin-top: 0.2rem;
font-size: 0.31rem;
.img-box {
display: flex;
flex-wrap: wrap;
img{
img {
width: 1.6rem;
height: 1.06rem;
margin-right: .14rem;
margin-bottom: .14rem;
margin-right: 0.14rem;
margin-bottom: 0.14rem;
}
}
.file-list{
.file-item{
margin-bottom: .2rem;
.file-list {
.file-item {
margin-bottom: 0.2rem;
display: flex;
align-items: center;
.file-name{
.file-name {
color: #111;
font-size: .31rem;
font-size: 0.31rem;
}
.check-btn{
margin-left: .5rem;
.check-btn {
margin-left: 0.5rem;
border-radius: 0.21rem;
border: 1px solid #3978F8;
color: #3978F8;
font-size: .25rem;
padding: .1rem .2rem;
border: 1px solid #3978f8;
color: #3978f8;
font-size: 0.25rem;
padding: 0.1rem 0.2rem;
}
}
}
}
&:not(:last-child) {
margin-bottom: .35rem;
margin-bottom: 0.35rem;
}
}
}
.handle-btn-box{
.handle-btn-box {
width: 100%;
position: fixed;
left: 0;
......@@ -211,7 +258,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
padding: 0 .62rem;
padding: 0 0.62rem;
}
}
</style>
\ No newline at end of file
</style>
......@@ -10,8 +10,20 @@
</div>
<div class="event-list-box">
<div class="tab-box">
<div class="tab-item" @click="changeTab(0)" :class="{'active': tabIndex === 0}">待处理</div>
<div class="tab-item" @click="changeTab(1)" :class="{'active': tabIndex === 1}">已处理</div>
<div
class="tab-item"
@click="changeTab(0)"
:class="{ active: tabIndex === 0 }"
>
待处理
</div>
<div
class="tab-item"
@click="changeTab(1)"
:class="{ active: tabIndex === 1 }"
>
已处理
</div>
</div>
<div class="search-container" @click="toSearch">
<div class="search-box">
......@@ -21,42 +33,50 @@
</div>
<div class="event-list">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList"
>
<div
class="item"
:key="item.id"
v-for="(item, index) in list"
@click="toDetail(item)"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList"
>
<div class="item-name">{{ item.eventName }}</div>
<div class="_bottom">
<div class="item-info">
<div class="item-type">
<div class="label">事件类型:</div>
<div class="val">{{ item.category }}</div>
<div
class="item"
:key="item.id"
v-for="(item, index) in list"
@click="toDetail(item)"
>
<div class="item-name">{{ item.eventName }}</div>
<div class="_bottom">
<div class="item-info">
<div class="item-type">
<div class="label">事件类型:</div>
<div class="val">{{ item.category }}</div>
</div>
<div class="item-deadline" v-if="tabIndex === 0">
<div class="label">处理期限:</div>
<div class="val" :class="getClass(item.expectedDays)">
{{ item.expectedDays }}
</div>
</div>
</div>
<div class="item-deadline" v-if="tabIndex === 0">
<div class="label">处理期限:</div>
<div class="val" :class="getClass(item.expectedDays)">{{ item.expectedDays }}</div>
<div class="handle-btn">
{{ tabIndex === 0 ? "去处理" : "查看" }}
</div>
</div>
<div class="handle-btn">{{ tabIndex === 0 ? '去处理' : '查看' }}</div>
</div>
</div>
</van-list>
</van-list>
</div>
</div>
<div class="addEvent" @click="toAddEvent()">
<i :class="`iconfont icon-tianjia`"></i>
</div>
</div>
</template>
<script>
import { Toast } from 'vant'
import { getEventList } from '../api/index'
import { removeToken } from '../utils/auth'
import { Toast } from "vant";
import { getEventList } from "../api/index";
import { eleDrag } from "@/utils/index.js";
import { removeToken } from "../utils/auth";
export default {
data() {
return {
......@@ -67,39 +87,39 @@ export default {
pageNum: 1,
pageSize: 10,
total: 0,
}
};
},
methods: {
getClass(day) {
if (day > 2) {
return 'green'
return "green";
} else if (day === 2) {
return 'yellow'
return "yellow";
} else {
return 'red'
return "red";
}
},
logout() {
removeToken()
Toast.success('退出成功')
this.$router.replace('/login')
removeToken();
Toast.success("退出成功");
this.$router.replace("/");
},
toSearch() {
this.$router.push({
name: 'Search',
name: "Search",
query: {
type: this.tabIndex
}
})
type: this.tabIndex,
},
});
},
changeTab(index) {
if (this.tabIndex === index) return;
this.tabIndex = index
this.pageNum = 1
this.finished = false
this.list = []
this.getList()
},
this.tabIndex = index;
this.pageNum = 1;
this.finished = false;
this.list = [];
this.getList();
},
getList() {
this.loading = true;
let params = {
......@@ -107,12 +127,13 @@ export default {
pageNum: this.pageNum,
pageSize: this.pageSize,
};
getEventList(params).then(res => {
getEventList(params).then((res) => {
if (res.code === 200) {
this.loading = false;
this.total = res.total;
if (this.total === 0) {
this.finished = true;
this.list = [];
return;
}
if (this.pageNum === 1) {
......@@ -126,189 +147,214 @@ export default {
this.pageNum++;
}
}
})
});
},
toDetail(item) {
this.$router.push({
name: 'EventDetail',
name: "EventDetail",
query: {
id: item.id
}
})
}
id: item.id,
},
});
},
toAddEvent() {
this.$router.push({
name: "AddEvent",
});
},
},
mounted() {
this.getList()
}
}
this.getList();
eleDrag(".addEvent");
},
activated() {
this.pageNum = 1;
this.getList();
},
};
</script>
<style lang="scss">
.event-list-container{
.banner{
background: url('../assets/imgs/index_top_bg.png') no-repeat;
.event-list-container {
.banner {
background: url("../assets/imgs/index_top_bg.png") no-repeat;
background-size: 100% 100%;
width: 100%;
height: 3.4rem;
padding: 1.1rem .28rem 1.28rem;
.user-box{
height: .74rem;
padding: 1.1rem 0.28rem 1.28rem;
.user-box {
height: 0.74rem;
display: flex;
align-items: center;
img{
width: .74rem;
height: .74rem;
img {
width: 0.74rem;
height: 0.74rem;
border-radius: 50%;
}
.name{
.name {
color: #fff;
font-size: .32rem;
font-size: 0.32rem;
font-weight: bold;
margin: 0 .3rem;
margin: 0 0.3rem;
}
.dept{
.dept {
color: #fff;
font-size: .26rem;
font-size: 0.26rem;
border-left: 1px solid #fff;
padding-left: .2rem;
padding-left: 0.2rem;
}
.logout{
.logout {
color: #fff;
font-size: .26rem;
font-size: 0.26rem;
margin-left: auto;
font-weight: bold;
}
}
}
.event-list-box{
.event-list-box {
height: calc(100vh - 2.4rem);
width: 100%;
background: #FFFFFF;
background: #ffffff;
border-radius: 0.42rem 0.42rem 0rem 0rem;
margin-top: -1rem;
.tab-box{
.tab-box {
height: 1rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
border-bottom: 1px solid #DCDCDC;
.tab-item{
font-size: .28rem;
border-bottom: 1px solid #dcdcdc;
.tab-item {
font-size: 0.28rem;
color: #666666;
}
.active{
.active {
color: #111;
font-weight: bold;
position: relative;
&::after{
content: '';
&::after {
content: "";
position: absolute;
background-color: #111;
height: 0.06rem;
width: .35rem;
border-radius: .1rem;
bottom: -.15rem;
width: 0.35rem;
border-radius: 0.1rem;
bottom: -0.15rem;
left: 50%;
margin-left: -.18rem;
margin-left: -0.18rem;
}
}
}
.search-container{
padding: .2rem .35rem 0;
.search-box{
.search-container {
padding: 0.2rem 0.35rem 0;
.search-box {
width: 100%;
background-color: #F1F1F1;
background-color: #f1f1f1;
border-radius: 0.33rem;
height: .68rem;
height: 0.68rem;
display: flex;
align-items: center;
padding-left: .28rem;
img{
width: .25rem;
height: .25rem;
margin-right: .13rem;
padding-left: 0.28rem;
img {
width: 0.25rem;
height: 0.25rem;
margin-right: 0.13rem;
}
span{
color: #A6A9B0;
font-size: .29rem;
span {
color: #a6a9b0;
font-size: 0.29rem;
}
}
}
.event-list{
padding: 0 .35rem 1.28rem;
.item{
margin-top: .42rem;
.item-name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
color: #111;
font-size: .31rem;
}
._bottom{
margin-top: .34rem;
display: flex;
justify-content: space-between;
align-items: center;
.item-info{
font-size: .25rem;
.item-type{
display: flex;
margin-bottom: .28rem;
}
.item-deadline{
display: flex;
.val{
position: relative;
padding-left: .32rem;
&::after{
position: absolute;
width: .13rem;
height: .13rem;
content: '';
left: .05rem;
top: .05rem;
border-radius: 50%;
}
.event-list {
padding: 0 0.35rem 1.28rem;
.item {
margin-top: 0.42rem;
.item-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
color: #111;
font-size: 0.31rem;
}
._bottom {
margin-top: 0.34rem;
display: flex;
justify-content: space-between;
align-items: center;
.item-info {
font-size: 0.25rem;
.item-type {
display: flex;
margin-bottom: 0.28rem;
}
.red{
&::after{
background-color: #E9691F;
.item-deadline {
display: flex;
.val {
position: relative;
padding-left: 0.32rem;
&::after {
position: absolute;
width: 0.13rem;
height: 0.13rem;
content: "";
left: 0.05rem;
top: 0.05rem;
border-radius: 50%;
}
}
}
.yellow{
&::after{
background-color: #FEBC2F;
.red {
&::after {
background-color: #e9691f;
}
}
}
.green{
&::after{
background-color: #1CC291;
.yellow {
&::after {
background-color: #febc2f;
}
}
.green {
&::after {
background-color: #1cc291;
}
}
}
.label {
color: #999;
}
.val {
color: #111;
}
}
.label{
color: #999;
}
.val{
color: #111;
.handle-btn {
width: 1.3rem;
height: 0.54rem;
border-radius: 0.26rem;
border: 1px solid #3978f8;
color: #3978f8;
text-align: center;
line-height: 0.54rem;
}
}
.handle-btn{
width: 1.3rem;
height: .54rem;
border-radius: .26rem;
border: 1px solid #3978F8;
color: #3978F8;
text-align: center;
line-height: .54rem;
}
}
}
}
}
}
</style>
\ No newline at end of file
.addEvent {
width: 45px;
height: 45px;
position: fixed;
right: 10px;
bottom: 150px;
background-color: #3f79e0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
i {
font-size: 30px;
color: #fff;
}
}
</style>
<template>
<div class="login">
<div class="banner">
<!-- <a
href="https://apis.map.qq.com/uri/v1/search?keyword=酒店&region=北京&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
>123123123</a
> -->
<p>Hello!</p>
<p style="margin-top: 0.3rem">欢迎登录XXXX物业管理端</p>
</div>
......@@ -9,7 +13,11 @@
<input v-model="form.username" type="text" placeholder="请输入账号" />
</div>
<div class="form-item">
<input type="password" v-model="form.password" placeholder="请输入密码" />
<input
type="password"
v-model="form.password"
placeholder="请输入密码"
/>
</div>
<div class="code-box">
<div class="form-item code">
......@@ -17,23 +25,25 @@
</div>
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
<van-button type="info" @click="submit" round size="large">立即登录</van-button>
<van-button type="info" @click="submit" round size="large"
>立即登录</van-button
>
</div>
</div>
</template>
<script>
import { login, getCodeImg, getUserInfo } from "../api";
import { setToken } from '../utils/auth'
import { setToken } from "../utils/auth";
export default {
data() {
return {
codeUrl: '',
codeUrl: "",
form: {
username: 'tyjy',
password: 'xcsq1234,',
code: '',
uuid: ''
username: "tyjy",
password: "xcsq1234,",
code: "",
uuid: "",
},
};
},
......@@ -50,16 +60,16 @@ export default {
},
submit() {
login(this.form).then((res) => {
if( res.code === 200) {
setToken(res.data.access_token)
this.$router.replace('/home')
if (res.code === 200) {
setToken(res.data.access_token);
this.$router.replace("/home");
}
});
},
},
mounted() {
this.getCode();
}
},
};
</script>
......@@ -98,13 +108,13 @@ export default {
background-color: #f1f2f6;
}
}
.code-box{
.code-box {
display: flex;
img{
margin-left: .2rem;
img {
margin-left: 0.2rem;
height: 1rem;
}
}
}
}
</style>
\ No newline at end of file
</style>
......@@ -12,7 +12,9 @@
<div class="item-title">{{ item.title }}</div>
<div class="item-time">{{ item.publishTime }}</div>
</div>
<div class="item-desc" :class="{'notRead': item.status === 0}">{{ item.content }}啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
<div class="item-desc" :class="{ notRead: item.status === 0 }">
{{ item.content }}
</div>
</div>
</van-list>
</div>
......@@ -20,7 +22,7 @@
</template>
<script>
import { getMessageList, getMessageDetail, getMessageCount } from '../api'
import { getMessageList, getMessageDetail, getMessageCount } from "../api";
export default {
data() {
return {
......@@ -29,96 +31,95 @@ export default {
page: 1,
limit: 10,
total: 0,
list: []
}
list: [],
};
},
methods: {
getList() {
this.loading = true
this.loading = true;
let params = {
page: this.page,
limit: this.limit
}
getMessageList(params).then(res => {
limit: this.limit,
};
getMessageList(params).then((res) => {
if (res.code === 200) {
this.loading = false
this.list = this.list.concat(res.rows)
this.total = res.total
this.page++
this.loading = false;
this.list = this.list.concat(res.rows);
this.total = res.total;
this.page++;
if (this.list.length >= this.total) {
this.finished = true
this.finished = true;
}
} else {
this.finished = true
this.finished = true;
}
})
});
},
toDetail(item) {
getMessageDetail(item.id).then(res => {
item.status = 1
getMessageCount().then(res => {
getMessageDetail(item.id).then((res) => {
item.status = 1;
getMessageCount().then((res) => {
if (res.code === 200) {
this.$store.commit('SET_READCOUNT', res.data)
this.$store.commit("SET_READCOUNT", res.data);
}
})
})
});
});
this.$router.push({
name: 'EventDetail',
name: "EventDetail",
query: {
id: item.eventId
}
})
}
id: item.eventId,
},
});
},
},
mounted() {
this.getList()
}
}
this.getList();
},
};
</script>
<style lang="scss" scoped>
.message-container{
.message-list{
padding: 0 .26rem;
.message-item{
border-bottom: 1px solid #E7E9F0;
padding: .26rem 0 .35rem;
._top{
.message-container {
.message-list {
padding: 0 0.26rem;
.message-item {
border-bottom: 1px solid #e7e9f0;
padding: 0.26rem 0 0.35rem;
._top {
display: flex;
justify-content: space-between;
.item-title{
.item-title {
font-weight: bold;
font-size: .31rem;
font-size: 0.31rem;
}
.item-time{
.item-time {
color: #999;
font-size: .23rem;
font-size: 0.23rem;
}
}
.item-desc{
padding-right: .3rem;
.item-desc {
padding-right: 0.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: .24rem;
margin-top: 0.24rem;
color: #999;
font-size: .28rem;
font-size: 0.28rem;
}
.notRead{
.notRead {
position: relative;
&::after{
&::after {
position: absolute;
width: .15rem;
height: .15rem;
content: '';
background-color: #FE5219;
width: 0.15rem;
height: 0.15rem;
content: "";
background-color: #fe5219;
border-radius: 50%;
right: 0;
top: .06rem;
}
top: 0.06rem;
}
}
}
}
}
</style>
\ No newline at end of file
</style>
......@@ -14,18 +14,23 @@
<van-icon name="delete-o" @click="deleteHistory" />
</div>
<div class="history-list">
<div class="history-item" v-for="item in searchHistory" :key="item" @click="historyClick(item)">
<div
class="history-item"
v-for="item in searchHistory"
:key="item"
@click="historyClick(item)"
>
{{ item }}
</div>
</div>
</div>
<div class="result-list">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList"
>
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList"
>
<div
class="item"
:key="item.id"
......@@ -41,10 +46,12 @@
</div>
<div class="item-deadline" v-if="type === '0'">
<div class="label">处理期限:</div>
<div class="val" :class="getClass(item.expectedDays)">{{ item.expectedDays }}</div>
<div class="val" :class="getClass(item.expectedDays)">
{{ item.expectedDays }}
</div>
</div>
</div>
<div class="handle-btn">{{ type === '0' ? '去处理' : '查看' }}</div>
<div class="handle-btn">{{ type === "0" ? "去处理" : "查看" }}</div>
</div>
</div>
</van-list>
......@@ -53,191 +60,201 @@
</template>
<script>
import { getEventList } from '../api'
import { getEventList } from "../api";
export default {
data() {
return {
type: '',
type: "",
loading: false,
finished: false,
list: [],
page: 1,
limit: 10,
total: 0,
searchVal: '',
searchHistory: []
}
searchVal: "",
searchHistory: [],
};
},
methods: {
getClass(day) {
if (day > 2) {
return 'green'
return "green";
} else if (day === 2) {
return 'yellow'
return "yellow";
} else {
return 'red'
return "red";
}
},
toDetail(item) {
this.$router.push({
name: 'EventDetail',
name: "EventDetail",
query: {
id: item.id
}
})
id: item.id,
},
});
},
historyClick(item) {
this.searchVal = item
this.listReset()
this.getList()
this.list = [];
this.searchVal = item;
this.listReset();
this.getList();
},
listReset() {
this.page = 1
this.limit = 1
this.total = 0
this.loading = false
this.finished = false
},
this.page = 1;
this.total = 0;
this.loading = false;
this.finished = false;
},
getList() {
if (this.searchVal.trim() === '') {
this.finished = true
return
if (this.searchVal.trim() === "") {
this.finished = true;
return;
}
this.finished = false
this.loading = true
this.finished = false;
this.loading = true;
let params = {
pageNum: this.page,
pageSize: this.limit,
processed: this.type === '0' ? true : false,
keyword: this.searchVal
}
getEventList(params).then(res => {
processed: this.type == "0" ? false : true,
keyword: this.searchVal,
};
getEventList(params).then((res) => {
if (res.code === 200) {
this.loading = false
this.total = res.total
this.list = this.list.concat(res.rows)
this.page ++
this.loading = false;
this.total = res.total;
this.list = this.list.concat(res.rows);
this.page++;
if (this.list.length >= this.total) {
this.finished = true
this.finished = true;
}
} else {
this.loading = false
this.finished = true
this.loading = false;
this.finished = true;
}
})
});
},
onSearch(val) {
this.getList()
this.list = [];
this.getList();
if (this.searchHistory.indexOf(val) === -1) {
if (this.searchHistory.length >= 5) this.searchHistory.pop();
this.searchHistory.unshift(val);
}
localStorage.setItem("searchHistory", JSON.stringify(this.searchHistory));
},
onCancel() {
console.log('cancel')
this.list = [];
},
deleteHistory() {
this.searchHistory = []
}
this.searchHistory = [];
localStorage.removeItem("searchHistory");
},
},
mounted() {
this.type = this.$route.query.type
}
}
created() {
this.type = this.$route.query.type;
this.searchHistory = JSON.parse(
localStorage.getItem("searchHistory") || "[]"
);
},
};
</script>
<style lang="scss" scoped>
.search-container{
.history-container{
padding: .42rem .28rem;
.history-title{
.search-container {
.history-container {
padding: 0.42rem 0.28rem;
.history-title {
display: flex;
font-size: .31rem;
font-size: 0.31rem;
justify-content: space-between;
}
.history-list{
margin-top: .28rem;
.history-list {
margin-top: 0.28rem;
display: flex;
flex-wrap: wrap;
.history-item{
margin-right: .28rem;
.history-item {
margin-right: 0.28rem;
background-color: #f7f7f7;
color: #666666;
border-radius: .3rem;
padding: .2rem .35rem;
margin-bottom: .18rem;
border-radius: 0.3rem;
padding: 0.2rem 0.35rem;
margin-bottom: 0.18rem;
}
}
}
.result-list{
padding: 0 .35rem 1.28rem;
.item{
margin-top: .42rem;
.item-name{
.result-list {
padding: 0 0.35rem 1.28rem;
.item {
margin-top: 0.42rem;
.item-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
color: #111;
font-size: .31rem;
font-size: 0.31rem;
}
._bottom{
margin-top: .34rem;
._bottom {
margin-top: 0.34rem;
display: flex;
justify-content: space-between;
align-items: center;
.item-info{
font-size: .25rem;
.item-type{
.item-info {
font-size: 0.25rem;
.item-type {
display: flex;
margin-bottom: .28rem;
margin-bottom: 0.28rem;
}
.item-deadline{
.item-deadline {
display: flex;
.val{
.val {
position: relative;
padding-left: .32rem;
&::after{
padding-left: 0.32rem;
&::after {
position: absolute;
width: .13rem;
height: .13rem;
content: '';
left: .05rem;
top: .05rem;
width: 0.13rem;
height: 0.13rem;
content: "";
left: 0.05rem;
top: 0.05rem;
border-radius: 50%;
}
}
.red{
&::after{
background-color: #E9691F;
.red {
&::after {
background-color: #e9691f;
}
}
.yellow{
&::after{
background-color: #FEBC2F;
.yellow {
&::after {
background-color: #febc2f;
}
}
.green{
&::after{
background-color: #1CC291;
.green {
&::after {
background-color: #1cc291;
}
}
}
.label{
.label {
color: #999;
}
.val{
.val {
color: #111;
}
}
.handle-btn{
.handle-btn {
width: 1.3rem;
height: .54rem;
border-radius: .26rem;
border: 1px solid #3978F8;
color: #3978F8;
height: 0.54rem;
border-radius: 0.26rem;
border: 1px solid #3978f8;
color: #3978f8;
text-align: center;
line-height: .54rem;
line-height: 0.54rem;
}
}
}
}
}
}
</style>
\ No newline at end of file
</style>
<template>
<div>
<van-form @submit="onSubmit" class="form">
<van-cell-group inset class="wrap" :border="false">
<van-field v-model="form.eventName" v-bind="field('eventName', 1)" />
<van-field
readonly
is-link
v-model="form.category"
v-bind="field('category', 1)"
@click="popupChange('category')"
/>
<van-field
is-link
readonly
v-model="form.community"
v-bind="field('community', 1)"
@click="popupChange('community')"
/>
<van-field
readonly
is-link
v-model="form.house"
v-bind="field('house', 1)"
@click="popupChange('house')"
/>
<van-field v-model="form.gridName" v-bind="field('gridName')" />
<van-field v-model="form.address" v-bind="field('address')" />
<div class="content">
<van-field
v-model="form.eventDetails"
rows="4"
autosize
type="textarea"
maxlength="200"
placeholder="请填写事件详情"
:border="false"
show-word-limit
class="textarea"
/><van-uploader
class="uploader"
v-model="fileList"
multiple
:after-read="afterRead"
:before-delete="beforeDelete"
@click-preview="clickPreview"
/>
</div>
<van-field
v-model="form.involvedNumber"
v-bind="field('involvedNumber')"
/>
<van-field v-model="form.reportName" v-bind="field('reportName')" />
<van-field
v-model="form.reflectorMobile"
v-bind="field('reflectorMobile', 1)"
/>
<van-field
readonly
is-link
v-model="form.reportDate"
v-bind="field('reportDate', 1)"
@click="popupChange('reportDate')"
/>
<van-field
readonly
is-link
v-model="form.rankNo"
v-bind="field('rankNo')"
@click="popupChange('rankNo')"
/>
<van-field v-model="form.expectedDays" v-bind="field('expectedDays')" />
<van-field readonly />
</van-cell-group>
<div class="btn">
<van-button
round
block
:disabled="isDisabled"
type="primary"
native-type="submit"
color="linear-gradient(to right,#2498e2, #2f88ed)"
>
提交
</van-button>
</div>
<van-popup v-model="popupShow" position="bottom">
<van-picker
v-if="
['category', 'rankNo', 'community', 'house'].includes(popupType)
"
show-toolbar
:columns="popupData"
@confirm="onConfirm"
@cancel="popupShow = false"
/>
<van-datetime-picker
v-if="popupType == 'reportDate'"
title="上报时间"
v-model="currentDate"
type="datetime"
@confirm="onConfirm"
:min-date="minDate"
:max-date="maxDate"
/>
</van-popup>
</van-form>
</div>
</template>
<script>
import {
addEvent,
getCommunityList,
getVillageList,
uploadImg,
} from "@/api/index";
export default {
data() {
return {
form: {
eventName: "123",
reportDate: "",
expectedDays: "1",
imgUrlList: [],
status: "待处理",
},
fieldMap: {
eventName: "事件名称",
category: "事件类型",
community: "社区",
house: "小区",
gridName: "上报网络",
address: "事发地点",
eventDetails: "事件详情",
involvedNumber: "涉及人数",
reportName: "上报人",
reflectorMobile: "上报人电话",
reportDate: "上报时间",
rankNo: "事件等级",
expectedDays: "处理天数",
},
fileList: [],
popupShow: false,
popupType: "",
popupData: [],
isDisabled: false,
popupList: {
category: [
{ text: "类型1", value: 1 },
{ text: "类型2", value: 2 },
{ text: "类型3", value: 3 },
],
rankNo: [
{ text: "一级事件", value: 1 },
{ text: "二级事件", value: 2 },
{ text: "三级事件", value: 3 },
],
community: [],
},
isPreview: false,
};
},
created() {
getCommunityList().then((res) => {
this.popupList.community = res.data.map((item) => ({
text: item.name,
value: item.id,
}));
});
this.form.reportDate = this.dateFormate(new Date());
},
methods: {
async onSubmit() {
console.log(this.form);
this.form.imgUrlList = this.form.imgUrlList.join(",");
if (this.isDisabled) return;
this.isDisabled = true;
const res = await addEvent(this.form);
this.isDisabled = false;
if (res.code == 200) {
this.$toast.success("提交成功");
this.$router.push("/home");
}
},
popupChange(type) {
this.popupType = type;
this.popupShow = true;
const handle = {
category: () => (this.popupData = this.popupList[type]),
community: () => (this.popupData = this.popupList[type]),
rankNo: () => (this.popupData = this.popupList[type]),
house: () => {
if (this.form.communityId) {
this.popupData = this.popupList[type];
} else {
this.$toast("请先选择社区");
this.popupShow = false;
}
},
reportDate: () => (this.currentDate = new Date()),
};
handle[type]();
},
onConfirm(e) {
const handle = {
category: () => (this.form[this.popupType] = e.text),
community: async () => {
if (e.value != this.form.communityId) {
this.form.houseId = "";
this.form.house = "";
}
this.form[this.popupType] = e.text;
this.form.communityId = e.value;
const res = await getVillageList(e.value);
this.popupList.house = res.data.map((item) => ({
text: item.name,
value: item.id,
}));
},
house: () => {
this.form[this.popupType] = e.text;
this.form.houseId = e.value;
},
rankNo: () => (this.form[this.popupType] = e.text),
reportDate: () => (this.form[this.popupType] = this.dateFormate(e)),
};
handle[this.popupType]();
this.popupShow = false;
},
clickPreview() {
this.isPreview = true;
},
afterRead(files) {
if (!Array.isArray(files)) files = [files];
files.forEach(async (file) => {
file.status = "uploading";
file.message = "上传中...";
let formData = new FormData();
formData.append("file", file.file);
const res = await uploadImg(formData);
this.form.imgUrlList.push(res.data.url);
if (res.code == 200) {
file.status = "done";
file.message = "上传成功";
} else {
file.status = "failed";
file.message = "上传失败";
}
});
},
beforeDelete(file, detail) {
this.form.photo.splice(detail.index, 1);
return true;
},
field(key, required) {
const data = {
label: this.fieldMap[key],
placeholder: `请填写${this.fieldMap[key]}`,
required: required,
};
if (required) data.rules = [{ required: true }];
return data;
},
dateFormate(date) {
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hour = date.getHours().toString().padStart(2, "0");
let minute = date.getMinutes().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute} `;
},
},
computed: {
minDate() {
let date = new Date();
let year = date.getFullYear() - 1;
let month = date.getMonth() + 1;
let day = date.getDate();
return new Date(year, month, day);
},
maxDate() {
return new Date();
},
},
};
</script>
<style lang="scss" scoped>
.form {
overflow: hidden;
}
.wrap {
background-color: #fff;
border-radius: 0;
// box-shadow: 0 2px 8px #f0f1f5;
.content {
margin: 16px;
border-radius: 8px;
border: 1px solid #ebedf0;
overflow: hidden;
.uploader {
margin: 0 16px;
}
}
}
.btn {
margin: 0px 30px;
}
</style>
......@@ -2,40 +2,54 @@ module.exports = {
lintOnSave: false,
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
chainWebpack: (config) => {
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.test(/\.svg$/)
.use("svg-sprite-loader")
.loader("svg-sprite-loader");
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.test(/\.svg$/)
.use("svg-sprite-loader")
.loader("svg-sprite-loader");
},
configureWebpack: {
resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
module: {
rules: [
{
test: /\.ts?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
},
rules: [
{
test: /\.ts?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
},
},
],
},
},
productionSourceMap: false,
devServer: {
proxy: {
"/proxyApi": {
// target: 'http://192.168.10.12:18001/hmit-api',
target: 'http://192.168.10.4:10024/',
changeOrigin: true,
pathRewrite: {
"^/proxyApi": "/",
},
}
proxy: {
"/proxyApi": {
// target: 'http://192.168.10.12:18001/hmit-api',
target: "http://192.168.10.4:10024/",
// target: "https://xcsq.zjhmit.com/api",
changeOrigin: true,
pathRewrite: {
"^/proxyApi": "",
},
logLevel: "debug",
onProxyRes(proxyRes, req, res) {
console.log("Proxying response from:", req.path);
},
},
"/img-original": {
target: "https://xcsq.zjhmit.com",
changeOrigin: true,
logLevel: "debug",
onProxyRes(proxyRes, req, res) {
console.log("file:", req.path);
},
},
port: 8080
},
port: 8080,
},
};
\ No newline at end of file
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment