'last'
This commit is contained in:
617594538@qq.com
parent
1c5661e442
commit
434fa63eaf
@ -45,4 +45,67 @@ public class trafficController {
|
||||
return result;
|
||||
}
|
||||
|
||||
/**获取首页内容*/
|
||||
@RequestMapping(value = "/getAllContent", method = {RequestMethod.POST,RequestMethod.GET})
|
||||
@ResponseBody
|
||||
public Map<String,Object> getAllContent(@RequestBody Map<String,Object> param) {
|
||||
Map<String,Object> result = trafficService.getAllContent(param);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**查询违章处理*/
|
||||
@RequestMapping(value = "/illegalTreatment", method = {RequestMethod.POST,RequestMethod.GET})
|
||||
@ResponseBody
|
||||
public Map<String,Object> illegalTreatment(@RequestBody Map<String,Object> param) {
|
||||
Map<String,Object> result = trafficService.illegalTreatment(param);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**处理违章处理*/
|
||||
@RequestMapping(value = "/handle", method = {RequestMethod.POST,RequestMethod.GET})
|
||||
@ResponseBody
|
||||
public Map<String,Object> handle(@RequestBody Map<String,Object> param) {
|
||||
Map<String,Object> result = trafficService.handle(param);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**查询违章信息*/
|
||||
@RequestMapping(value = "/getIllegalInfo", method = {RequestMethod.POST,RequestMethod.GET})
|
||||
@ResponseBody
|
||||
public Map<String,Object> getIllegalInfo(@RequestBody Map<String,Object> param) {
|
||||
Map<String,Object> result = trafficService.getIllegalInfo(param);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**新增车辆挂牌*/
|
||||
@RequestMapping(value = "/insertPlateInfo", method = {RequestMethod.POST,RequestMethod.GET})
|
||||
@ResponseBody
|
||||
public Map<String,Object> insertPlateInfo(@RequestBody Map<String,Object> param) {
|
||||
Map<String,Object> result = trafficService.insertPlateInfo(param);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**查询车辆挂牌信息*/
|
||||
@RequestMapping(value = "/selectPlateInfo", method = {RequestMethod.POST,RequestMethod.GET})
|
||||
@ResponseBody
|
||||
public Map<String,Object> selectPlateInfo(@RequestBody Map<String,Object> param) {
|
||||
Map<String,Object> result = trafficService.selectPlateInfo(param);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**查询留言*/
|
||||
@RequestMapping(value = "/getLeaveMessage", method = {RequestMethod.POST,RequestMethod.GET})
|
||||
@ResponseBody
|
||||
public Map<String,Object> getLeaveMessage(@RequestBody Map<String,Object> param) {
|
||||
Map<String,Object> result = trafficService.getLeaveMessage(param);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**查询留言*/
|
||||
@RequestMapping(value = "/insertLeaveMessage", method = {RequestMethod.POST,RequestMethod.GET})
|
||||
@ResponseBody
|
||||
public Map<String,Object> insertLeaveMessage(@RequestBody Map<String,Object> param) {
|
||||
Map<String,Object> result = trafficService.insertLeaveMessage(param);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,9 +12,128 @@
|
||||
#{formName.phone}
|
||||
)
|
||||
</insert>
|
||||
|
||||
<!--用户登录-->
|
||||
<select id="getUser" parameterType="map" resultType="map">
|
||||
select * from traffic_user where user_name = #{formName.name} and user_password = #{formName.pass}
|
||||
select * from traffic_user where user_name = #{name} and user_password = #{pass}
|
||||
</select>
|
||||
|
||||
<select id="getSchoolNotice" parameterType="map" resultType="map">
|
||||
SELECT
|
||||
n.id,
|
||||
title,
|
||||
content,
|
||||
user_id,
|
||||
real_name,
|
||||
create_time
|
||||
FROM
|
||||
traffic_notice n left join traffic_user u on n.create_id = u.user_id
|
||||
where type = '信息公告'
|
||||
and status = "1"
|
||||
<if test="id != null and id != ''">
|
||||
and s.id = #{id}
|
||||
</if>
|
||||
<if test="type != null and type != ''">
|
||||
and label = #{label}
|
||||
</if>
|
||||
ORDER BY create_time desc
|
||||
</select>
|
||||
|
||||
<!--获取家长建议-->
|
||||
<select id="getParentAdvice" parameterType="map" resultType="map">
|
||||
SELECT
|
||||
n.id,
|
||||
title,
|
||||
content,
|
||||
user_id,
|
||||
real_name,
|
||||
create_time
|
||||
FROM
|
||||
traffic_notice n left join traffic_user u on n.create_id = u.user_id
|
||||
where type = '交通资讯'
|
||||
and status = "1"
|
||||
<if test="id != null and id != ''">
|
||||
and s.id = #{id}
|
||||
</if>
|
||||
<if test="type != null and type != ''">
|
||||
and label = #{label}
|
||||
</if>
|
||||
ORDER BY create_time desc
|
||||
</select>
|
||||
|
||||
<!--获取学生想法-->
|
||||
<select id="getStudentThinking" parameterType="map" resultType="map">
|
||||
SELECT
|
||||
n.id,
|
||||
title,
|
||||
content,
|
||||
user_id,
|
||||
real_name,
|
||||
create_time
|
||||
FROM
|
||||
traffic_notice n left join traffic_user u on n.create_id = u.user_id
|
||||
where type = '警示教育'
|
||||
and status = "1"
|
||||
<if test="id != null and id != ''">
|
||||
and s.id = #{id}
|
||||
</if>
|
||||
<if test="type != null and type != ''">
|
||||
and label = #{label}
|
||||
</if>
|
||||
ORDER BY create_time desc
|
||||
</select>
|
||||
<select id="illegalTreatment" resultType="map" parameterType="map">
|
||||
SELECT
|
||||
*
|
||||
FROM
|
||||
`traffic_illegal_info`
|
||||
WHERE
|
||||
number = #{number} and number_plate = #{numberPlate}
|
||||
and engine_number = #{engine} and mobile = #{mobile}
|
||||
</select>
|
||||
|
||||
<update id="handle" parameterType="map">
|
||||
update traffic_illegal_info set status = '1' where id = #{id}
|
||||
</update>
|
||||
|
||||
<select id="getIllegalInfo" resultType="map" parameterType="map">
|
||||
SELECT
|
||||
*
|
||||
FROM
|
||||
traffic_illegal_info
|
||||
WHERE
|
||||
plate_type = #{plateType} and number_plate = #{numberPlate}
|
||||
and engine_number like CONCAT('%',#{engineNumber},'%')
|
||||
and status = '0'
|
||||
</select>
|
||||
|
||||
<select id="getScrapInfo" resultType="map" parameterType="map">
|
||||
SELECT
|
||||
*
|
||||
FROM
|
||||
traffic_scrap_info
|
||||
WHERE
|
||||
plate_type = #{plateType} and number_plate = #{numberPlate}
|
||||
and engine_number like CONCAT('%',#{engineNumber},'%')
|
||||
</select>
|
||||
|
||||
<insert id="insertPlateInfo" parameterType="map">
|
||||
INSERT INTO traffic_plate_info ( id, create_id, create_time, plate_number, car_brand, qualified_no, car_size, car_type )
|
||||
VALUES
|
||||
( uuid(),#{createId},now(),#{plateNumber},#{carBrand},#{qualifiedNo},#{carSize},#{carType})
|
||||
</insert>
|
||||
|
||||
<select id="selectPlateInfo" resultType="map" parameterType="map">
|
||||
select * from traffic_plate_info left join traffic_user on create_id = user_id ORDER BY create_time desc
|
||||
</select>
|
||||
|
||||
<select id="getLeaveMessage" resultType="map" parameterType="map">
|
||||
SELECT * FROM `traffic_leave_message` left join traffic_user on create_id = user_id
|
||||
</select>
|
||||
|
||||
<insert id="insertLeaveMessage" parameterType="map">
|
||||
INSERT INTO traffic_leave_message ( id,content, create_id, create_time)
|
||||
VALUES
|
||||
( uuid(),#{content},#{createId},now())
|
||||
</insert>
|
||||
</mapper>
|
||||
@ -22,5 +22,34 @@ public interface trafficMapper {
|
||||
*/
|
||||
List<Map<String, Object>> getUser(Map<String, Object> param);
|
||||
|
||||
/**
|
||||
* 获取信息公告
|
||||
*/
|
||||
List<Map<String,Object>> getSchoolNotice(Map<String,Object> param);
|
||||
|
||||
/**
|
||||
* 获取交通资讯
|
||||
*/
|
||||
List<Map<String,Object>> getParentAdvice(Map<String,Object> param);
|
||||
|
||||
/**
|
||||
* 获取警示教育
|
||||
*/
|
||||
List<Map<String,Object>> getStudentThinking(Map<String,Object> param);
|
||||
|
||||
List<Map<String, Object>> illegalTreatment(Map<String, Object> param);
|
||||
|
||||
int handle(Map<String, Object> param);
|
||||
|
||||
List<Map<String, Object>> getIllegalInfo(Map<String, Object> param);
|
||||
|
||||
List<Map<String, Object>> getScrapInfo(Map<String, Object> param);
|
||||
|
||||
int insertPlateInfo(Map<String, Object> param);
|
||||
|
||||
List<Map<String, Object>> selectPlateInfo(Map<String, Object> param);
|
||||
|
||||
List<Map<String, Object>> getLeaveMessage(Map<String, Object> param);
|
||||
|
||||
int insertLeaveMessage(Map<String, Object> param);
|
||||
}
|
||||
|
||||
@ -5,18 +5,19 @@ import com.springboot.traffic.service.trafficService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
@Service
|
||||
public class trafficServiceImpl implements trafficService {
|
||||
@Autowired
|
||||
@Resource
|
||||
trafficMapper trafficMapper;
|
||||
|
||||
/**
|
||||
* 用户注册
|
||||
* @param 用户名、密码、手机号
|
||||
* @param
|
||||
* @return 成功与否、数据
|
||||
*/
|
||||
@Override
|
||||
@ -35,7 +36,7 @@ public class trafficServiceImpl implements trafficService {
|
||||
|
||||
/**
|
||||
* 用户登录
|
||||
* @param 用户名、密码
|
||||
* @param
|
||||
* @return 用户是否注册
|
||||
*/
|
||||
@Override
|
||||
@ -51,4 +52,121 @@ public class trafficServiceImpl implements trafficService {
|
||||
result.put("data", res);
|
||||
return result;
|
||||
}
|
||||
@Override
|
||||
public Map<String, Object> getAllContent(Map<String, Object> param) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
Map<String,Object> res = new HashMap<>();
|
||||
List<Map<String,Object>> schoolNoticeList = trafficMapper.getSchoolNotice(param);
|
||||
res.put("schoolNoticeList",schoolNoticeList);
|
||||
List<Map<String,Object>> parentAdvice = trafficMapper.getParentAdvice(param);
|
||||
res.put("parentAdvice",parentAdvice);
|
||||
List<Map<String,Object>> studentThinking = trafficMapper.getStudentThinking(param);
|
||||
res.put("studentThinking",studentThinking);
|
||||
result.put("data",res);
|
||||
result.put("success",true);
|
||||
return result;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Map<String, Object> illegalTreatment(Map<String, Object> param) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
List<Map<String, Object>> res = null;
|
||||
try {
|
||||
res = trafficMapper.illegalTreatment(param);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
result.put("success", true);
|
||||
result.put("data", res);
|
||||
return result;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Map<String, Object> handle(Map<String, Object> param) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
int res = 0;
|
||||
try {
|
||||
res = trafficMapper.handle(param);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
result.put("success", true);
|
||||
result.put("data", res);
|
||||
return result;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Map<String, Object> getIllegalInfo(Map<String, Object> param) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
List<Map<String, Object>> res = null;
|
||||
try {
|
||||
if ("1".equals(param.get("status"))) {
|
||||
res = trafficMapper.getScrapInfo(param);
|
||||
} else {
|
||||
res = trafficMapper.getIllegalInfo(param);
|
||||
}
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
result.put("success", true);
|
||||
result.put("data", res);
|
||||
return result;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Map<String, Object> insertPlateInfo(Map<String, Object> param) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
int res = 0;
|
||||
try {
|
||||
res = trafficMapper.insertPlateInfo(param);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
result.put("success", true);
|
||||
result.put("data", res);
|
||||
return result;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Map<String, Object> selectPlateInfo(Map<String, Object> param) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
List<Map<String, Object>> res = null;
|
||||
try {
|
||||
res = trafficMapper.selectPlateInfo(param);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
result.put("success", true);
|
||||
result.put("data", res);
|
||||
return result;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Map<String, Object> getLeaveMessage(Map<String, Object> param) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
List<Map<String, Object>> res = null;
|
||||
try {
|
||||
res = trafficMapper.getLeaveMessage(param);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
result.put("success", true);
|
||||
result.put("data", res);
|
||||
return result;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Map<String, Object> insertLeaveMessage(Map<String, Object> param) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
int res = 0;
|
||||
try {
|
||||
res = trafficMapper.insertLeaveMessage(param);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
result.put("success", true);
|
||||
result.put("data", res);
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -18,5 +18,22 @@ public interface trafficService {
|
||||
*/
|
||||
Map<String, Object> getUser(Map<String, Object> param);
|
||||
|
||||
/**
|
||||
* 获取首页内容
|
||||
*/
|
||||
Map<String,Object> getAllContent(Map<String,Object> param);
|
||||
|
||||
Map<String, Object> illegalTreatment(Map<String, Object> param);
|
||||
|
||||
Map<String, Object> handle(Map<String, Object> param);
|
||||
|
||||
Map<String, Object> getIllegalInfo(Map<String, Object> param);
|
||||
|
||||
Map<String, Object> insertPlateInfo(Map<String, Object> param);
|
||||
|
||||
Map<String, Object> selectPlateInfo(Map<String, Object> param);
|
||||
|
||||
Map<String, Object> getLeaveMessage(Map<String, Object> param);
|
||||
|
||||
Map<String, Object> insertLeaveMessage(Map<String, Object> param);
|
||||
}
|
||||
|
||||
@ -11,5 +11,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
#app{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
html{
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
body{
|
||||
height: 100%;
|
||||
padding-right: 17px!important;
|
||||
}
|
||||
.pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
.them-blue{
|
||||
color: #409EFF;
|
||||
}
|
||||
.special-them-blue:hover{
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
BIN
traffic-front/src/assets/img/no-data.png
Normal file
BIN
traffic-front/src/assets/img/no-data.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="illegal">
|
||||
<h2>车辆报废信息查询</h2>
|
||||
<el-form :model="illegalForm" :rules="illegalRules" ref="illegalForm" label-width="100px">
|
||||
<div class="title">机动车报废信息查询</div>
|
||||
<el-form :model="illegalForm" label-position="left" :rules="illegalRules" ref="illegalForm" label-width="120px">
|
||||
<el-form-item label="号牌种类" prop="species">
|
||||
<el-select v-model="speciesValue" placeholder="请选择" class="inbox">
|
||||
<el-select v-model="speciesValue" placeholder="请选择号牌种类" class="inbox">
|
||||
<el-option
|
||||
v-for="item in speciesOptions"
|
||||
:key="item.value"
|
||||
@ -13,7 +13,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="号牌号码" prop="number">
|
||||
<el-select v-model="numberValue" placeholder="" class="queryBox">
|
||||
<el-select v-model="numberValue" placeholder="请输入号牌号码" class="queryBox">
|
||||
<el-option
|
||||
v-for="item in numberOptions"
|
||||
:key="item.value"
|
||||
@ -21,13 +21,13 @@
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input type="text" v-model="illegalForm.number" class="numberBox"></el-input>
|
||||
<el-input type="text" v-model="illegalForm.number" class="numberBox" placeholder="请输入号牌号码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="发动机后六位" prop="lastsix">
|
||||
<el-input type="text" v-model="illegalForm.lastsix" class="inbox"></el-input>
|
||||
<el-input type="text" v-model="illegalForm.lastsix" class="inbox" placeholder="请输入发动机后六位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input type="text" v-model="illegalForm.code" class="inbox"></el-input>
|
||||
<el-form-item label="请输入登录密码" prop="code">
|
||||
<el-input type="password" v-model="illegalForm.code" class="inbox" placeholder="请输入登录密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('')">查询</el-button>
|
||||
@ -64,38 +64,38 @@
|
||||
code:''
|
||||
},
|
||||
speciesOptions: [{
|
||||
value: '选项1',
|
||||
value: '大型汽车',
|
||||
label: '大型汽车'
|
||||
}, {
|
||||
value: '选项2',
|
||||
value: '小型汽车',
|
||||
label: '小型汽车'
|
||||
}, {
|
||||
value: '选项3',
|
||||
value: '教练汽车',
|
||||
label: '教练汽车'
|
||||
}, {
|
||||
value: '选项4',
|
||||
value: '教练摩托车',
|
||||
label: '教练摩托车'
|
||||
}, {
|
||||
value: '选项5',
|
||||
value: '大型新能源汽车',
|
||||
label: '大型新能源汽车'
|
||||
},{
|
||||
value: '选项6',
|
||||
value: '小型新能源汽车',
|
||||
label: '小型新能源汽车'
|
||||
}],
|
||||
numberOptions: [{
|
||||
value: '选项1',
|
||||
value: '京',
|
||||
label: '京'
|
||||
}, {
|
||||
value: '选项2',
|
||||
value: '津',
|
||||
label: '津'
|
||||
}, {
|
||||
value: '选项3',
|
||||
value: '沪',
|
||||
label: '沪'
|
||||
}, {
|
||||
value: '选项4',
|
||||
value: '渝',
|
||||
label: '渝'
|
||||
}, {
|
||||
value: '选项5',
|
||||
value: '鲁',
|
||||
label: '鲁'
|
||||
}],
|
||||
speciesValue: '',
|
||||
@ -115,25 +115,78 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
submitForm() {
|
||||
if (this.speciesValue === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '号牌种类不能为空'
|
||||
})
|
||||
} else if ( this.numberValue === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '号牌号码不能为空'
|
||||
})
|
||||
} else if ( this.illegalForm.number === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '号牌号码不能为空'
|
||||
})
|
||||
} else if ( this.illegalForm.lastsix === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '发动机号不能为空'
|
||||
})
|
||||
} else if ( this.illegalForm.code === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '登录密码不能为空'
|
||||
})
|
||||
} else if (this.illegalForm.code === JSON.parse(sessionStorage.getItem("userInfo")).user_password) {
|
||||
this.$ajax.post("/traffic/getIllegalInfo",{status:"1",plateType: this.speciesValue,
|
||||
numberPlate: this.numberValue+" "+this.illegalForm.number,engineNumber: this.illegalForm.lastsix},
|
||||
r=>{
|
||||
if (r.length === 0) {
|
||||
this.$message.error("网络异常，请稍后再试")
|
||||
} else if (r[0].scrap_time === ''){
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "该车辆暂无报废记录"
|
||||
})
|
||||
} else {
|
||||
this.$alert(`号牌种类：${r[0].plate_type} 号牌号码：${r[0].number_plate}的车辆报废时间是${r[0].scrap_time}`, '机动车报废信息', {
|
||||
confirmButtonText: '确定',
|
||||
});
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error("登录密码不正确");
|
||||
}
|
||||
},
|
||||
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
resetForm() {
|
||||
this.speciesValue = '';
|
||||
this.numberValue = '';
|
||||
this.illegalForm.number = '';
|
||||
this.illegalForm.lastsix = '';
|
||||
this.illegalForm.code = '';
|
||||
this.numberValue = '';
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.illegal .title{
|
||||
padding: 0 1rem 1rem 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.illegal{
|
||||
background: #FFFFFF;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.el-form {
|
||||
width:50rem;
|
||||
}
|
||||
|
||||
@ -73,6 +73,9 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.guide{
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.el-tree {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
@ -22,55 +22,97 @@
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="gridTitle">
|
||||
<div class="announce">信息公告<br>—————————————————————</div>
|
||||
<div class="information">交通资讯<br>—————————————————————</div>
|
||||
<div class="information">警示教育<br>—————————————————————</div>
|
||||
<div class="tab">
|
||||
<div class="one">
|
||||
<div class="title">信息公告</div>
|
||||
<div class="list">
|
||||
<div class="list-one pointer special-them-blue" v-for="item in newestNotice" @click="getContent(item)">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="one">
|
||||
<div class="title">交通资讯</div>
|
||||
<div class="list">
|
||||
<div class="list-one pointer special-them-blue" v-for="item in goodAdvice" @click="getContent(item)">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="one">
|
||||
<div class="title">警示教育</div>
|
||||
<div class="list">
|
||||
<div class="list-one pointer special-them-blue" v-for="item in magicalThinking" @click="getContent(item)">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="60" class="gridContent">
|
||||
<el-col :span="8" class="grid-first">
|
||||
<div class="grid-content">
|
||||
<el-link href="">机动车号牌旧牌未收回作废公告</el-link><br/>
|
||||
<el-link href="">机动车登记证书旧证书未收回作废公告</el-link><br/>
|
||||
<el-link href="">机动车号牌未收回作废公告</el-link><br/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="grid-second">
|
||||
<div class="grid-content">
|
||||
<el-link href="">5月9日至5月15日出行提示</el-link><br/>
|
||||
<el-link href="">关于对本市部分检测场因降雨暂停验车的通知</el-link><br/>
|
||||
<el-link href="">疫情期间未按时验车会被处罚吗？</el-link><br/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="grid-other">
|
||||
<div class="grid-content">
|
||||
<el-link href="">我怎么多了几起违法记录？不是我开的呀！</el-link><br/>
|
||||
<el-link href="">12万快递小哥同上“交通安全课”</el-link><br/>
|
||||
<el-link href="">“车辆进入东城区××停车场”，车主：我在家呢啊！</el-link><br/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data() {
|
||||
return{
|
||||
newestNotice: [],
|
||||
goodAdvice: [],
|
||||
magicalThinking: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getName();
|
||||
this.getAll();
|
||||
},
|
||||
methods:{
|
||||
getName() {
|
||||
this.$ajax.post("/traffic/login",{},r=>{
|
||||
console.log(r)
|
||||
getAll() {
|
||||
this.$ajax.post("/traffic/getAllContent",{},r=>{
|
||||
this.newestNotice = r.schoolNoticeList.slice(0,6);
|
||||
this.goodAdvice = r.parentAdvice.slice(0,6);
|
||||
this.magicalThinking = r.studentThinking.slice(0,6);
|
||||
})
|
||||
},
|
||||
getContent(one) {
|
||||
this.$router.push({
|
||||
name: 'noticecontent'
|
||||
});
|
||||
sessionStorage.setItem("noticeContent",JSON.stringify(one));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.one .title{
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.one .list{
|
||||
padding: 0.5rem 1rem 1rem 1rem;
|
||||
}
|
||||
.list .list-one{
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.tab{
|
||||
display: flex;
|
||||
width: 80%;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
.tab .one{
|
||||
border-radius: 5px;
|
||||
flex: 1;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.tab .one:nth-child(2){
|
||||
margin: 0 1rem;
|
||||
}
|
||||
.change {
|
||||
margin-top: 4rem;
|
||||
border-radius: 5px;
|
||||
padding-top: 3rem;
|
||||
background: #fff;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.el-carousel {
|
||||
width: 90rem;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="illprocess">
|
||||
<h2>违章行为处理</h2>
|
||||
<el-form :model="illegalForm" :rules="illegalRules" ref="illegalForm" label-width="100px">
|
||||
<div class="title">机动车违章行为处理</div>
|
||||
<el-form :model="illegalForm" label-position="left" :rules="illegalRules" ref="illegalForm" label-width="100px">
|
||||
<el-form-item label="处罚书编号" prop="num">
|
||||
<el-input type="text" v-model="illegalForm.num" class="inbox"></el-input>
|
||||
<el-input type="text" v-model="illegalForm.num" class="inbox" placeholder="请输入处罚书编号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="号牌号码" prop="number">
|
||||
<el-select v-model="numberValue" placeholder="" class="queryBox">
|
||||
<el-select v-model="numberValue" placeholder="请输入" class="queryBox">
|
||||
<el-option
|
||||
v-for="item in numberOptions"
|
||||
:key="item.value"
|
||||
@ -14,23 +14,35 @@
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input type="text" v-model="illegalForm.number" class="numberBox"></el-input>
|
||||
<el-input type="text" v-model="illegalForm.number" class="numberBox" placeholder="请输入号牌号码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="发动机号" prop="serial">
|
||||
<el-input type="text" v-model="illegalForm.serial" class="inbox"></el-input>
|
||||
<el-input type="text" v-model="illegalForm.serial" class="inbox" placeholder="请输入发动机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input type="text" v-model="illegalForm.phone" class="inbox"></el-input>
|
||||
<el-input type="text" v-model="illegalForm.phone" class="inbox" placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('')">处理</el-button>
|
||||
<el-button @click="resetForm('')">重置</el-button>
|
||||
<el-button type="primary" @click="submitForm">处理</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible1"
|
||||
width="30%">
|
||||
<div id="qrcode" ></div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="submit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from "qrcodejs2"
|
||||
export default {
|
||||
data() {
|
||||
let numValidate = (rule, value, callback) => {
|
||||
@ -57,6 +69,9 @@
|
||||
};
|
||||
|
||||
return {
|
||||
one: '',
|
||||
link: '',
|
||||
dialogVisible1: false,
|
||||
illegalForm: {
|
||||
num: '',
|
||||
number: '',
|
||||
@ -65,19 +80,19 @@
|
||||
},
|
||||
|
||||
numberOptions: [{
|
||||
value: '选项1',
|
||||
value: '京',
|
||||
label: '京'
|
||||
}, {
|
||||
value: '选项2',
|
||||
value: '津',
|
||||
label: '津'
|
||||
}, {
|
||||
value: '选项3',
|
||||
value: '沪',
|
||||
label: '沪'
|
||||
}, {
|
||||
value: '选项4',
|
||||
value: '渝',
|
||||
label: '渝'
|
||||
}, {
|
||||
value: '选项5',
|
||||
value: '鲁',
|
||||
label: '鲁'
|
||||
}],
|
||||
|
||||
@ -98,11 +113,115 @@
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.illegalForm.num = '';
|
||||
this.illegalForm.number = '';
|
||||
this.illegalForm.serial = '';
|
||||
this.illegalForm.phone = '';
|
||||
this.numberValue = '';
|
||||
},
|
||||
cancel() {
|
||||
location.reload()
|
||||
},
|
||||
submit() {
|
||||
this.$ajax.post("/traffic/handle",{id: this.one.id},r=>{
|
||||
if (r === '0') {
|
||||
this.$message.error("网络异常，请稍后再试")
|
||||
} else {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '处理成功'
|
||||
});
|
||||
setTimeout(()=>{location.reload()},500);
|
||||
}
|
||||
})
|
||||
},
|
||||
submitForm() {
|
||||
if (this.illegalForm.num === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: "处罚书编号不能为空"
|
||||
})
|
||||
} else if (this.numberValue === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: "号牌号码不能为空"
|
||||
})
|
||||
} else if (this.illegalForm.number === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: "号牌号码不能为空"
|
||||
})
|
||||
} else if (this.illegalForm.serial === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: "发动机号不能为空"
|
||||
})
|
||||
} else if (this.illegalForm.phone === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: "手机号不能为空"
|
||||
})
|
||||
} else {
|
||||
this.$ajax.post("/traffic/illegalTreatment",{number:this.illegalForm.num,
|
||||
numberPlate:this.numberValue+this.illegalForm.number,engine:this.illegalForm.serial,
|
||||
mobile:this.illegalForm.phone},r=>{
|
||||
if (r.length === 0) {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '没有该违章记录'
|
||||
})
|
||||
} else if (r[0].status === '1') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '该违章记录已处理'
|
||||
})
|
||||
} else {
|
||||
this.one = r[0];
|
||||
this.link = r[0].content;
|
||||
this.dialogVisible1 = true;
|
||||
this.$nextTick (function () {
|
||||
this.qrcode();
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 生成二维码
|
||||
qrcode () {
|
||||
let that = this;
|
||||
let qrcode = new QRCode('qrcode', {
|
||||
width: 124,
|
||||
height: 124, // 高度
|
||||
text: this.link, // 二维码内容
|
||||
// render: 'table' , // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
|
||||
// background: '#f0f', // 背景色
|
||||
// foreground: '#ff0' // 前景色
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
components: { QRCode }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#qrcode{
|
||||
width: 124px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.illprocess .title{
|
||||
padding: 0 1rem 1rem 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.illprocess{
|
||||
background: #FFFFFF;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.el-form {
|
||||
width:50rem;
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="illegal">
|
||||
<h2>机动车违章信息查询</h2>
|
||||
<el-form :model="illegalForm" :rules="illegalRules" ref="illegalForm" label-width="100px">
|
||||
<div class="title">机动车违章信息查询</div>
|
||||
<el-form :model="illegalForm" label-position="left" :rules="illegalRules" ref="illegalForm" label-width="120px">
|
||||
<el-form-item label="号牌种类" prop="species">
|
||||
<el-select v-model="speciesValue" placeholder="请选择" class="inbox">
|
||||
<el-select v-model="speciesValue" placeholder="请选择号牌种类" class="inbox">
|
||||
<el-option
|
||||
v-for="item in speciesOptions"
|
||||
:key="item.value"
|
||||
@ -13,7 +13,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="号牌号码" prop="number">
|
||||
<el-select v-model="numberValue" placeholder="" class="queryBox">
|
||||
<el-select v-model="numberValue" placeholder="请输入号牌号码" class="queryBox">
|
||||
<el-option
|
||||
v-for="item in numberOptions"
|
||||
:key="item.value"
|
||||
@ -21,19 +21,49 @@
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input type="text" v-model="illegalForm.number" class="numberBox"></el-input>
|
||||
<el-input type="text" v-model="illegalForm.number" class="numberBox" placeholder="请输入号牌号码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="发动机后六位" prop="lastsix">
|
||||
<el-input type="text" v-model="illegalForm.lastsix" class="inbox"></el-input>
|
||||
<el-input type="text" v-model="illegalForm.lastsix" class="inbox" placeholder="请输入发动机后六位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input type="text" v-model="illegalForm.code" class="inbox"></el-input>
|
||||
<el-form-item label="请输入登录密码" prop="code">
|
||||
<el-input type="password" v-model="illegalForm.code" class="inbox" placeholder="请输入登录密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('')">查询</el-button>
|
||||
<el-button @click="resetForm('')">重置</el-button>
|
||||
<el-button type="primary" @click="submitForm">查询</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-dialog
|
||||
title="机动车违章信息"
|
||||
:visible.sync="dialogVisible2"
|
||||
width="60%">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div class="number-plate">号牌号码</div>
|
||||
<div class="plate-type">号牌种类</div>
|
||||
<div class="engine-number">发动机号</div>
|
||||
<div class="mobile">手机号</div>
|
||||
<div class="content">处罚信息</div>
|
||||
<div class="number">处罚书编号</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="one" v-for="item in list">
|
||||
<div class="number-plate">{{item.number_plate}}</div>
|
||||
<div class="plate-type">{{item.plate_type}}</div>
|
||||
<div class="engine-number">{{item.engine_number}}</div>
|
||||
<div class="mobile">{{item.mobile}}</div>
|
||||
<div class="content">{{item.content}}</div>
|
||||
<div class="number">{{item.number}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible2 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -57,6 +87,17 @@
|
||||
};
|
||||
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
number_plate: '',
|
||||
plate_type: '',
|
||||
engine_number: '',
|
||||
mobile: '',
|
||||
content: '',
|
||||
number: '',
|
||||
}
|
||||
],
|
||||
dialogVisible2: false,
|
||||
illegalForm: {
|
||||
species:'',
|
||||
number:'',
|
||||
@ -64,38 +105,38 @@
|
||||
code:''
|
||||
},
|
||||
speciesOptions: [{
|
||||
value: '选项1',
|
||||
value: '大型汽车',
|
||||
label: '大型汽车'
|
||||
}, {
|
||||
value: '选项2',
|
||||
value: '小型汽车',
|
||||
label: '小型汽车'
|
||||
}, {
|
||||
value: '选项3',
|
||||
value: '教练汽车',
|
||||
label: '教练汽车'
|
||||
}, {
|
||||
value: '选项4',
|
||||
value: '教练摩托车',
|
||||
label: '教练摩托车'
|
||||
}, {
|
||||
value: '选项5',
|
||||
value: '大型新能源汽车',
|
||||
label: '大型新能源汽车'
|
||||
},{
|
||||
value: '选项6',
|
||||
value: '小型新能源汽车',
|
||||
label: '小型新能源汽车'
|
||||
}],
|
||||
numberOptions: [{
|
||||
value: '选项1',
|
||||
value: '京',
|
||||
label: '京'
|
||||
}, {
|
||||
value: '选项2',
|
||||
value: '津',
|
||||
label: '津'
|
||||
}, {
|
||||
value: '选项3',
|
||||
value: '沪',
|
||||
label: '沪'
|
||||
}, {
|
||||
value: '选项4',
|
||||
value: '渝',
|
||||
label: '渝'
|
||||
}, {
|
||||
value: '选项5',
|
||||
value: '鲁',
|
||||
label: '鲁'
|
||||
}],
|
||||
speciesValue: '',
|
||||
@ -105,7 +146,8 @@
|
||||
{ validator: plateValidate, trigger: 'blur' }
|
||||
],
|
||||
lastsix: [
|
||||
{ validator: numberValidate, trigger: 'blur' }
|
||||
{ validator: numberValidate, trigger: 'blur' },
|
||||
{ min: 6, max: 6, message: '请输入正确格式', trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ validator: checkValidate, trigger: 'blur' }
|
||||
@ -115,25 +157,105 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
submitForm() {
|
||||
if (this.speciesValue === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '号牌种类不能为空'
|
||||
})
|
||||
} else if ( this.numberValue === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '号牌号码不能为空'
|
||||
})
|
||||
} else if ( this.illegalForm.number === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '号牌号码不能为空'
|
||||
})
|
||||
} else if ( this.illegalForm.lastsix === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '发动机号不能为空'
|
||||
})
|
||||
} else if ( this.illegalForm.code === '') {
|
||||
this.$message({
|
||||
type:'warning',
|
||||
message: '登录密码不能为空'
|
||||
})
|
||||
} else if (this.illegalForm.code === JSON.parse(sessionStorage.getItem("userInfo")).user_password) {
|
||||
this.$ajax.post("/traffic/getIllegalInfo",{plateType: this.speciesValue,
|
||||
numberPlate: this.numberValue+this.illegalForm.number,engineNumber: this.illegalForm.lastsix},
|
||||
r=>{
|
||||
this.list = r;
|
||||
this.dialogVisible2 = true;
|
||||
})
|
||||
} else {
|
||||
this.$message.error("登录密码不正确");
|
||||
}
|
||||
},
|
||||
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
resetForm() {
|
||||
this.speciesValue = '';
|
||||
this.numberValue = '';
|
||||
this.illegalForm.number = '';
|
||||
this.illegalForm.lastsix = '';
|
||||
this.illegalForm.code = '';
|
||||
this.numberValue = '';
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list .one{
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
}
|
||||
.one .content{
|
||||
text-align: left;
|
||||
text-indent: 1rem;
|
||||
}
|
||||
.content{
|
||||
text-align: center;
|
||||
}
|
||||
.number-plate{
|
||||
flex: 1;
|
||||
}
|
||||
.plate-type{
|
||||
flex: 1;
|
||||
}
|
||||
.engine-number{
|
||||
flex: 1;
|
||||
}
|
||||
.mobile{
|
||||
flex: 1;
|
||||
}
|
||||
.content{
|
||||
flex: 3;
|
||||
}
|
||||
.number{
|
||||
flex: 1;
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding: 3rem!important;
|
||||
}
|
||||
.content .header{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
}
|
||||
.illegal .title{
|
||||
padding: 0 1rem 1rem 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.illegal{
|
||||
background: #FFFFFF;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.el-form {
|
||||
width:50rem;
|
||||
}
|
||||
|
||||
@ -2,11 +2,16 @@
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class = 'header'>
|
||||
|
||||
<el-button class="registerButton" type="text" @click='userRegister'>用户注册</el-button>
|
||||
|
||||
<div class="login" v-if="!isLogin">
|
||||
<div class="registerButton pointer" @click='userRegister'>用户注册</div>
|
||||
<div class="pointer" @click='userLogon'>个人登录</div>
|
||||
</div>
|
||||
<div class="is-login" v-if="isLogin">
|
||||
<div class="personal pointer">{{userInfo === '' ? '' : userInfo.real_name}}</div>
|
||||
<div class="pointer" @click="cancellation">注销</div>
|
||||
</div>
|
||||
<el-dialog :visible.sync='dialogRegisterVisible' width="600px" height="400px">
|
||||
<el-form :model="registerForm" :rules="registerRules" ref="registerForm" label-width="100px">
|
||||
<el-form :model="registerForm" label-position="left" :rules="registerRules" ref="registerForm" label-width="100px">
|
||||
<el-form-item label="用户名" prop="name">
|
||||
<el-input type="text" v-model="registerForm.name"></el-input>
|
||||
</el-form-item>
|
||||
@ -25,11 +30,8 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
<el-button type="text" @click='userLogon'>个人登录</el-button>
|
||||
|
||||
<el-dialog :visible.sync='dialogLogonVisible' width="400px" height="300px">
|
||||
<el-form :model="logonForm" :rules="logonRules" ref="logonForm" label-width="100px">
|
||||
<el-dialog :visible.sync='dialogLogonVisible' width="600px" height="400px">
|
||||
<el-form :model="logonForm" label-position="left" :rules="logonRules" ref="logonForm" label-width="100px">
|
||||
<el-form-item label="用户名" prop="name">
|
||||
<el-input type="text" v-model="logonForm.name"></el-input>
|
||||
</el-form-item>
|
||||
@ -37,7 +39,7 @@
|
||||
<el-input type="password" v-model="logonForm.pass"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitLogon(logonForm)">登录</el-button>
|
||||
<el-button type="primary" @click="submitLogon()">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
@ -48,8 +50,8 @@
|
||||
<el-menu-item index="/index/homepage">首页</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">业务中心</template>
|
||||
<el-menu-item index="/index/illprocess">违章处理业务</el-menu-item>
|
||||
<el-menu-item index="/index/illquery">违章信息查询</el-menu-item>
|
||||
<el-menu-item index="/index/illquery">机动车违章信息查询</el-menu-item>
|
||||
<el-menu-item index="/index/illprocess">机动车违章处理业务</el-menu-item>
|
||||
<el-menu-item index="/index/disquery">机动车报废查询</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
@ -61,17 +63,11 @@
|
||||
<el-menu-item index="/index/guide">办事指南</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<router-view/>
|
||||
</el-header>
|
||||
|
||||
<el-main>
|
||||
|
||||
<router-view/>
|
||||
</el-main>
|
||||
|
||||
<el-footer>
|
||||
|
||||
</el-footer>
|
||||
|
||||
<el-footer></el-footer>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
@ -117,9 +113,10 @@ export default {
|
||||
};
|
||||
|
||||
return {
|
||||
isLogin: false,
|
||||
userInfo: '',
|
||||
dialogRegisterVisible:false,
|
||||
dialogLogonVisible:false,
|
||||
|
||||
registerForm: {
|
||||
name:'',
|
||||
pass: '',
|
||||
@ -157,9 +154,37 @@ export default {
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.isLogin1();
|
||||
},
|
||||
methods: {
|
||||
|
||||
cancellation() {
|
||||
this.$confirm('确认注销？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
sessionStorage.setItem("userInfo",'');
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '注销成功'
|
||||
});
|
||||
location.reload()
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消注销'
|
||||
});
|
||||
});
|
||||
},
|
||||
isLogin1() {
|
||||
if (sessionStorage.getItem("userInfo") === '') {
|
||||
this.isLogin = false;
|
||||
} else {
|
||||
this.isLogin = true;
|
||||
this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
|
||||
}
|
||||
},
|
||||
userRegister(){
|
||||
this.dialogRegisterVisible = true;
|
||||
},
|
||||
@ -186,9 +211,12 @@ export default {
|
||||
},
|
||||
|
||||
//用户登录
|
||||
submitLogon(formName){
|
||||
this.$ajax.post("/traffic/logon",{formName},r=>{
|
||||
debugger
|
||||
submitLogon(){
|
||||
this.$ajax.post("/traffic/logon",{name:this.logonForm.name,pass:this.logonForm.pass},r=>{
|
||||
sessionStorage.setItem("userInfo",JSON.stringify(r[0]));
|
||||
this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
|
||||
this.dialogLogonVisible = false;
|
||||
this.isLogin = true;
|
||||
})
|
||||
},
|
||||
|
||||
@ -201,8 +229,28 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
.personal{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.el-form{
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding: 3rem 5rem!important;
|
||||
}
|
||||
.login, .is-login{
|
||||
display: flex;
|
||||
float: right;
|
||||
color: #999999;
|
||||
}
|
||||
.el-main div{
|
||||
border-radius: 5px;
|
||||
}
|
||||
.el-container{
|
||||
height:50rem;
|
||||
min-height: 100%;
|
||||
background: linear-gradient(#cee6e6, #f4fafa)
|
||||
}
|
||||
|
||||
@ -212,11 +260,11 @@ export default {
|
||||
}
|
||||
|
||||
.registerButton{
|
||||
margin-left:108rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.menu{
|
||||
height:4rem;
|
||||
width: %
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,25 @@
|
||||
<template>
|
||||
<div class="leaveinfo">
|
||||
<div class="message-list">
|
||||
<div class="message-one" v-for="item in messageList">
|
||||
<div class="message-content">{{item.content}}</div>
|
||||
<div class="author">
|
||||
<span class="name">{{item.real_name}}</span>
|
||||
<span class="time">{{item.create_time}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea">
|
||||
</el-input>
|
||||
<div class="input">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea">
|
||||
</el-input>
|
||||
</div>
|
||||
<el-button type="primary" @click="submitMessage">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -15,15 +28,72 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea: ''
|
||||
textarea: '',
|
||||
messageList: [],
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getLeaveMessage();
|
||||
},
|
||||
methods: {
|
||||
submitMessage() {
|
||||
this.$ajax.post("/traffic/insertLeaveMessage",{content:this.textarea,
|
||||
createId: JSON.parse(sessionStorage.getItem("userInfo")).user_id},r=>{
|
||||
if (r === 1) {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: "留言成功"
|
||||
})
|
||||
this.getLeaveMessage();
|
||||
this.textarea = '';
|
||||
} else {
|
||||
this.$message.error("网络异常，请稍后再试")
|
||||
}
|
||||
})
|
||||
},
|
||||
getLeaveMessage() {
|
||||
this.$ajax.post("/traffic/getLeaveMessage",{},r=>{
|
||||
this.messageList = r;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.author span:nth-child(1){
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.author{
|
||||
float: right;
|
||||
font-size: 0.9rem;
|
||||
color: #999999;
|
||||
}
|
||||
.message-one{
|
||||
padding: 1rem 0 1.5rem 0;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
}
|
||||
.message-content{
|
||||
padding: 0!important;
|
||||
margin: 0!important;
|
||||
}
|
||||
.leaveinfo{
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.message-list{
|
||||
padding: 1rem;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.content {
|
||||
margin-top: 2rem;
|
||||
width:31.25rem
|
||||
}
|
||||
.input{
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.content .el-button{
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,29 +1,56 @@
|
||||
<template>
|
||||
<div class="plate">
|
||||
<h2>新车登记预选号牌</h2>
|
||||
<el-form :model="plateForm" :rules="plateRules" ref="plateForm" label-width="100px">
|
||||
<el-form-item label="选择城市">
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="citis"
|
||||
:props="{ expandTrigger: 'hover' }"
|
||||
@change="handleChange">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆品牌" prop="logo">
|
||||
<el-input type="text" v-model="plateForm.logo"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="合格编号" prop="number">
|
||||
<el-input type="text" v-model="plateForm.number"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆型号" prop="size">
|
||||
<el-input type="text" v-model="plateForm.size"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('registerForm')">确认</el-button>
|
||||
<el-button @click="resetForm('registerForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="left">
|
||||
<div class="title">新车登记预选号牌</div>
|
||||
<el-form :model="plateForm" label-position="left" :rules="plateRules" ref="plateForm" label-width="100px">
|
||||
<el-form-item label="选择城市">
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="citis"
|
||||
:props="{ expandTrigger: 'hover' }"
|
||||
@change="handleChange">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<div class="plate-number">
|
||||
<el-radio v-model="plateNumber" :label="item" :key="item" border v-for="item in plateNumbers"></el-radio>
|
||||
</div>
|
||||
<el-form-item label="车辆品牌" prop="logo">
|
||||
<el-input type="text" v-model="plateForm.logo" placeholder="请输入车辆品牌"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="合格编号" prop="number">
|
||||
<el-input type="text" v-model="plateForm.number" placeholder="请输入合格编号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆型号" prop="size">
|
||||
<el-select v-model="plateForm.size" placeholder="请输入车辆型号">
|
||||
<el-option value="载货汽车">载货汽车</el-option>
|
||||
<el-option value="越野汽车">越野汽车</el-option>
|
||||
<el-option value="自卸汽车">自卸汽车</el-option>
|
||||
<el-option value="牵引汽车">牵引汽车</el-option>
|
||||
<el-option value="专用汽车">专用汽车</el-option>
|
||||
<el-option value=" 客 车 "> 客 车 </el-option>
|
||||
<el-option value=" 轿 车 "> 轿 车 </el-option>
|
||||
<el-option value=" 未 用 "> 未 用 </el-option>
|
||||
<el-option value="半挂车及专用半挂车">半挂车及专用半挂车</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">确认</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
近期挂牌信息
|
||||
</div>
|
||||
<el-carousel height="200px" direction="vertical" :autoplay="true">
|
||||
<el-carousel-item v-for="item in plateList" :key="item.id">
|
||||
<div class="plate">{{item.plate_number}}</div>
|
||||
<div class="name">{{item.real_name}}</div>
|
||||
<div class="time">{{item.create_time}}</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -48,69 +75,75 @@
|
||||
};
|
||||
|
||||
return {
|
||||
plateList: [],
|
||||
plateNumbers: [],
|
||||
plateNumber: '',
|
||||
value: [],
|
||||
citis: [{
|
||||
value: 'beijing',
|
||||
citis: [
|
||||
{
|
||||
value: '北京',
|
||||
label: '北京',
|
||||
}, {
|
||||
value: 'tianjin',
|
||||
},
|
||||
{
|
||||
value: '天津',
|
||||
label: '天津',
|
||||
}, {
|
||||
value: 'shanghai',
|
||||
},
|
||||
{
|
||||
value: '上海',
|
||||
label: '上海',
|
||||
},{
|
||||
value: 'chongqing',
|
||||
},{
|
||||
value: '重庆',
|
||||
label: '重庆',
|
||||
},{
|
||||
value: 'shandong',
|
||||
value: '山东',
|
||||
label: '山东',
|
||||
children: [{
|
||||
value: 'jinan',
|
||||
value: '济南市',
|
||||
label: '济南市'
|
||||
}, {
|
||||
value: 'qingdao',
|
||||
value: '青岛市',
|
||||
label: '青岛市'
|
||||
}, {
|
||||
value: 'rizhao',
|
||||
value: '日照市',
|
||||
label: '日照市'
|
||||
}, {
|
||||
value: 'zibo',
|
||||
value: '淄博市',
|
||||
label: '淄博市'
|
||||
}, {
|
||||
value: 'zaozhuang',
|
||||
value: '枣庄市',
|
||||
label: '枣庄市'
|
||||
}, {
|
||||
value: 'dongying',
|
||||
value: '东营市',
|
||||
label: '东营市'
|
||||
}, {
|
||||
value: 'yantai',
|
||||
value: '烟台市',
|
||||
label: '烟台市'
|
||||
}, {
|
||||
value: 'weifang',
|
||||
value: '潍坊市',
|
||||
label: '潍坊市'
|
||||
}, {
|
||||
value: 'jining',
|
||||
value: '济宁市',
|
||||
label: '济宁市'
|
||||
}, {
|
||||
value: 'taian',
|
||||
value: '泰安市',
|
||||
label: '泰安市'
|
||||
}, {
|
||||
value: 'weihai',
|
||||
value: '威海市',
|
||||
label: '威海市'
|
||||
}, {
|
||||
value: 'linyi',
|
||||
value: '临沂市',
|
||||
label: '临沂市'
|
||||
}, {
|
||||
value: 'dezhou',
|
||||
value: '德州市',
|
||||
label: '德州市'
|
||||
}, {
|
||||
value: 'liaocheng',
|
||||
value: '聊城市',
|
||||
label: '聊城市'
|
||||
}, {
|
||||
value: 'binzhou',
|
||||
value: '滨州市',
|
||||
label: '滨州市'
|
||||
}, {
|
||||
value: 'heze',
|
||||
value: '菏泽市',
|
||||
label: '菏泽市'
|
||||
}, ]
|
||||
}],
|
||||
@ -134,30 +167,154 @@
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getPlateInfo();
|
||||
},
|
||||
methods: {
|
||||
getPlateInfo() {
|
||||
this.$ajax.post("/traffic/selectPlateInfo",{},r=>{
|
||||
this.plateList = r;
|
||||
})
|
||||
},
|
||||
getPlateNumber(address) {
|
||||
let plate = '';
|
||||
switch (address) {
|
||||
case "北京" : plate = "京A·";break;
|
||||
case "天津" : plate = "津A·";break;
|
||||
case "重庆" : plate = "渝A·";break;
|
||||
case "上海" : plate = "沪A·";break;
|
||||
case "济南市" : plate = "鲁A·";break;
|
||||
case "青岛市" : plate = "鲁B·";break;
|
||||
case "日照市" : plate = "鲁L·";break;
|
||||
case "淄博市" : plate = "鲁C·";break;
|
||||
case "枣庄市" : plate = "鲁D·";break;
|
||||
case "东营市" : plate = "鲁E·";break;
|
||||
case "烟台市" : plate = "鲁F·";break;
|
||||
case "潍坊市" : plate = "鲁G·";break;
|
||||
case "济宁市" : plate = "鲁H·";break;
|
||||
case "泰安市" : plate = "鲁J·";break;
|
||||
case "威海市" : plate = "鲁K·";break;
|
||||
case "临沂市" : plate = "鲁Q·";break;
|
||||
case "德州市" : plate = "鲁N·";break;
|
||||
case "聊城市" : plate = "鲁P·";break;
|
||||
case "滨州市" : plate = "鲁M·";break;
|
||||
case "菏泽市" : plate = "鲁R·";break;
|
||||
default: ;
|
||||
}
|
||||
return plate;
|
||||
},
|
||||
getRandom() {
|
||||
let plateNumber = '';
|
||||
let codeChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G',
|
||||
'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
|
||||
'W', 'X', 'Y', 'Z'];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
let index= Math.floor(Math.random()*36);
|
||||
plateNumber += codeChars[index];
|
||||
}
|
||||
return plateNumber;
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
if (value[1] === '' || value[1] === undefined) {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '暂时只能为山东地区开放，其他地区敬请开放'
|
||||
})
|
||||
} else {
|
||||
let plateList = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
let one = this.getPlateNumber(value[1])+this.getRandom();
|
||||
plateList.push(one)
|
||||
}
|
||||
});
|
||||
this.plateNumbers = plateList;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
submitForm() {
|
||||
if (this.plateNumber === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '号牌号码不能为空'
|
||||
})
|
||||
} else if (this.plateForm.logo === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '车辆品牌不能为空'
|
||||
})
|
||||
} else if (this.plateForm.number === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '合格编号不能为空'
|
||||
})
|
||||
} else if (this.plateForm.size === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '车辆型号不能为空'
|
||||
})
|
||||
} else {
|
||||
this.$ajax.post("/traffic/insertPlateInfo",{
|
||||
createId:JSON.parse(sessionStorage.getItem("userInfo")).user_id,plateNumber:this.plateNumber,
|
||||
carBrand: this.plateForm.logo,qualifiedNo:this.plateForm.number,carSize:this.plateForm.size,
|
||||
carType:"新车"},r=>{
|
||||
if (r === 1) {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: "预选成功"
|
||||
})
|
||||
location.reload();
|
||||
} else {
|
||||
this.$message.error("网络异常，请稍后再试")
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
resetForm() {
|
||||
this.value = '';
|
||||
this.plateForm.logo = '';
|
||||
this.plateForm.number = '';
|
||||
this.plateForm.size = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-carousel__item div{
|
||||
padding: 1rem;
|
||||
}
|
||||
.left , .right{
|
||||
width: 50%;
|
||||
}
|
||||
.el-radio:nth-child(1){
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-radio{
|
||||
margin-right: 0 !important;
|
||||
width: 47%;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.plate-number{
|
||||
overflow: auto;
|
||||
height: 10rem;
|
||||
border: 1px solid #EEEEEE;
|
||||
margin-bottom: 1rem;
|
||||
width: 36rem;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.plate .title{
|
||||
padding: 0 1rem 1rem 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.plate{
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.el-input {
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
27
traffic-front/src/components/NoData.vue
Normal file
27
traffic-front/src/components/NoData.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-main>
|
||||
<img src="../assets/img/no-data.png" height="200" width="200"/>
|
||||
<div class="nodata">
|
||||
暂无数据
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NoData"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-main img{
|
||||
display: block;
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
.nodata{
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
49
traffic-front/src/components/NoticeContent.vue
Normal file
49
traffic-front/src/components/NoticeContent.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div id="content">
|
||||
<div class="title">{{noticeContent.title}}</div>
|
||||
<div class="author">{{noticeContent.real_name}} {{noticeContent.create_time}}    </div>
|
||||
<div class="notice-content">{{noticeContent.content}}</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NoticeContent",
|
||||
data() {
|
||||
return{
|
||||
noticeContent: JSON.parse(sessionStorage.getItem("noticeContent")),
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.noticeContent)
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notice-content{
|
||||
padding: 1rem;
|
||||
}
|
||||
.author{
|
||||
padding-bottom: 0.2rem;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
color: #999999;
|
||||
}
|
||||
.title{
|
||||
padding: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
#content{
|
||||
margin: 1.5rem 20%;
|
||||
background: #FFFFFF;
|
||||
padding-bottom: 1rem;
|
||||
min-height: 30rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,29 +1,56 @@
|
||||
<template>
|
||||
<div class="plate">
|
||||
<h2>二手车过户预选号牌</h2>
|
||||
<el-form :model="plateForm" :rules="plateRules" ref="plateForm" label-width="100px">
|
||||
<el-form-item label="选择城市">
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="citis"
|
||||
:props="{ expandTrigger: 'hover' }"
|
||||
@change="handleChange">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆品牌" prop="logo">
|
||||
<el-input type="text" v-model="plateForm.logo"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="合格编号" prop="number">
|
||||
<el-input type="text" v-model="plateForm.number"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆型号" prop="size">
|
||||
<el-input type="text" v-model="plateForm.size"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('registerForm')">确认</el-button>
|
||||
<el-button @click="resetForm('registerForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="left">
|
||||
<div class="title">二手车过户预选号牌</div>
|
||||
<el-form :model="plateForm" label-position="left" :rules="plateRules" ref="plateForm" label-width="100px">
|
||||
<el-form-item label="选择城市">
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="citis"
|
||||
:props="{ expandTrigger: 'hover' }"
|
||||
@change="handleChange">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<div class="plate-number">
|
||||
<el-radio v-model="plateNumber" :label="item" :key="item" border v-for="item in plateNumbers"></el-radio>
|
||||
</div>
|
||||
<el-form-item label="车辆品牌" prop="logo">
|
||||
<el-input type="text" v-model="plateForm.logo" placeholder="请输入车辆品牌"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="合格编号" prop="number">
|
||||
<el-input type="text" v-model="plateForm.number" placeholder="请输入合格编号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆型号" prop="size">
|
||||
<el-select v-model="plateForm.size" placeholder="请输入车辆型号">
|
||||
<el-option value="载货汽车">载货汽车</el-option>
|
||||
<el-option value="越野汽车">越野汽车</el-option>
|
||||
<el-option value="自卸汽车">自卸汽车</el-option>
|
||||
<el-option value="牵引汽车">牵引汽车</el-option>
|
||||
<el-option value="专用汽车">专用汽车</el-option>
|
||||
<el-option value=" 客 车 "> 客 车 </el-option>
|
||||
<el-option value=" 轿 车 "> 轿 车 </el-option>
|
||||
<el-option value=" 未 用 "> 未 用 </el-option>
|
||||
<el-option value="半挂车及专用半挂车">半挂车及专用半挂车</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">确认</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
近期挂牌信息
|
||||
</div>
|
||||
<el-carousel height="200px" direction="vertical" :autoplay="true">
|
||||
<el-carousel-item v-for="item in plateList" :key="item.id">
|
||||
<div class="plate">{{item.plate_number}}</div>
|
||||
<div class="name">{{item.real_name}}</div>
|
||||
<div class="time">{{item.create_time}}</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -48,72 +75,78 @@
|
||||
};
|
||||
|
||||
return {
|
||||
plateList: [],
|
||||
plateNumbers: [],
|
||||
plateNumber: '',
|
||||
value: [],
|
||||
citis: [{
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
}, {
|
||||
value: 'tianjin',
|
||||
label: '天津',
|
||||
}, {
|
||||
value: 'shanghai',
|
||||
label: '上海',
|
||||
},{
|
||||
value: 'chongqing',
|
||||
label: '重庆',
|
||||
},{
|
||||
value: 'shandong',
|
||||
label: '山东',
|
||||
children: [{
|
||||
value: 'jinan',
|
||||
label: '济南市'
|
||||
}, {
|
||||
value: 'qingdao',
|
||||
label: '青岛市'
|
||||
}, {
|
||||
value: 'rizhao',
|
||||
label: '日照市'
|
||||
}, {
|
||||
value: 'zibo',
|
||||
label: '淄博市'
|
||||
}, {
|
||||
value: 'zaozhuang',
|
||||
label: '枣庄市'
|
||||
}, {
|
||||
value: 'dongying',
|
||||
label: '东营市'
|
||||
}, {
|
||||
value: 'yantai',
|
||||
label: '烟台市'
|
||||
}, {
|
||||
value: 'weifang',
|
||||
label: '潍坊市'
|
||||
}, {
|
||||
value: 'jining',
|
||||
label: '济宁市'
|
||||
}, {
|
||||
value: 'taian',
|
||||
label: '泰安市'
|
||||
}, {
|
||||
value: 'weihai',
|
||||
label: '威海市'
|
||||
}, {
|
||||
value: 'linyi',
|
||||
label: '临沂市'
|
||||
}, {
|
||||
value: 'dezhou',
|
||||
label: '德州市'
|
||||
}, {
|
||||
value: 'liaocheng',
|
||||
label: '聊城市'
|
||||
}, {
|
||||
value: 'binzhou',
|
||||
label: '滨州市'
|
||||
}, {
|
||||
value: 'heze',
|
||||
label: '菏泽市'
|
||||
}, ]
|
||||
}],
|
||||
citis: [
|
||||
{
|
||||
value: '北京',
|
||||
label: '北京',
|
||||
},
|
||||
{
|
||||
value: '天津',
|
||||
label: '天津',
|
||||
},
|
||||
{
|
||||
value: '上海',
|
||||
label: '上海',
|
||||
},{
|
||||
value: '重庆',
|
||||
label: '重庆',
|
||||
},{
|
||||
value: '山东',
|
||||
label: '山东',
|
||||
children: [{
|
||||
value: '济南市',
|
||||
label: '济南市'
|
||||
}, {
|
||||
value: '青岛市',
|
||||
label: '青岛市'
|
||||
}, {
|
||||
value: '日照市',
|
||||
label: '日照市'
|
||||
}, {
|
||||
value: '淄博市',
|
||||
label: '淄博市'
|
||||
}, {
|
||||
value: '枣庄市',
|
||||
label: '枣庄市'
|
||||
}, {
|
||||
value: '东营市',
|
||||
label: '东营市'
|
||||
}, {
|
||||
value: '烟台市',
|
||||
label: '烟台市'
|
||||
}, {
|
||||
value: '潍坊市',
|
||||
label: '潍坊市'
|
||||
}, {
|
||||
value: '济宁市',
|
||||
label: '济宁市'
|
||||
}, {
|
||||
value: '泰安市',
|
||||
label: '泰安市'
|
||||
}, {
|
||||
value: '威海市',
|
||||
label: '威海市'
|
||||
}, {
|
||||
value: '临沂市',
|
||||
label: '临沂市'
|
||||
}, {
|
||||
value: '德州市',
|
||||
label: '德州市'
|
||||
}, {
|
||||
value: '聊城市',
|
||||
label: '聊城市'
|
||||
}, {
|
||||
value: '滨州市',
|
||||
label: '滨州市'
|
||||
}, {
|
||||
value: '菏泽市',
|
||||
label: '菏泽市'
|
||||
}, ]
|
||||
}],
|
||||
|
||||
plateForm: {
|
||||
logo: '',
|
||||
@ -134,30 +167,165 @@
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getPlateInfo();
|
||||
},
|
||||
methods: {
|
||||
getPlateInfo() {
|
||||
this.$ajax.post("/traffic/selectPlateInfo",{},r=>{
|
||||
this.plateList = r;
|
||||
})
|
||||
},
|
||||
getPlateNumber(address) {
|
||||
let plate = '';
|
||||
switch (address) {
|
||||
case "北京" : plate = "京A·";break;
|
||||
case "天津" : plate = "津A·";break;
|
||||
case "重庆" : plate = "渝A·";break;
|
||||
case "上海" : plate = "沪A·";break;
|
||||
case "济南市" : plate = "鲁A·";break;
|
||||
case "青岛市" : plate = "鲁B·";break;
|
||||
case "日照市" : plate = "鲁L·";break;
|
||||
case "淄博市" : plate = "鲁C·";break;
|
||||
case "枣庄市" : plate = "鲁D·";break;
|
||||
case "东营市" : plate = "鲁E·";break;
|
||||
case "烟台市" : plate = "鲁F·";break;
|
||||
case "潍坊市" : plate = "鲁G·";break;
|
||||
case "济宁市" : plate = "鲁H·";break;
|
||||
case "泰安市" : plate = "鲁J·";break;
|
||||
case "威海市" : plate = "鲁K·";break;
|
||||
case "临沂市" : plate = "鲁Q·";break;
|
||||
case "德州市" : plate = "鲁N·";break;
|
||||
case "聊城市" : plate = "鲁P·";break;
|
||||
case "滨州市" : plate = "鲁M·";break;
|
||||
case "菏泽市" : plate = "鲁R·";break;
|
||||
default: ;
|
||||
}
|
||||
return plate;
|
||||
},
|
||||
getRandom() {
|
||||
let plateNumber = '';
|
||||
let codeChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G',
|
||||
'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
|
||||
'W', 'X', 'Y', 'Z'];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
let index= Math.floor(Math.random()*36);
|
||||
plateNumber += codeChars[index];
|
||||
}
|
||||
return plateNumber;
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
if (value[1] === '' || value[1] === undefined) {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '暂时只能为山东地区开放，其他地区敬请开放'
|
||||
})
|
||||
} else {
|
||||
let plateList = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
let one = this.getPlateNumber(value[1])+this.getRandom();
|
||||
plateList.push(one)
|
||||
}
|
||||
});
|
||||
this.plateNumbers = plateList;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
submitForm() {
|
||||
if (this.plateNumber === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '号牌号码不能为空'
|
||||
})
|
||||
} else if (this.plateForm.logo === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '车辆品牌不能为空'
|
||||
})
|
||||
} else if (this.plateForm.number === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '合格编号不能为空'
|
||||
})
|
||||
} else if (this.plateForm.size === '') {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '车辆型号不能为空'
|
||||
})
|
||||
} else {
|
||||
this.$confirm('确认预约, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$ajax.post("/traffic/insertPlateInfo",{
|
||||
createId:JSON.parse(sessionStorage.getItem("userInfo")).user_id,plateNumber:this.plateNumber,
|
||||
carBrand: this.plateForm.logo,qualifiedNo:this.plateForm.number,carSize:this.plateForm.size,
|
||||
carType:"二手车"},r=>{
|
||||
if (r === 1) {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: "预选成功"
|
||||
})
|
||||
location.reload();
|
||||
} else {
|
||||
this.$message.error("网络异常，请稍后再试")
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消预约'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
resetForm() {
|
||||
this.value = '';
|
||||
this.plateForm.logo = '';
|
||||
this.plateForm.number = '';
|
||||
this.plateForm.size = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-carousel__item div{
|
||||
padding: 1rem;
|
||||
}
|
||||
.left , .right{
|
||||
width: 50%;
|
||||
}
|
||||
.el-radio:nth-child(1){
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-radio{
|
||||
margin-right: 0 !important;
|
||||
width: 47%;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.plate-number{
|
||||
overflow: auto;
|
||||
height: 10rem;
|
||||
border: 1px solid #EEEEEE;
|
||||
margin-bottom: 1rem;
|
||||
width: 36rem;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.plate .title{
|
||||
padding: 0 1rem 1rem 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.plate{
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.el-input {
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ export default new Router({
|
||||
{
|
||||
path: '/index',
|
||||
name: 'index',
|
||||
component:() => import('@/components/index'),
|
||||
component:() => import('@/components/Index'),
|
||||
children:[
|
||||
{
|
||||
path: 'homepage',
|
||||
@ -16,6 +16,12 @@ export default new Router({
|
||||
|
||||
component:() => import('@/components/Homepage')
|
||||
},
|
||||
{
|
||||
path: 'noticecontent',
|
||||
name: 'noticecontent',
|
||||
|
||||
component:() => import('@/components/NoticeContent')
|
||||
},
|
||||
{
|
||||
path: 'illprocess',
|
||||
name: 'illprocess',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user