Merge branch 'master' of http://42.193.1.25:9521/r/sccg_ui into master
| | |
| | | <template> |
| | | <div>违规检索</div> |
| | | <div class="illegal-search"> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | <template> |
| | | <div>预警研判</div> |
| | | <div class="study-judge"> |
| | | <div class="study-judge-header"> |
| | | <span>您有1111条待审核报警信息,今日立案0条,再学习0条</span> |
| | | </div> |
| | | <div class="study-judge-main"> |
| | | <!-- sjm:study-judge-main --> |
| | | <div class="sjm-header"> |
| | | <div class="sjm-header-left"> |
| | | <span class="moni-name">监控点位名称:中华路XX路口 </span> |
| | | <span class="moni-area">中华街道区域</span> |
| | | </div> |
| | | <div class="sjm-header-right"> |
| | | <el-button size="small">实时预览</el-button> |
| | | <el-button size="small">录像回放</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="sjm-content"> |
| | | <div class="sjm-content-left"> |
| | | <div class="img-item"> |
| | | <span>报警图片</span> |
| | | <img |
| | | src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg" |
| | | alt=""> |
| | | <span>报警时间:2022-09-08 14:23:34</span> |
| | | </div> |
| | | <div class="img-item"> |
| | | <img |
| | | src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg" |
| | | alt=""> |
| | | </div> |
| | | <div class="img-item"> |
| | | <img |
| | | src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg" |
| | | alt=""> |
| | | </div> |
| | | </div> |
| | | <div class="sjm-content-center"> |
| | | 地图容器 |
| | | </div> |
| | | <div class="sjm-content-right"> |
| | | <div class="card-box"> |
| | | <div class="card-header"> |
| | | <span>报警记录</span> |
| | | <span>乱停乱放违法占道</span> |
| | | </div> |
| | | <el-form ref="currentEvent" label-width="120px" :model="currentEvent" :rules="rules"> |
| | | <el-form-item label="事件编号:"> |
| | | <span>{{ currentEvent.number }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="事件等级:"> |
| | | <span>{{ currentEvent.level }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="首次报警时间:"> |
| | | <span>{{ currentEvent.firstTime }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="最近报警时间:"> |
| | | <span>{{ currentEvent.recentTime }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="持续时间:"> |
| | | <span>{{ currentEvent.conntinueTime }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="处理意见:" prop="advice"> |
| | | <el-radio-group v-model="currentEvent.advice"> |
| | | <el-radio :label="item.id" v-for="item in adviceList" :key="item.id">{{ item.label }}</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="问题类型:" prop="type"> |
| | | <el-input v-model="currentEvent.type" placeholder="请选择问题类型"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="大类名称:" prop="bigKind"> |
| | | <el-input v-model="currentEvent.bigKind" placeholder="请选择大类名称"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="小类名称:" prop="smallKind"> |
| | | <el-input v-model="currentEvent.smallKind" placeholder="请选择小类名称"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="车牌号:" prop="carNumber"> |
| | | <el-input v-model="currentEvent.carNumber" placeholder="请填写车牌号码"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="备注:"> |
| | | <el-input type="textarea" :rows="5" v-model="currentEvent.tip"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button>上一条</el-button> |
| | | <el-button @click.native.prevent="handleConfirm">确认</el-button> |
| | | <el-button>下一条</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | const validateAdvice = (rule,value,callback)=>{ |
| | | if(value){ |
| | | callback() |
| | | }else{ |
| | | callback(new Error('处理意见不能为空')) |
| | | } |
| | | } |
| | | const validateType = (rule,value,callback)=>{ |
| | | if(value){ |
| | | callback() |
| | | }else{ |
| | | callback(new Error('问题类型不能为空')) |
| | | } |
| | | } |
| | | const validateBigKind = (rule,value,callback)=>{ |
| | | console.log(value) |
| | | if(value){ |
| | | callback() |
| | | }else{ |
| | | callback(new Error('大类名称不能为空')) |
| | | } |
| | | } |
| | | const validateSmallKind = (rule,value,callback)=>{ |
| | | if(value){ |
| | | callback() |
| | | }else{ |
| | | callback(new Error('小类名称不能为空')) |
| | | } |
| | | } |
| | | const validateCarNumber = (rule,value,callback)=>{ |
| | | if(value){ |
| | | callback() |
| | | }else{ |
| | | callback(new Error('车牌号不能为空')) |
| | | } |
| | | } |
| | | return { |
| | | currentEvent: { |
| | | number: '1233123414141414', |
| | | level: '一般事件', |
| | | firstTime: '2022/09/23 12:00:00', |
| | | recentTime: '2022/09/23/ 12:00:00', |
| | | conntinueTime: '0小时10分钟', |
| | | advice: null, |
| | | type: '', |
| | | bigKind: '', |
| | | smallKind: '', |
| | | carNumber: '', |
| | | tip: '' |
| | | }, |
| | | adviceList: [ |
| | | { |
| | | id: 1, |
| | | label: '上报', |
| | | }, |
| | | { |
| | | id: 2, |
| | | label: '调度', |
| | | }, |
| | | { |
| | | id: 3, |
| | | label: '再学习', |
| | | }, |
| | | { |
| | | id: 4, |
| | | label: '暂不处理', |
| | | }, |
| | | ], |
| | | rules:{ |
| | | advice:[ |
| | | { |
| | | trigger:'blur',validator:validateAdvice |
| | | }, |
| | | ], |
| | | type:[ |
| | | { |
| | | trigger:'blur',validator:validateType |
| | | } |
| | | ], |
| | | bigKind:[ |
| | | { |
| | | trigger:'blur',validator:validateBigKind |
| | | } |
| | | ], |
| | | smallKind:[ |
| | | { |
| | | trigger:'blur',validator:validateSmallKind |
| | | } |
| | | ], |
| | | carNumber:[ |
| | | { |
| | | trigger:'blur',validator:validateCarNumber |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | | methods:{ |
| | | // 确认点击事件 |
| | | handleConfirm(){ |
| | | console.log(this.$refs.currentEvent) |
| | | this.$refs.currentEvent.validate((flag)=>{ |
| | | console.log(flag) |
| | | if(flag){ |
| | | |
| | | }else{ |
| | | return false |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | <style lang="scss" scoped> |
| | | .study-judge { |
| | | text-align: left; |
| | | color: #4b9bb7; |
| | | padding: 20px; |
| | | .study-judge-header { |
| | | line-height: 8vh; |
| | | } |
| | | |
| | | .study-judge-main { |
| | | .sjm-header { |
| | | line-height: 8vh; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | |
| | | .sjm-header-left { |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | |
| | | .moni-area { |
| | | margin-left: 4vw; |
| | | } |
| | | } |
| | | |
| | | .sjm-header-right { |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | |
| | | .el-button { |
| | | padding: 0 1vw; |
| | | height: 4vh; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .sjm-content { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | |
| | | .sjm-content-left { |
| | | line-height: 4.8vh; |
| | | |
| | | .img-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | img { |
| | | width: 15vw; |
| | | height: 20vh; |
| | | } |
| | | } |
| | | |
| | | .img-item+.img-item { |
| | | margin-top: 2vh; |
| | | } |
| | | } |
| | | |
| | | .sjm-content-right { |
| | | .card-box { |
| | | .card-header { |
| | | line-height: 4.8vh; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-form { |
| | | ::v-deep .el-form-item { |
| | | // margin-bottom: 10px; |
| | | } |
| | | |
| | | ::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-radio__label { |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div class="law-car"></div> |
| | | </template> |
| | | <div class="law-car"> |
| | | <div class="law-car-header"> |
| | | <span>基本信息</span> |
| | | </div> |
| | | <div class="law-car-main"> |
| | | <el-form :inline="true" :model="car"> |
| | | <div class="car-item"> |
| | | <el-form-item label="输入查询:" class="car-item-container"> |
| | | <el-input v-model="car.carNumber" placeholder="请输入车牌号"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="车主姓名:" class="car-item-container car-item-box"> |
| | | <div>{{car.carOwner}}</div> |
| | | </el-form-item> |
| | | <el-form-item label="联系方式:" class="car-item-container car-item-box"> |
| | | <div>{{car.carPhone}}</div> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="car-item"> |
| | | <el-form-item label="所属部门:" class="car-item-container"> |
| | | <div>{{car.carDept}}</div> |
| | | </el-form-item> |
| | | <el-form-item label="所属大队:" class="car-item-container car-item-box"> |
| | | <div>{{car.carTeam}}</div> |
| | | </el-form-item> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | <div class="law-car-footer"> |
| | | <div>车辆轨迹分析图</div> |
| | | <div class="map-box"> |
| | | <MyMap></MyMap> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import MyMap from '@/components/map' |
| | | export default { |
| | | components:{ |
| | | MyMap |
| | | }, |
| | | data() { |
| | | return { |
| | | carNumber: '', |
| | | car: { |
| | | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .law-car { |
| | | color: #4b9bb7; |
| | | padding: 20px; |
| | | .law-car-header{ |
| | | line-height: 60px; |
| | | text-align: left; |
| | | } |
| | | .law-car-main { |
| | | display: flex; |
| | | flex-direction: column; |
| | | .car-item{ |
| | | line-height: 60px; |
| | | display: flex; |
| | | flex: 1; |
| | | text-align: left; |
| | | .car-item-box{ |
| | | margin-left: 10%; |
| | | } |
| | | .car-item-container{ |
| | | width: 26%; |
| | | } |
| | | } |
| | | ::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | ::v-deep .el-form-item { |
| | | line-height: 40px; |
| | | } |
| | | } |
| | | .law-car-footer{ |
| | | div:nth-child(1){ |
| | | text-align: left; |
| | | line-height: 40px; |
| | | } |
| | | .map-box{ |
| | | width: 100%; |
| | | height: 55vh; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div class="soil-car"></div> |
| | | </template> |
| | | <div class="soil-car"> |
| | | <div class="soil-car-header"> |
| | | <span>基本信息</span> |
| | | </div> |
| | | <div class="soil-car-main"> |
| | | <el-form :inline="true" :model="car"> |
| | | <div class="car-item"> |
| | | <el-form-item label="输入查询:" class="car-item-container"> |
| | | <el-input v-model="car.carNumber" placeholder="请输入车牌号"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="车辆使用人员:" class="car-item-container car-item-box"> |
| | | <div>{{ car.carOwner }}</div> |
| | | </el-form-item> |
| | | <el-form-item label="联系方式:" class="car-item-container car-item-box"> |
| | | <div>{{ car.carPhone }}</div> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="car-item"> |
| | | <el-form-item label="施工单位:" class="car-item-container"> |
| | | <div>{{ car.carDept }}</div> |
| | | </el-form-item> |
| | | <el-form-item label="施工地址:" class="car-item-container car-item-box"> |
| | | <div>{{ car.carTeam }}</div> |
| | | </el-form-item> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | <div class="soil-car-footer"> |
| | | <div>车辆轨迹分析图</div> |
| | | <div class="map-box"> |
| | | <MyMap></MyMap> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import MyMap from '@/components/map' |
| | | export default { |
| | | components: { |
| | | MyMap |
| | | }, |
| | | data() { |
| | | return { |
| | | carNumber: '', |
| | | car: { |
| | | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .soil-car { |
| | | color: #4b9bb7; |
| | | padding: 20px; |
| | | |
| | | .soil-car-header { |
| | | line-height: 60px; |
| | | text-align: left; |
| | | } |
| | | |
| | | .soil-car-main { |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .car-item { |
| | | line-height: 60px; |
| | | display: flex; |
| | | flex: 1; |
| | | text-align: left; |
| | | |
| | | .car-item-box { |
| | | margin-left: 10%; |
| | | } |
| | | |
| | | .car-item-container { |
| | | width: 26%; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | ::v-deep .el-form-item { |
| | | line-height: 40px; |
| | | } |
| | | } |
| | | |
| | | .soil-car-footer { |
| | | div:nth-child(1) { |
| | | text-align: left; |
| | | line-height: 40px; |
| | | } |
| | | |
| | | .map-box { |
| | | width: 100%; |
| | | height: 55vh; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="myInterface" |
| | | :rules="createmyInterfaceRules" label-position="right"> |
| | | <!-- 应用名称 --> |
| | | <el-form-item label="应用名称:" prop="applicationName"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写应用名称"></el-input> |
| | | <el-form-item label="任务编号:" prop="applicationName"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写任务编号"></el-input> |
| | | </el-form-item> |
| | | <!-- 应用图标 --> |
| | | <el-form-item label="应用图标:" prop="applicationIconUrl"> |
| | | <div class="iconBox"> |
| | | <div class="upload"> |
| | | <img src="@/assets/imgs/user/default-avatar.jpg" alt=""> |
| | | </div> |
| | | <div class="iconView"> |
| | | <span>示意图</span> |
| | | <img src="@/assets/imgs/user/default-avatar.jpg" alt=""> |
| | | </div> |
| | | <div class="tip"> |
| | | <span>只允许上传jpg,jpeg,png,svg格式的图片,建议尺寸为105px*105px</span> |
| | | </div> |
| | | </div> |
| | | <el-form-item label="标题:" prop="applicationIconUrl"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写案件编号"></el-input> |
| | | </el-form-item> |
| | | <!-- 应用类型 --> |
| | | <el-form-item label="应用类型:" prop="applicationType"> |
| | | <div class="optionItem"> |
| | | <el-radio-group v-model="myInterface.applicationType"> |
| | | <el-radio :label="1">网页应用</el-radio> |
| | | </el-radio-group> |
| | | </div> |
| | | <el-form-item label="类型:" prop="applicationType"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写问题类型"></el-input> |
| | | </el-form-item> |
| | | <!--网站url --> |
| | | <el-form-item label="网站url:" prop="websiteUrl"> |
| | | <el-input v-model="myInterface.websiteUrl"></el-input> |
| | | <!-- 应用名称 --> |
| | | <el-form-item label="级别:" prop="applicationName"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写街道"></el-input> |
| | | </el-form-item> |
| | | <!-- 应用描述 --> |
| | | <el-form-item label="应用描述:" prop="description"> |
| | | <el-input v-model="myInterface.description" placeholder="请填写描述"></el-input> |
| | | <!-- 应用图标 --> |
| | | <el-form-item label="街道:" prop="applicationIconUrl"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写社区"></el-input> |
| | | </el-form-item> |
| | | <!-- 应用类型 --> |
| | | <el-form-item label="社区:" prop="applicationType"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写监督员"></el-input> |
| | | </el-form-item> |
| | | <!-- 应用图标 --> |
| | | <el-form-item label="开始时间:" prop="applicationIconUrl"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写问题描述"></el-input> |
| | | </el-form-item> |
| | | <!-- 应用类型 --> |
| | | <el-form-item label="结束时间:" prop="applicationType"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写上报时间"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="任务描述:" prop="applicationType"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写上报时间"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="状态:" prop="applicationType"> |
| | | <el-input v-model="myInterface.applicationName" placeholder="填写状态"></el-input> |
| | | </el-form-item> |
| | | <!-- 按钮 --> |
| | | <el-form-item> |
| | |
| | | }, |
| | | createmyInterfaceRules: { |
| | | applicationName: [ |
| | | { required: true, trigger: "blur", validator: validateApplicationName}, |
| | | { required: true, trigger: "blur", validator: validateApplicationName }, |
| | | ], |
| | | applicationIconUrl: [ |
| | | { required: true, trigger: "blur", validator: validateApplicationIconUrl }, |
| | |
| | | handleUser() { |
| | | const { myInterface } = this; |
| | | this.$axios.post('sccg/system/portal/thirdApp/add', { |
| | | websiteUrl:myInterface.websiteUrl, |
| | | applicationIconUrl:myInterface.applicationIconUrl, |
| | | applicationType:0, |
| | | description:myInterface.description, |
| | | applicationName:myInterface.applicationName |
| | | websiteUrl: myInterface.websiteUrl, |
| | | applicationIconUrl: myInterface.applicationIconUrl, |
| | | applicationType: 0, |
| | | description: myInterface.description, |
| | | applicationName: myInterface.applicationName |
| | | }).then(res => { |
| | | console.log(res); |
| | | // if (res.code === 200) { |
| | |
| | | padding: 0 55px; |
| | | background-color: #09152f; |
| | | padding-bottom: 50px; |
| | | |
| | | .mainContent { |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | } |
| | | } |
| | | } |
| | | .optionBtn{ |
| | | |
| | | .optionBtn { |
| | | margin-top: 30px; |
| | | &::v-deep .el-button{ |
| | | |
| | | &::v-deep .el-button { |
| | | padding: 12px 40px; |
| | | } |
| | | .reset{ |
| | | |
| | | .reset { |
| | | border: 1px solid #0079fe; |
| | | color: #0079fe; |
| | | } |
| | | } |
| | | |
| | | &::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | |
| | | <main> |
| | | <div class="mainHeader"> |
| | | <div class="add"> |
| | | <el-button type="primary" icon="el-icon-plus">新增任务</el-button> |
| | | <el-button type="primary" icon="el-icon-plus" @click="addTask()">新增任务</el-button> |
| | | </div> |
| | | <div class="date-search"> |
| | | <span>按天查询:</span> |
| | |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column type="selection" width="55"> |
| | | </el-table-column> |
| | | <el-table-column label="任务编号" prop="applicationName" min-width="10"> |
| | | <el-table-column prop="number" label="任务编号" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="applicationType" label="标题" min-width="10"> |
| | | <el-table-column prop="title" label="标题" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="websiteUrl" label="类型" min-width="10"> |
| | | <el-table-column prop="type" label="类型" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="applicationType" label="级别" min-width="10"> |
| | | <el-table-column prop="level" label="级别" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="applicationType" label="街道" min-width="10"> |
| | | <el-table-column prop="streetId" label="街道" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="applicationType" label="社区" min-width="10"> |
| | | <el-table-column prop="communityId" label="社区" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="applicationType" label="开始时间" min-width="10"> |
| | | <el-table-column prop="startTime" label="开始时间" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="applicationType" label="结束时间" min-width="10"> |
| | | <el-table-column prop="endTime" label="结束时间" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="applicationType" label="任务描述" min-width="10"> |
| | | <el-table-column prop="description" label="任务描述" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="applicationType" label="状态" min-width="10"> |
| | | <el-table-column prop="status" label="状态" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column label="操作" min-width="10"> |
| | | <template slot-scope="scope"> |
| | |
| | | </main> |
| | | <footer> |
| | | <!-- 创建弹窗 --> |
| | | <el-dialog :visible.sync="dialogCreate" title="新增第三方接口" width="45%" v-if="dialogCreate" |
| | | <el-dialog :visible.sync="dialogCreate" title="新增任务" width="45%" v-if="dialogCreate" |
| | | :before-close="handleClose"> |
| | | <createInterface /> |
| | | </el-dialog> |
| | |
| | | updateFlag: false, |
| | | userInfo: '', |
| | | date:'', |
| | | // totalNum: 200, |
| | | // pageSize: 10, |
| | | // currentPage: 1, |
| | | totalNum: 200, |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | } |
| | | }, |
| | | created() { |
| | | this.getUserList(); |
| | | async created() { |
| | | const arr = await this.getUserList(); |
| | | this.tableData = arr.records; |
| | | this.totalNum = arr.total; |
| | | }, |
| | | methods: { |
| | | addTask() { |
| | | this.dialogCreate = true; |
| | | }, |
| | | // 获取接口列表 |
| | | getUserList() { |
| | | // const that = this; |
| | | // // const { currentPage, pageSize, search } = this; |
| | | // this.dialogCreate = false; |
| | | // this.$axios.get("/sccg/task/list").then(res => { |
| | | // const { code, data } = res; |
| | | // if (code == 200) { |
| | | // this.tableData = data; |
| | | // } |
| | | // }) |
| | | |
| | | // let arr = []; |
| | | // const { currentPage, pageSize,context,messageStatus,messageKind } = this; |
| | | // await this.$axios({ |
| | | // method: 'post', |
| | | // url: '/sccg/task/list', |
| | | // data: { |
| | | // body: "", |
| | | // channelCode: messageKind === '00' ?'':messageKind, |
| | | // createUser: '', |
| | | // current: currentPage, |
| | | // head: context, |
| | | // messageType: "", |
| | | // pageSize: pageSize, |
| | | // randomCode: "", |
| | | // remark: "", |
| | | // sendTime: "", |
| | | // status: messageStatus === 2 ? '':messageStatus, |
| | | // targetFrom: "", |
| | | // targetTo: "" |
| | | // } |
| | | // }) |
| | | // .then(res => { |
| | | // this.tableData = res.data; |
| | | // }) |
| | | // return arr; |
| | | async getUserList() { |
| | | let arr = []; |
| | | const { currentPage, pageSize,context,messageStatus,messageKind } = this; |
| | | await this.$axios({ |
| | | method: 'post', |
| | | url: '/sccg/task/list', |
| | | data: { |
| | | body: "", |
| | | channelCode: "", |
| | | createUser: '', |
| | | current: currentPage, |
| | | head: context, |
| | | messageType: "", |
| | | pageSize: pageSize, |
| | | randomCode: "", |
| | | remark: "", |
| | | sendTime: "", |
| | | status:"", |
| | | targetFrom: "", |
| | | targetTo: "" |
| | | } |
| | | }) |
| | | .then(res => { |
| | | arr = res.data; |
| | | }) |
| | | return arr; |
| | | }, |
| | | // 设置表格斑马纹 |
| | | tableRowClassName({ row, rowIndex }) { |
New file |
| | |
| | | <template> |
| | | <div class="createUser"> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="role" :rules="createRoleRules" |
| | | label-position="right"> |
| | | <!-- 消息栏目 --> |
| | | <el-form-item class="optionItem" label="消息栏目:" prop="messageType"> |
| | | <div class="message-item"> |
| | | <div class="message-item__left"> |
| | | <el-select v-model="role.messageType" placeholder="请选择消息栏目"> |
| | | <el-option v-for="item in colList" :key="item.id" :label="item.columnName" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | <span class="message-add" @click='dialogCreate = true'> 添加栏目</span> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 消息标题 --> |
| | | <el-form-item class="optionItems" label="消息标题:" prop="head"> |
| | | <div class="message-item__left"> |
| | | <el-input v-model="role.head" placeholder="请选择消息标题"></el-input> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 接收对象 --> |
| | | <el-form-item class="optionItem" label="接收对象:" prop="targetTo"> |
| | | <div class="message-item__left"> |
| | | <el-select v-model="role.targetTo" placeholder="请选择接收对象" > |
| | | <el-option :value="role.targetTo"> |
| | | <el-tree ref="tree" :data="departList" :props="defaultProps" show-checkbox |
| | | @check="handleCheck" default-expand-all node-key="id"> |
| | | </el-tree> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 消息内容 --> |
| | | <el-form-item class="optionItem" label="消息内容:" prop="body"> |
| | | <MyEditor ref="edit" @getMyBody="getMyBody"></MyEditor> |
| | | <!-- <el-input type="textarea" v-model="role.description" placeholder="请输入描述内容200字以内"></el-input> --> |
| | | </el-form-item> |
| | | <!-- 提醒方式 --> |
| | | <!-- <el-form-item class="optionItem" label="提醒方式:" prop="channelCode"> |
| | | <el-radio-group v-model="role.channelCode"> |
| | | <el-radio label="01">站内信</el-radio> |
| | | <el-radio label="02">邮件</el-radio> |
| | | <el-radio label="03">短信</el-radio> |
| | | </el-radio-group> |
| | | <span class="message-tip">(短信可用数: 1000条)</span> |
| | | </el-form-item> --> |
| | | <el-form-item> |
| | | <div class="optionBtn"> |
| | | <!-- <el-button type="primary" @click.native.prevent="handleSubmit(0)" class="btn save">保存 |
| | | </el-button> --> |
| | | <el-button type="primary" @click.native.prevent="handleSubmit(1)" class="btn submit">发布 |
| | | </el-button> |
| | | <!-- <el-button type="primary" @click.native.prevent="handleView" class="btn submit">预览 |
| | | </el-button> --> |
| | | <el-button class="btn cancel" @click.native.prevent="handleReset">重置</el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | <!-- 新增栏目 --> |
| | | <el-dialog title="添加栏目" :visible.sync="dialogCreate" v-if="dialogCreate" width="60%" |
| | | :before-close="handleConfirmClose" append-to-body> |
| | | <MyColumnAdd @closeDialog="closeDialog"></MyColumnAdd> |
| | | </el-dialog> |
| | | <!-- 预览消息 --> |
| | | <el-dialog title="消息预览" :visible.sync="dialogView" v-if="dialogView" width="60%" |
| | | :before-close="handleConfirmClose" append-to-body> |
| | | <MyColView :info="info" @closeDialog="closeDialog"></MyColView> |
| | | </el-dialog> |
| | | </div> |
| | | </main> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import MyEditor from '@/components/edit' |
| | | export default { |
| | | components: { MyEditor }, |
| | | data() { |
| | | const validateNickname = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写消息栏目")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePass = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateTruename = (rule, value, callback) => { |
| | | if (value.length !== 0) { |
| | | callback(); |
| | | } else { |
| | | callback(new Error('请选择接收对象')); |
| | | } |
| | | }; |
| | | return { |
| | | role: { |
| | | messageType: '', |
| | | head: '', |
| | | targetTo: '', |
| | | targetFrom: null, |
| | | body: '', |
| | | channelCode: '01', |
| | | }, |
| | | createRoleRules: { |
| | | messageType: [ |
| | | { required: true, trigger: "blur", validator: validateNickname }, |
| | | ], |
| | | head: [ |
| | | { required: false, trigger: "blur", validator: validatePass }, |
| | | ], |
| | | targetTo: [ |
| | | { required: false, trigger: "blur", validator: validateTruename }, |
| | | ], |
| | | }, |
| | | colList: [], |
| | | departList: [], |
| | | typeList: [], |
| | | dialogCreate: false, |
| | | dialogView: false, |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'departName', |
| | | // disabled: function (data, node) { |
| | | // if (data.createTime) { |
| | | // return !data.leaf |
| | | // } |
| | | // } |
| | | }, |
| | | checkedList: [], |
| | | tempNameArr:[], |
| | | info:{}, |
| | | sendUser:"" |
| | | } |
| | | }, |
| | | created() { |
| | | this.setColumnList(); |
| | | this.setDepartList(); |
| | | this.getLoginUserInfo(); |
| | | }, |
| | | methods: { |
| | | // 关闭弹窗 |
| | | handleConfirmClose(done) { |
| | | this.$confirm('确认关闭?') |
| | | .then(_ => { |
| | | done(); |
| | | }) |
| | | }, |
| | | // 设置栏目 |
| | | async setColumnList() { |
| | | this.colList = await this.getColumnList(); |
| | | }, |
| | | // 获取栏目 |
| | | async getColumnList() { |
| | | let arr; |
| | | await this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/message_column/getAllColumn' |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | arr = res.data; |
| | | }) |
| | | return arr; |
| | | }, |
| | | // 关闭弹窗 |
| | | closeDialog({ flag, index }) { |
| | | this.dialogCreate = flag; |
| | | if (index === 1) { |
| | | // 重新设置栏目 |
| | | this.setColumnList(); |
| | | } |
| | | }, |
| | | // 获取部门树 |
| | | async getDepartList() { |
| | | let arr |
| | | await this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/depart/tree' |
| | | }) |
| | | .then(res => { |
| | | arr = res.data |
| | | }) |
| | | return arr; |
| | | }, |
| | | // 设置部门树 |
| | | async setDepartList() { |
| | | this.departList = await this.filterDepartList(); |
| | | }, |
| | | // 处理部门树 |
| | | async filterDepartList() { |
| | | let arr = await this.getDepartList(); |
| | | const { setChildren } = this; |
| | | // console.log(setChildren); |
| | | arr.forEach(item => { |
| | | setChildren(item); |
| | | }) |
| | | return arr; |
| | | }, |
| | | // 递归children |
| | | setChildren(obj) { |
| | | if (obj.children !== null) { |
| | | if (obj.children.length !== 0) { |
| | | obj.children.forEach(item => { |
| | | return this.setChildren(item); |
| | | }) |
| | | } |
| | | } else { |
| | | if (obj.userInfoDTOS.length !== 0) { |
| | | obj.children = []; |
| | | obj.userInfoDTOS.forEach(item => { |
| | | obj.children.push({ id: item.userId, departName: item.username }) |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | // 选中id |
| | | handleCheck(data, node) { |
| | | let arr = [],nameArr = [] |
| | | console.log(node.checkedNodes) |
| | | node.checkedNodes.forEach(item => { |
| | | if(!item.hasOwnProperty('departType')){ |
| | | arr.push(item.id) |
| | | nameArr.push(item.departName) |
| | | } |
| | | }) |
| | | this.checkedList = arr |
| | | this.tempNameArr = nameArr |
| | | console.log(this.tempNameArr) |
| | | this.role.targetTo = arr.length + '人' |
| | | }, |
| | | // 新建/保存消息(1:新建,0保存消息) |
| | | handleSubmit(mystatus) { |
| | | this.$refs.user.validate((valid) => { |
| | | if (valid) { |
| | | const { role, checkedList } = this; |
| | | console.log(checkedList); |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/message/sendMessage', |
| | | data: { |
| | | body: role.body, |
| | | channelCode: '03', |
| | | head: role.head, |
| | | messageType: role.messageType, |
| | | sendTime: new Date(), |
| | | targetTo: checkedList.join(','), |
| | | targetFrom: `${role.targetFrom}`, |
| | | status: mystatus, |
| | | } |
| | | }) |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: mystatus === 1 ? '发送成功' : '保存成功', |
| | | }) |
| | | this.$emit('closeMyDialog', { flag: false, index: 1 }); |
| | | } |
| | | }) |
| | | } else { |
| | | return false; |
| | | } |
| | | }) |
| | | }, |
| | | // 获得消息体 |
| | | getMyBody(obj) { |
| | | console.log(obj); |
| | | this.role.body = obj; |
| | | }, |
| | | // 重置表单 |
| | | handleReset() { |
| | | this.$refs.edit.editor.txt.clear(); |
| | | // this.$refs.edit.wangEditor.txt.html('<p><br></p>') |
| | | this.setDepartList(); |
| | | this.$refs.user.resetFields(); |
| | | }, |
| | | // 获取当前登录用户信息 |
| | | getLoginUserInfo() { |
| | | const name = sessionStorage.getItem('name'); |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/admin/info?name=' + name, |
| | | }) |
| | | .then(res => { |
| | | this.role.targetFrom = res.data.userId |
| | | this.sendUser = res.data.username |
| | | }) |
| | | }, |
| | | // 消息预览 |
| | | handleView() { |
| | | this.$refs.user.validate((valid) => { |
| | | if (valid) { |
| | | const { role,getColText,tempNameArr,sendUser } = this |
| | | this.dialogView = true; |
| | | let info = {} |
| | | // 获得栏目消息 |
| | | info.channelCode = role.channelCode === '01'? '站内信': role.channelCode === '02' ? '邮件':'短信' |
| | | info.messageType = getColText(role.messageType) |
| | | info.body = role.body |
| | | info.head = role.head |
| | | info.targetTo = tempNameArr |
| | | info.targetFrom = sendUser |
| | | this.info = info |
| | | } else { |
| | | return false |
| | | } |
| | | }) |
| | | }, |
| | | // 获得栏目消息 |
| | | getColText(id){ |
| | | console.log(id) |
| | | const {colList} = this |
| | | let str = '' |
| | | colList.forEach(item=>{ |
| | | item.id === id ? str = item.columnName : '' |
| | | }) |
| | | return str |
| | | } |
| | | }, |
| | | props: ['closeMyDialog'] |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .createUser { |
| | | border-radius: 1px; |
| | | background-color: #09152f; |
| | | |
| | | main { |
| | | text-align: left; |
| | | padding: 0 55px; |
| | | background-color: #09152f; |
| | | padding-bottom: 50px; |
| | | |
| | | .mainContent { |
| | | display: flex; |
| | | justify-content: center; |
| | | padding-top: 50px; |
| | | &:deep(.el-dialog__title) { |
| | | color: #4b9bb7; |
| | | } |
| | | &::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | width: 400px; |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | .message-item__left { |
| | | width: 400px; |
| | | } |
| | | |
| | | .message-add { |
| | | &:hover { |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | | .el-form-item__content :deep(.el-select) { |
| | | width: 400px; |
| | | } |
| | | |
| | | :deep(.el-input) { |
| | | width: 400px; |
| | | } |
| | | |
| | | .message-item { |
| | | display: flex; |
| | | |
| | | span { |
| | | margin-left: 20px; |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | |
| | | .message-tip { |
| | | margin-left: 20px; |
| | | } |
| | | |
| | | :deep(.el-input--suffix) { |
| | | width: 400px; |
| | | } |
| | | |
| | | &::v-deep .el-textarea__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | .el-form-item__content { |
| | | width: 400px; |
| | | |
| | | .el-select { |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | .optionHandleSp { |
| | | display: flex; |
| | | |
| | | .areaNumber, |
| | | .moreNumber { |
| | | flex: 1; |
| | | } |
| | | |
| | | .telNumber { |
| | | flex: 2; |
| | | } |
| | | } |
| | | |
| | | .optionBtn { |
| | | display: flex; |
| | | margin-top: 20px; |
| | | |
| | | .btn { |
| | | padding: 12px 50px; |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- 新建消息 --> |
| | | <!-- <el-dialog title="新建消息" :visible.sync="dialogCreate" v-if="dialogCreate" width="80%" |
| | | <el-dialog title="新建消息" :visible.sync="dialogCreate" v-if="dialogCreate" width="80%" |
| | | :before-close="handleConfirmClose"> |
| | | <MyCreate @closeMyDialog="closeDialog"></MyCreate> |
| | | </el-dialog> --> |
| | | </el-dialog> |
| | | <!-- 消息详情 --> |
| | | <!-- <el-dialog title="消息详情" :visible.sync="dialogView" v-if="dialogView" width="45%" |
| | | :before-close="handleClose"> |
| | |
| | | </template> |
| | | <script> |
| | | import helper from '@/utils/mydate' |
| | | import MyCreate from './createSms' |
| | | export default { |
| | | components: { |
| | | // MyView, MyCreate,MyEdit |
| | | MyCreate |
| | | }, |
| | | data() { |
| | | return { |