24 changed files with 1351 additions and 697 deletions
@ -1 +1 @@ |
|||||
window._iconfont_svg_string_4466169='<svg><symbol id="icon-menu" viewBox="0 0 1024 1024"><path d="M512 747.52c-10.24 0-20.48-5.12-30.72-10.24l-414.72-256C51.2 476.16 40.96 460.8 40.96 445.44s10.24-30.72 25.6-40.96l414.72-256c15.36-10.24 40.96-10.24 56.32 0l414.72 256c15.36 10.24 25.6 25.6 25.6 40.96s-5.12 30.72-20.48 40.96l-414.72 256c-10.24 5.12-20.48 5.12-30.72 5.12zM117.76 445.44l394.24 240.64 394.24-240.64L512 204.8 117.76 445.44z m-20.48-10.24z" ></path><path d="M512 936.96c-15.36 0-30.72-5.12-46.08-15.36l-378.88-230.4c-15.36-10.24-20.48-25.6-10.24-40.96s25.6-20.48 40.96-10.24L496.64 870.4c10.24 5.12 20.48 5.12 30.72 0l378.88-230.4c15.36-10.24 35.84-5.12 40.96 10.24s5.12 35.84-10.24 40.96L558.08 921.6c-15.36 10.24-30.72 15.36-46.08 15.36z" ></path></symbol><symbol id="icon-menuactive" viewBox="0 0 1024 1024"><path d="M51.2 404.48c-10.24-5.12-10.24-15.36 0-25.6L501.76 102.4h20.48L972.8 378.88c10.24 5.12 10.24 20.48 0 25.6l-450.56 276.48c-5.12 5.12-15.36 5.12-20.48 0L51.2 404.48z" fill="#2c2c2c" ></path><path d="M512 906.24c-20.48 0-40.96-5.12-56.32-15.36l-378.88-230.4c-25.6-15.36-30.72-46.08-20.48-71.68 15.36-25.6 46.08-30.72 71.68-15.36l378.88 230.4h10.24l378.88-230.4c25.6-15.36 56.32-5.12 71.68 15.36 15.36 25.6 5.12 56.32-15.36 71.68l-378.88 230.4c-20.48 10.24-40.96 15.36-61.44 15.36z" fill="#2c2c2c" ></path></symbol><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M268.9 488.3L681.6 75.6C688.2 69 697.3 65 707.4 65c20.2 0 36.5 16.3 36.5 36.5 0 10.1-4.1 19.2-10.7 25.8l-391 391 378.5 378.5c6 6.2 9.7 14.7 9.7 24.1 0 19.2-15.5 34.7-34.7 34.7-9.4 0-17.9-3.7-24.1-9.7L279.2 553.4c-4.7-4.8-8.1-11.1-9.3-18 0.7 4.9-0.3 5.5-1 4.4-6.6-6.6-10.7-15.7-10.7-25.8 0.1-10 4.1-19.1 10.7-25.7z m0 0" ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M755.1 535.7L342.4 948.4C335.8 955 326.70000001 959 316.60000001 959c-20.2 0-36.5-16.3-36.50000001-36.5 0-10.1 4.1-19.2 10.7-25.8l391-391-378.49999999-378.5c-6-6.2-9.7-14.7-9.70000001-24.1 0-19.2 15.5-34.7 34.7-34.7 9.4 0 17.9 3.7 24.1 9.7L744.8 470.6c4.7 4.8 8.1 11.1 9.30000001 18-0.7-4.9 0.3-5.5 0.99999999-4.4 6.6 6.6 10.69999999 15.7 10.7 25.8-0.1 10-4.1 19.1-10.7 25.7z m0 0" ></path></symbol><symbol id="icon-recent" viewBox="0 0 1024 1024"><path d="M504 1024C225.6 1024 0 798.4 0 520S225.6 16 504 16s504 225.6 504 504-225.6 504-504 504z m0-939.2C264 84.8 68.8 280 68.8 520c0 240.8 195.2 436 436 436s436-195.2 436-436c-0.8-240-196-435.2-436.8-435.2z" ></path><path d="M452 572.8V221.6h71.2v280h237.6v71.2H452z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,o,i,l,d,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4466169,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),c()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=c,l=n.document,d=!1,m(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,a())})}function a(){d||(d=!0,i())}function m(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}a()}}(window); |
window._iconfont_svg_string_4466169='<svg><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M512 0.006C229.233 0.006 0.006 229.233 0.006 512S229.233 1023.993 512 1023.993 1023.994 794.767 1023.994 512 794.767 0.006 512 0.006z m0 962.549C263.563 962.555 61.445 760.437 61.445 512S263.563 61.445 512 61.445 962.555 263.563 962.555 512 760.437 962.555 512 962.555z" fill="#040000" ></path><path d="M707.498 273.063L512 468.561 316.502 273.063l-43.449 43.439L468.551 512 273.053 707.497l43.449 43.45L512 555.449l195.498 195.498 43.449-43.45L555.449 512l195.498-195.498z" fill="#040000" ></path></symbol><symbol id="icon-menu" viewBox="0 0 1024 1024"><path d="M512 747.52c-10.24 0-20.48-5.12-30.72-10.24l-414.72-256C51.2 476.16 40.96 460.8 40.96 445.44s10.24-30.72 25.6-40.96l414.72-256c15.36-10.24 40.96-10.24 56.32 0l414.72 256c15.36 10.24 25.6 25.6 25.6 40.96s-5.12 30.72-20.48 40.96l-414.72 256c-10.24 5.12-20.48 5.12-30.72 5.12zM117.76 445.44l394.24 240.64 394.24-240.64L512 204.8 117.76 445.44z m-20.48-10.24z" ></path><path d="M512 936.96c-15.36 0-30.72-5.12-46.08-15.36l-378.88-230.4c-15.36-10.24-20.48-25.6-10.24-40.96s25.6-20.48 40.96-10.24L496.64 870.4c10.24 5.12 20.48 5.12 30.72 0l378.88-230.4c15.36-10.24 35.84-5.12 40.96 10.24s5.12 35.84-10.24 40.96L558.08 921.6c-15.36 10.24-30.72 15.36-46.08 15.36z" ></path></symbol><symbol id="icon-menuactive" viewBox="0 0 1024 1024"><path d="M51.2 404.48c-10.24-5.12-10.24-15.36 0-25.6L501.76 102.4h20.48L972.8 378.88c10.24 5.12 10.24 20.48 0 25.6l-450.56 276.48c-5.12 5.12-15.36 5.12-20.48 0L51.2 404.48z" fill="#2c2c2c" ></path><path d="M512 906.24c-20.48 0-40.96-5.12-56.32-15.36l-378.88-230.4c-25.6-15.36-30.72-46.08-20.48-71.68 15.36-25.6 46.08-30.72 71.68-15.36l378.88 230.4h10.24l378.88-230.4c25.6-15.36 56.32-5.12 71.68 15.36 15.36 25.6 5.12 56.32-15.36 71.68l-378.88 230.4c-20.48 10.24-40.96 15.36-61.44 15.36z" fill="#2c2c2c" ></path></symbol><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M268.9 488.3L681.6 75.6C688.2 69 697.3 65 707.4 65c20.2 0 36.5 16.3 36.5 36.5 0 10.1-4.1 19.2-10.7 25.8l-391 391 378.5 378.5c6 6.2 9.7 14.7 9.7 24.1 0 19.2-15.5 34.7-34.7 34.7-9.4 0-17.9-3.7-24.1-9.7L279.2 553.4c-4.7-4.8-8.1-11.1-9.3-18 0.7 4.9-0.3 5.5-1 4.4-6.6-6.6-10.7-15.7-10.7-25.8 0.1-10 4.1-19.1 10.7-25.7z m0 0" ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M755.1 535.7L342.4 948.4C335.8 955 326.70000001 959 316.60000001 959c-20.2 0-36.5-16.3-36.50000001-36.5 0-10.1 4.1-19.2 10.7-25.8l391-391-378.49999999-378.5c-6-6.2-9.7-14.7-9.70000001-24.1 0-19.2 15.5-34.7 34.7-34.7 9.4 0 17.9 3.7 24.1 9.7L744.8 470.6c4.7 4.8 8.1 11.1 9.30000001 18-0.7-4.9 0.3-5.5 0.99999999-4.4 6.6 6.6 10.69999999 15.7 10.7 25.8-0.1 10-4.1 19.1-10.7 25.7z m0 0" ></path></symbol><symbol id="icon-recent" viewBox="0 0 1024 1024"><path d="M504 1024C225.6 1024 0 798.4 0 520S225.6 16 504 16s504 225.6 504 504-225.6 504-504 504z m0-939.2C264 84.8 68.8 280 68.8 520c0 240.8 195.2 436 436 436s436-195.2 436-436c-0.8-240-196-435.2-436.8-435.2z" ></path><path d="M452 572.8V221.6h71.2v280h237.6v71.2H452z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,i,o,l,a,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4466169,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),c()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(o=c,l=n.document,a=!1,m(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){a||(a=!0,o())}function m(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}s()}}(window); |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 898 B |
@ -0,0 +1,478 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" :title="title"> |
||||
|
<div class="EventAddPlanDialog"> |
||||
|
<ElForm :model="formData" inline :rules="rules" ref="ruleForm"> |
||||
|
<div class="first"> |
||||
|
<el-radio-group v-model="planName"> |
||||
|
<el-radio-button label="名称1"></el-radio-button> |
||||
|
<el-radio-button label="名称2"></el-radio-button> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
|
||||
|
<div class="second"> |
||||
|
<el-row> |
||||
|
<el-col :span="2"> |
||||
|
<div class="text">联动设备:</div> |
||||
|
</el-col> |
||||
|
<el-col :span="22"> |
||||
|
<FormTable ref="secondFormTable" :tableData="secondFormData"></FormTable> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div class="third"> |
||||
|
<el-row> |
||||
|
<el-col :span="2"> |
||||
|
<div class="text">恢复操作:</div> |
||||
|
</el-col> |
||||
|
<el-col :span="22"> |
||||
|
<FormTable ref="thirdFormTable" :tableData="thirdFormData"></FormTable> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</ElForm> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">强制恢复</Button> |
||||
|
<Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">确认</Button> |
||||
|
<Button style="background: #C9C9C9;padding:0 24px;" |
||||
|
@click.native="modelVisible = false, submitting = false">取消</Button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index"; |
||||
|
import FormTable from '../../../plan/formTable/index.vue'; |
||||
|
import Button from '@screen/components/Buttons/Button.vue'; |
||||
|
import request from '@/utils/request'; |
||||
|
import { Message } from "element-ui"; |
||||
|
import { throttle } from "lodash" |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'eventPlanDialog', |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
FormTable |
||||
|
}, |
||||
|
model: { |
||||
|
prop: 'visible', |
||||
|
event: 'close' |
||||
|
}, |
||||
|
provide() { |
||||
|
return { |
||||
|
loadData: throttle(this.loadData, 1000) |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
detail: { |
||||
|
type: Object, |
||||
|
default: () => { } |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
title: '事件确认', |
||||
|
dialogType: 1, |
||||
|
planId: 0, |
||||
|
submitting: false, |
||||
|
formData: { |
||||
|
eventCategory: 1, |
||||
|
eventType: 1, |
||||
|
triggerMechanism: 1 |
||||
|
}, |
||||
|
secondFormData: [{ |
||||
|
deviceType: 1, |
||||
|
searchRule: 1, |
||||
|
qbb: '' |
||||
|
}], |
||||
|
thirdFormData: [{ |
||||
|
deviceType: 1, |
||||
|
searchRule: 1, |
||||
|
qbb: '' |
||||
|
}], |
||||
|
planName: '', |
||||
|
deviceData: [], |
||||
|
eventOptions: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '异常天气' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '交通事故' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '非法上路' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '车辆故障' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '交通拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '交通管制' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '服务区异常' |
||||
|
}, |
||||
|
{ |
||||
|
value: 8, |
||||
|
label: '施工建设' |
||||
|
}, |
||||
|
{ |
||||
|
value: 9, |
||||
|
label: '路障清除' |
||||
|
} |
||||
|
], |
||||
|
mechanismOptions: [{ |
||||
|
value: 1, |
||||
|
label: '雨' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '雪' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '雾' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '大风' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '低温寒潮' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '路面积雪' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '路面结冰' |
||||
|
}, |
||||
|
{ |
||||
|
value: 8, |
||||
|
label: '路面积水' |
||||
|
}, |
||||
|
{ |
||||
|
value: 9, |
||||
|
label: '其他' |
||||
|
}], |
||||
|
conditionOptions: [ |
||||
|
// { |
||||
|
// value: 1, |
||||
|
// label: '大于(>)' |
||||
|
// }, |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '小于(<)' |
||||
|
}, |
||||
|
], |
||||
|
rules: { |
||||
|
planName: [ |
||||
|
{ required: true, message: '请输入预案名称', trigger: 'blur' }, |
||||
|
|
||||
|
], |
||||
|
eventType: [ |
||||
|
{ required: true, message: '请选择事件类型', trigger: 'change' } |
||||
|
], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
if (this.visible) { |
||||
|
} |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$emit('close', val) |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
initData(id = 1) { |
||||
|
request({ |
||||
|
url: `/business/plans/list/${id}`, |
||||
|
method: "get", |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
let data = result.data; |
||||
|
let dcExecuteAction = result.data.dcExecuteAction; |
||||
|
|
||||
|
this.planId = data.id; |
||||
|
this.formData = { |
||||
|
eventCategory: data.eventCategory, |
||||
|
planName: data.planName, |
||||
|
eventType: data.eventType, |
||||
|
triggerMechanism: data.triggerMechanism, |
||||
|
} |
||||
|
this.secondFormData = []; |
||||
|
this.thirdFormData = []; |
||||
|
dcExecuteAction.forEach(it => { |
||||
|
if (it.deviceList) { |
||||
|
it.deviceList = it.deviceList.split(','); |
||||
|
} |
||||
|
if (it.actionType == 1) { |
||||
|
this.secondFormData.push(it); |
||||
|
} else if (it.actionType == 2) { |
||||
|
this.thirdFormData.push(it); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}).catch((err) => { |
||||
|
console.log(err) |
||||
|
Message.error("查询事件预案列表失败", err); |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
async loadData() { |
||||
|
if (this.deviceData.length <= 0) { |
||||
|
let result = await request({ |
||||
|
url: `business/device/query?deviceType=2`, |
||||
|
method: "get", |
||||
|
}) |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
console.log('123'); |
||||
|
this.deviceData = result.data; |
||||
|
// return result.data; |
||||
|
} |
||||
|
return this.deviceData; |
||||
|
}, |
||||
|
changeEventType(value = 1) { |
||||
|
this.mechanismOptions = optionsMap[this.formData.eventCategory || 1][value]; |
||||
|
}, |
||||
|
changeRadio(value = 1) { |
||||
|
const optionsMap = { |
||||
|
1: [{ |
||||
|
value: 1, |
||||
|
label: '异常天气' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '交通事故' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '非法上路' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '车辆故障' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '交通拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '交通管制' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '服务区异常' |
||||
|
}, |
||||
|
{ |
||||
|
value: 8, |
||||
|
label: '施工建设' |
||||
|
}, |
||||
|
{ |
||||
|
value: 9, |
||||
|
label: '路障清除' |
||||
|
}], |
||||
|
2: [{ |
||||
|
value: 1, |
||||
|
label: '异常天气' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '非机动车' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '行人' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '烟火' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '抛洒物' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '逆行' |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
this.eventOptions = optionsMap[value]; |
||||
|
this.changeEventType(); |
||||
|
}, |
||||
|
handleChange() { |
||||
|
|
||||
|
}, |
||||
|
formatData(it, value = 1) { |
||||
|
let data = { ...it, actionType: value } |
||||
|
if (it.deviceList && typeof it.deviceList !== 'string' && it.deviceList.length > 0) { |
||||
|
data.deviceList = it.deviceList.join(','); |
||||
|
} else { |
||||
|
data.deviceList = ''; |
||||
|
} |
||||
|
if (it.content) { |
||||
|
data.otherConfig = JSON.stringify({ content: it.content }) |
||||
|
} |
||||
|
if (it.controlModel) { |
||||
|
let other = { |
||||
|
controlModel: it.controlModel, |
||||
|
state: it.state, |
||||
|
} |
||||
|
if (it.time && it?.time[0]) { |
||||
|
other = { |
||||
|
controlModel: it.controlModel, |
||||
|
state: it.state, |
||||
|
startTime: it.time[0], |
||||
|
endTime: it.time[1] |
||||
|
} |
||||
|
} |
||||
|
data.otherConfig = JSON.stringify(other) |
||||
|
} |
||||
|
if (it.gzms) { |
||||
|
data.otherConfig = JSON.stringify({ |
||||
|
state: it.gzms, |
||||
|
operationDuration: it.operationDuration, |
||||
|
}) |
||||
|
} |
||||
|
return data; |
||||
|
}, |
||||
|
handleSubmit() { |
||||
|
this.$refs['ruleForm'].validate((valid) => { |
||||
|
if (valid) { |
||||
|
// this.submitting = false; |
||||
|
let secondFormTable = this.$refs['secondFormTable'].tableData || []; |
||||
|
let thirdFormTable = this.$refs['thirdFormTable'].tableData || []; |
||||
|
let dcArr = []; |
||||
|
secondFormTable.forEach(it => { |
||||
|
dcArr.push(this.formatData(it, 1)); |
||||
|
}) |
||||
|
thirdFormTable.forEach(it => { |
||||
|
dcArr.push(this.formatData(it, 2)); |
||||
|
}) |
||||
|
|
||||
|
console.log({ |
||||
|
...this.formData, |
||||
|
dcExecuteAction: dcArr |
||||
|
}) |
||||
|
// return; |
||||
|
if (this.dialogType == 1) {//新增 |
||||
|
request({ |
||||
|
url: `/business/plans`, |
||||
|
method: "post", |
||||
|
data: { |
||||
|
...this.formData, |
||||
|
dcExecuteAction: dcArr |
||||
|
} |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
Message.success("提交成功"); |
||||
|
this.modelVisible = false; |
||||
|
}).catch(() => { |
||||
|
Message.error("提交失败"); |
||||
|
}).finally(() => { |
||||
|
this.submitting = false; |
||||
|
this.$emit('reInitData', true); |
||||
|
}) |
||||
|
} else if (this.dialogType == 2) {//修改 |
||||
|
request({ |
||||
|
url: `/business/plans`, |
||||
|
method: "put", |
||||
|
data: { |
||||
|
...this.formData, |
||||
|
id: this.planId, |
||||
|
dcExecuteAction: dcArr |
||||
|
} |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
Message.success("提交成功"); |
||||
|
this.modelVisible = false; |
||||
|
}).catch(() => { |
||||
|
Message.error("提交失败"); |
||||
|
}).finally(() => { |
||||
|
this.submitting = false; |
||||
|
this.$emit('reInitData', true); |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.fade-enter-active, |
||||
|
.fade-leave-active { |
||||
|
transition: opacity .24s; |
||||
|
} |
||||
|
|
||||
|
.fade-enter, |
||||
|
.fade-leave-to { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.EventAddPlanDialog { |
||||
|
gap: 9px; |
||||
|
width: 1080px; |
||||
|
height: 310px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.first, |
||||
|
.second, |
||||
|
.third { |
||||
|
padding: 5px 10px 8px; |
||||
|
background-color: #296887; |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
.text { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
justify-content: end; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,319 +1,309 @@ |
|||||
<template> |
<template> |
||||
<div class='TrafficFlow'> |
<div class="TrafficFlow"> |
||||
<section class="foot"> |
<section class="foot"> |
||||
|
<div class="item keep-ratio" v-for="(item, index) in topDatas"> |
||||
<div class="item keep-ratio" v-for="(item, index) in topDatas"> |
<div class="line"></div> |
||||
<div class="line"> |
<div class="item-title"> |
||||
</div> |
<span> |
||||
<div class="item-title"> |
{{ item.eventName }} <span class="num">{{ item.total }}</span |
||||
<span> {{ item.eventName }} <span class="num">{{ item.total }}</span>起</span> |
>起</span |
||||
</div> |
> |
||||
<div class="item-body"> |
</div> |
||||
<div class="icon-left" |
<div class="item-body"> |
||||
:style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.eventName}.svg`)})`, '--bgColor': `rgba(0, 209, 255, 10%)` }"> |
<div |
||||
</div> |
class="left" |
||||
|
:style="{ |
||||
<div class="text-right"> |
backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.eventName}.svg`)})`, |
||||
<div class="text"> |
'--bgColor': `rgba(0, 209, 255, 10%)`, |
||||
已处理 <span class="num">{{ item.finished }}</span> 起 |
}" |
||||
</div> |
></div> |
||||
<div class="text"> |
|
||||
处理中 <span class="num">{{ item.processing }}</span> 起 |
<div class="text-right"> |
||||
</div> |
<div class="text"> |
||||
<div class="text"> |
已处理 <span class="num">{{ item.finished }}</span> 起 |
||||
待处理 <span class="num">{{ item.unconfirmed }}</span> 起 |
</div> |
||||
</div> |
<div class="text"> |
||||
</div> |
处理中 <span class="num">{{ item.processing }}</span> 起 |
||||
</div> |
|
||||
</div> |
</div> |
||||
</section> |
<div class="text"> |
||||
</div> |
待处理 <span class="num">{{ item.unconfirmed }}</span> 起 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { eventStatusNum } from "@/api/event/governanceAnalysis" |
import { eventStatusNum } from "@/api/event/governanceAnalysis"; |
||||
export default { |
export default { |
||||
name: 'publicService', |
name: "publicService", |
||||
components: { |
components: {}, |
||||
|
data() { |
||||
}, |
return { |
||||
data() { |
active: "事件专题", |
||||
return { |
activeName: "first", |
||||
active: "事件专题", |
topDatas: [], |
||||
activeName: "first", |
// topDatas: [{ |
||||
topDatas: [] |
// text: "其他事件", |
||||
// topDatas: [{ |
// textEnd: "起", |
||||
// text: "其他事件", |
// textNum: 9, |
||||
// textEnd: "起", |
// icon: require("./assets/其他事件.png"), |
||||
// textNum: 9, |
// reviewed: 4, |
||||
// icon: require("./assets/其他事件.png"), |
// noReviewed: 5 |
||||
// reviewed: 4, |
// }, { |
||||
// noReviewed: 5 |
// text: "路障清除", |
||||
// }, { |
// textEnd: "起", |
||||
// text: "路障清除", |
// textNum: 9, |
||||
// textEnd: "起", |
// icon: require("./assets/路障清除.png"), |
||||
// textNum: 9, |
// reviewed: 4, |
||||
// icon: require("./assets/路障清除.png"), |
// noReviewed: 5 |
||||
// reviewed: 4, |
// }, { |
||||
// noReviewed: 5 |
// text: "车辆故障", |
||||
// }, { |
// textEnd: "起", |
||||
// text: "车辆故障", |
// textNum: 9, |
||||
// textEnd: "起", |
// icon: require("./assets/车辆故障.png"), |
||||
// textNum: 9, |
// reviewed: 4, |
||||
// icon: require("./assets/车辆故障.png"), |
// noReviewed: 5 |
||||
// reviewed: 4, |
// }, { |
||||
// noReviewed: 5 |
// text: "服务区异常", |
||||
// }, { |
// textEnd: "起", |
||||
// text: "服务区异常", |
// textNum: 9, |
||||
// textEnd: "起", |
// icon: require("./assets/服务区异常.png"), |
||||
// textNum: 9, |
// reviewed: 4, |
||||
// icon: require("./assets/服务区异常.png"), |
// noReviewed: 5 |
||||
// reviewed: 4, |
// }, { |
||||
// noReviewed: 5 |
// text: "交通管制", |
||||
// }, { |
// textEnd: "起", |
||||
// text: "交通管制", |
// textNum: 9, |
||||
// textEnd: "起", |
// icon: require("./assets/交通管制.png"), |
||||
// textNum: 9, |
// reviewed: 4, |
||||
// icon: require("./assets/交通管制.png"), |
// noReviewed: 5 |
||||
// reviewed: 4, |
// }, { |
||||
// noReviewed: 5 |
// text: "交通拥堵", |
||||
// }, { |
// textEnd: "起", |
||||
// text: "交通拥堵", |
// textNum: 9, |
||||
// textEnd: "起", |
// icon: require("./assets/交通拥堵.png"), |
||||
// textNum: 9, |
// reviewed: 4, |
||||
// icon: require("./assets/交通拥堵.png"), |
// noReviewed: 5 |
||||
// reviewed: 4, |
// }, { |
||||
// noReviewed: 5 |
// text: "施工建设", |
||||
// }, { |
// textEnd: "起", |
||||
// text: "施工建设", |
// textNum: 9, |
||||
// textEnd: "起", |
// icon: require("./assets/施工建设.png"), |
||||
// textNum: 9, |
// reviewed: 4, |
||||
// icon: require("./assets/施工建设.png"), |
// noReviewed: 5 |
||||
// reviewed: 4, |
// }, { |
||||
// noReviewed: 5 |
// text: "异常天气", |
||||
// }, { |
// textEnd: "起", |
||||
// text: "异常天气", |
// textNum: 9, |
||||
// textEnd: "起", |
// icon: require("./assets/异常天气.png"), |
||||
// textNum: 9, |
// reviewed: 4, |
||||
// icon: require("./assets/异常天气.png"), |
// noReviewed: 5 |
||||
// reviewed: 4, |
// }, { |
||||
// noReviewed: 5 |
// text: "交通事故", |
||||
// }, { |
// textEnd: "起", |
||||
// text: "交通事故", |
// textNum: 9, |
||||
// textEnd: "起", |
// icon: require("./assets/交通事故.png"), |
||||
// textNum: 9, |
// reviewed: 4, |
||||
// icon: require("./assets/交通事故.png"), |
// noReviewed: 5 |
||||
// reviewed: 4, |
// } |
||||
// noReviewed: 5 |
|
||||
// } |
// ] |
||||
|
}; |
||||
// ] |
}, |
||||
} |
methods: { |
||||
}, |
getEventStatusNum() { |
||||
methods: { |
eventStatusNum().then((response) => { |
||||
getEventStatusNum() { |
this.topDatas = response.data; |
||||
eventStatusNum().then(response => { |
}); |
||||
this.topDatas = response.data |
|
||||
}) |
|
||||
}, |
|
||||
changeTabs() { |
|
||||
|
|
||||
} |
|
||||
}, |
}, |
||||
mounted() { |
changeTabs() {}, |
||||
this.getEventStatusNum() |
}, |
||||
}, |
mounted() { |
||||
|
this.getEventStatusNum(); |
||||
} |
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang="scss" scoped> |
||||
::v-deep .el-tabs__item { |
::v-deep .el-tabs__item { |
||||
display: inline-flex; |
display: inline-flex; |
||||
justify-content: center; |
justify-content: center; |
||||
font-size: 16px; |
font-size: 16px; |
||||
font-family: PingFang SC, PingFang SC; |
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
font-weight: 500; |
||||
color: #FFFFFF; |
color: #ffffff; |
||||
min-width: 128px; |
min-width: 128px; |
||||
position: relative; |
position: relative; |
||||
left: 10px; |
left: 10px; |
||||
} |
} |
||||
|
|
||||
::v-deep .el-tabs__active-bar { |
::v-deep .el-tabs__active-bar { |
||||
min-width: 128px; |
min-width: 128px; |
||||
} |
} |
||||
|
|
||||
::v-deep .el-tabs__nav-wrap::after { |
::v-deep .el-tabs__nav-wrap::after { |
||||
background-color: #133242; |
background-color: #133242; |
||||
opacity: 0.1; |
opacity: 0.1; |
||||
} |
} |
||||
|
|
||||
.footTabs { |
.footTabs { |
||||
display: inline; |
display: inline; |
||||
width: 99%; |
width: 99%; |
||||
|
|
||||
} |
} |
||||
|
|
||||
.TrafficFlow { |
.TrafficFlow { |
||||
width: 100%; |
width: 100%; |
||||
height: 182px; |
height: 182px; |
||||
|
display: inline-flex; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%); |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
|
||||
|
.item:nth-child(11) .line { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.foot { |
||||
display: inline-flex; |
display: inline-flex; |
||||
position: relative; |
flex-direction: row; |
||||
z-index: 6; |
width: 100%; |
||||
color: white; |
height: 100%; |
||||
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%); |
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 40%, #064258 93%); |
||||
border-radius: 0px 0px 0px 0px; |
|
||||
|
.item { |
||||
.item:nth-child(11) .line { |
position: relative; |
||||
display: none; |
display: inline-flex; |
||||
} |
width: calc(100% / 9); |
||||
|
height: 100%; |
||||
.foot { |
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
.item-title { |
||||
|
position: relative; |
||||
display: inline-flex; |
display: inline-flex; |
||||
|
width: 162px; |
||||
|
height: 35px; |
||||
flex-direction: row; |
flex-direction: row; |
||||
width: 100%; |
justify-content: center; |
||||
height: 100%; |
align-items: center; |
||||
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 40%, #064258 93%); |
background: linear-gradient( |
||||
|
180deg, |
||||
|
rgba(3, 60, 82, 0) 0%, |
||||
.item { |
#033c52 100% |
||||
position: relative; |
); |
||||
display: inline-flex; |
border-radius: 4px 4px 4px 4px; |
||||
width: calc(100% / 9); |
font-size: 16px; |
||||
height: 100%; |
font-family: PingFang SC, PingFang SC; |
||||
flex-direction: column; |
font-weight: 500; |
||||
justify-content: center; |
color: #ffffff; |
||||
align-items: center; |
|
||||
|
span.num { |
||||
.item-title { |
font-size: 22px; |
||||
position: relative; |
font-family: PangMenZhengDao; |
||||
display: inline-flex; |
font-weight: 400; |
||||
width: 162px; |
color: #e2b066; |
||||
height: 35px; |
position: relative; |
||||
flex-direction: row; |
display: inline-flex; |
||||
justify-content: center; |
top: 2px; |
||||
align-items: center; |
left: -2px; |
||||
background: linear-gradient(180deg, rgba(3, 60, 82, 0) 0%, #033C52 100%); |
|
||||
border-radius: 4px 4px 4px 4px; |
|
||||
font-size: 16px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 500; |
|
||||
color: #FFFFFF; |
|
||||
|
|
||||
span.num { |
|
||||
font-size: 22px; |
|
||||
font-family: PangMenZhengDao; |
|
||||
font-weight: 400; |
|
||||
color: #E2B066; |
|
||||
position: relative; |
|
||||
display: inline-flex; |
|
||||
top: 2px; |
|
||||
left: -2px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.item-body { |
|
||||
position: relative; |
|
||||
display: inline-flex; |
|
||||
width: 162px; |
|
||||
// height: 100%; |
|
||||
flex-direction: row; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
font-size: 14px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 400; |
|
||||
color: #FFFFFF; |
|
||||
margin: 20px 0; |
|
||||
|
|
||||
.icon-left { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
// position: absolute; |
|
||||
// transition: all .15s linear; |
|
||||
// top: 0; |
|
||||
// width: 100%; |
|
||||
width: 47px; |
|
||||
height: 47px; |
|
||||
margin-left: -8px; |
|
||||
margin-right: 10px; |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: auto; |
|
||||
background-position: center; |
|
||||
transition: all .18s linear; |
|
||||
|
|
||||
&::before { |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
width: 45px; |
|
||||
height: 45px; |
|
||||
border: 1px solid rgba(0, 209, 255, .5); |
|
||||
background-color: var(--bgColor); |
|
||||
border-radius: 50%; |
|
||||
z-index: -1; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
.text-right { |
|
||||
display: inline-flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.text { |
|
||||
margin-top: 7px; |
|
||||
// margin: 5px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
span.num { |
|
||||
font-size: 18px; |
|
||||
font-family: PangMenZhengDao; |
|
||||
font-weight: 400; |
|
||||
color: #E2B066; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
.line { |
.item-body { |
||||
|
position: relative; |
||||
|
display: inline-flex; |
||||
|
width: 162px; |
||||
|
// height: 100%; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
margin: 20px 0; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
// position: absolute; |
||||
|
// transition: all .15s linear; |
||||
|
// top: 0; |
||||
|
// width: 100%; |
||||
|
width: 47px; |
||||
|
height: 47px; |
||||
|
margin-left: -8px; |
||||
|
margin-right: 10px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: auto; |
||||
|
background-position: center; |
||||
|
transition: all 0.18s linear; |
||||
|
|
||||
|
&::before { |
||||
|
content: ""; |
||||
position: absolute; |
position: absolute; |
||||
width: 2px; |
width: 45px; |
||||
height: 120px; |
height: 45px; |
||||
top: 25px; |
border: 1px solid rgba(0, 209, 255, 0.5); |
||||
left: 180px; |
background-color: var(--bgColor); |
||||
background: url("~@screen/images/divide.svg"); |
border-radius: 50%; |
||||
background-repeat: no-repeat; |
z-index: -1; |
||||
background-size: 100% 100%; |
} |
||||
} |
} |
||||
|
|
||||
|
.text-right { |
||||
|
display: inline-flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.text { |
||||
|
margin-top: 7px; |
||||
|
// margin: 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
// .item::after { |
span.num { |
||||
// content: ""; |
font-size: 18px; |
||||
// position: absolute; |
font-family: PangMenZhengDao; |
||||
// display: inline-flex; |
font-weight: 400; |
||||
// top: 20px; |
color: #e2b066; |
||||
// right: 0px; |
} |
||||
// width: 1px; |
} |
||||
// height: 116px; |
} |
||||
// background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2)); |
|
||||
// opacity: 1; |
|
||||
// flex-direction: row; |
|
||||
// justify-content: center; |
|
||||
// align-items: center; |
|
||||
// } |
|
||||
|
|
||||
|
.line { |
||||
|
position: absolute; |
||||
|
width: 2px; |
||||
|
height: 120px; |
||||
|
top: 25px; |
||||
|
left: 180px; |
||||
|
background: url("~@screen/images/divide.svg"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
} |
} |
||||
|
|
||||
|
// .item::after { |
||||
|
// content: ""; |
||||
|
// position: absolute; |
||||
|
// display: inline-flex; |
||||
|
// top: 20px; |
||||
|
// right: 0px; |
||||
|
// width: 1px; |
||||
|
// height: 116px; |
||||
|
// background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2)); |
||||
|
// opacity: 1; |
||||
|
// flex-direction: row; |
||||
|
// justify-content: center; |
||||
|
// align-items: center; |
||||
|
// } |
||||
|
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|
||||
@ -1,246 +1,252 @@ |
|||||
<template> |
<template> |
||||
<div class='TrafficFlow'> |
<div class="TrafficFlow"> |
||||
<section class="foot"> |
<section class="foot"> |
||||
<div class="item keep-ratio" v-for="(item,index) in topDatas" > |
<div class="item keep-ratio" v-for="(item, index) in topDatas"> |
||||
<div class="item-title" > |
<div class="item-title"> |
||||
<span> {{ item.text }} <span class="num">{{ item.textNum }}</span>{{ item.textEnd }}</span> |
<span> |
||||
|
{{ item.text }} <span class="num">{{ item.textNum }}</span |
||||
|
>{{ item.textEnd }}</span |
||||
|
> |
||||
|
</div> |
||||
|
<div class="item-body"> |
||||
|
<div class=""> |
||||
|
<img :src="item.icon" /> |
||||
|
</div> |
||||
|
<div class="text-right"> |
||||
|
<div class="topText"> |
||||
|
已审核 <span class="num">{{ item.reviewed }}</span> 起 |
||||
</div> |
</div> |
||||
<div class="item-body" > |
<div class="bottomText"> |
||||
<div class="icon-left" > |
未审核 <span class="num">{{ item.noReviewed }}</span> 起 |
||||
<img :src="item.icon" /> |
|
||||
</div> |
|
||||
<div class="text-right" > |
|
||||
<div class="topText" > |
|
||||
已审核 <span class="num">{{ item.reviewed }}</span> 起 |
|
||||
</div> |
|
||||
<div class="bottomText" > |
|
||||
未审核 <span class="num" >{{ item.noReviewed }}</span> 起 |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</section> |
</div> |
||||
</div> |
</section> |
||||
</template> |
</div> |
||||
|
</template> |
||||
<script> |
|
||||
|
<script> |
||||
export default { |
export default { |
||||
name: 'publicService', |
name: "publicService", |
||||
components: { |
components: {}, |
||||
|
data() { |
||||
}, |
return { |
||||
data(){ |
activeName: "first", |
||||
return { |
topDatas: [ |
||||
activeName:"first", |
{ |
||||
topDatas:[ { |
text: "其他事件", |
||||
text:"其他事件", |
textEnd: "起", |
||||
textEnd:"起", |
textNum: 9, |
||||
textNum:9, |
icon: require("./assets/其他事件.png"), |
||||
icon:require("./assets/其他事件.png"), |
reviewed: 4, |
||||
reviewed:4, |
noReviewed: 5, |
||||
noReviewed:5 |
}, |
||||
},{ |
{ |
||||
text:"路障清除", |
text: "路障清除", |
||||
textEnd:"起", |
textEnd: "起", |
||||
textNum:9, |
textNum: 9, |
||||
icon:require("./assets/路障清除.png"), |
icon: require("./assets/路障清除.png"), |
||||
reviewed:4, |
reviewed: 4, |
||||
noReviewed:5 |
noReviewed: 5, |
||||
},{ |
}, |
||||
text:"车辆故障", |
{ |
||||
textEnd:"起", |
text: "车辆故障", |
||||
textNum:9, |
textEnd: "起", |
||||
icon:require("./assets/车辆故障.png"), |
textNum: 9, |
||||
reviewed:4, |
icon: require("./assets/车辆故障.png"), |
||||
noReviewed:5 |
reviewed: 4, |
||||
},{ |
noReviewed: 5, |
||||
text:"服务区异常", |
}, |
||||
textEnd:"起", |
{ |
||||
textNum:9, |
text: "服务区异常", |
||||
icon:require("./assets/服务区异常.png"), |
textEnd: "起", |
||||
reviewed:4, |
textNum: 9, |
||||
noReviewed:5 |
icon: require("./assets/服务区异常.png"), |
||||
},{ |
reviewed: 4, |
||||
text:"交通管制", |
noReviewed: 5, |
||||
textEnd:"起", |
}, |
||||
textNum:9, |
{ |
||||
icon:require("./assets/交通管制.png"), |
text: "交通管制", |
||||
reviewed:4, |
textEnd: "起", |
||||
noReviewed:5 |
textNum: 9, |
||||
},{ |
icon: require("./assets/交通管制.png"), |
||||
text:"交通拥堵", |
reviewed: 4, |
||||
textEnd:"起", |
noReviewed: 5, |
||||
textNum:9, |
}, |
||||
icon:require("./assets/交通拥堵.png"), |
{ |
||||
reviewed:4, |
text: "交通拥堵", |
||||
noReviewed:5 |
textEnd: "起", |
||||
},{ |
textNum: 9, |
||||
text:"施工建设", |
icon: require("./assets/交通拥堵.png"), |
||||
textEnd:"起", |
reviewed: 4, |
||||
textNum:9, |
noReviewed: 5, |
||||
icon:require("./assets/施工建设.png"), |
}, |
||||
reviewed:4, |
{ |
||||
noReviewed:5 |
text: "施工建设", |
||||
},{ |
textEnd: "起", |
||||
text:"异常天气", |
textNum: 9, |
||||
textEnd:"起", |
icon: require("./assets/施工建设.png"), |
||||
textNum:9, |
reviewed: 4, |
||||
icon:require("./assets/异常天气.png"), |
noReviewed: 5, |
||||
reviewed:4, |
}, |
||||
noReviewed:5 |
{ |
||||
},{ |
text: "异常天气", |
||||
text:"交通事故", |
textEnd: "起", |
||||
textEnd:"起", |
textNum: 9, |
||||
textNum:9, |
icon: require("./assets/异常天气.png"), |
||||
icon:require("./assets/交通事故.png"), |
reviewed: 4, |
||||
reviewed:4, |
noReviewed: 5, |
||||
noReviewed:5 |
}, |
||||
} |
{ |
||||
|
text: "交通事故", |
||||
] |
textEnd: "起", |
||||
} |
textNum: 9, |
||||
}, |
icon: require("./assets/交通事故.png"), |
||||
methods:{ |
reviewed: 4, |
||||
changeTabs(){ |
noReviewed: 5, |
||||
|
}, |
||||
} |
], |
||||
} |
}; |
||||
|
}, |
||||
} |
methods: { |
||||
</script> |
changeTabs() {}, |
||||
|
}, |
||||
<style lang='scss' scoped> |
}; |
||||
|
</script> |
||||
::v-deep .el-tabs__item{ |
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .el-tabs__item { |
||||
|
display: inline-flex; |
||||
|
justify-content: center; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
min-width: 128px; |
||||
|
position: relative; |
||||
|
left: 10px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__active-bar { |
||||
|
min-width: 128px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__nav-wrap::after { |
||||
|
background-color: #133242; |
||||
|
opacity: 0.1; |
||||
|
} |
||||
|
|
||||
|
.footTabs { |
||||
|
display: inline; |
||||
|
width: 99%; |
||||
|
} |
||||
|
|
||||
|
.TrafficFlow { |
||||
|
width: 100%; |
||||
|
height: 182px; |
||||
|
display: inline-flex; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425804 93%); |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
|
||||
|
.foot { |
||||
display: inline-flex; |
display: inline-flex; |
||||
justify-content: center; |
flex-direction: row; |
||||
font-size: 16px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 500; |
|
||||
color: #FFFFFF; |
|
||||
min-width:128px; |
|
||||
position: relative; |
|
||||
left:10px; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-tabs__active-bar { |
|
||||
min-width:128px; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-tabs__nav-wrap::after { |
|
||||
background-color: #133242; |
|
||||
opacity: 0.1; |
|
||||
} |
|
||||
|
|
||||
.footTabs { |
|
||||
display: inline; |
|
||||
width:99%; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.TrafficFlow { |
|
||||
width: 100%; |
width: 100%; |
||||
height: 182px; |
height: 100%; |
||||
display: inline-flex; |
|
||||
position: relative; |
.item { |
||||
z-index: 6; |
position: relative; |
||||
color: white; |
display: inline-flex; |
||||
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425804 93%); |
width: calc(100% / 9); |
||||
border-radius: 0px 0px 0px 0px; |
height: 100%; |
||||
|
flex-direction: column; |
||||
.foot { |
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
.item-title { |
||||
|
position: relative; |
||||
display: inline-flex; |
display: inline-flex; |
||||
|
width: 162px; |
||||
|
height: 35px; |
||||
flex-direction: row; |
flex-direction: row; |
||||
width:100%; |
justify-content: center; |
||||
height:100%; |
align-items: center; |
||||
|
background: linear-gradient( |
||||
.item { |
180deg, |
||||
position: relative; |
rgba(3, 60, 82, 0) 0%, |
||||
display: inline-flex; |
#033c52 100% |
||||
width: calc(100% / 9); |
); |
||||
height:100%; |
border-radius: 4px 4px 4px 4px; |
||||
flex-direction: column; |
font-size: 16px; |
||||
justify-content: center; |
font-family: PingFang SC, PingFang SC; |
||||
align-items: center; |
font-weight: 500; |
||||
|
color: #ffffff; |
||||
.item-title { |
|
||||
position: relative; |
span.num { |
||||
display: inline-flex; |
font-size: 22px; |
||||
width: 162px; |
font-family: PangMenZhengDao; |
||||
height:35px; |
font-weight: 400; |
||||
flex-direction: row; |
color: #e2b066; |
||||
justify-content: center; |
display: inline-flex; |
||||
align-items: center; |
position: relative; |
||||
background: linear-gradient(180deg, rgba(3,60,82,0) 0%, #033C52 100%); |
left: -2px; |
||||
border-radius: 4px 4px 4px 4px; |
top: 1px; |
||||
font-size: 16px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 500; |
|
||||
color: #FFFFFF; |
|
||||
|
|
||||
span.num { |
|
||||
font-size: 22px; |
|
||||
font-family: PangMenZhengDao; |
|
||||
font-weight: 400; |
|
||||
color: #E2B066; |
|
||||
display: inline-flex; |
|
||||
position: relative; |
|
||||
left:-2px; |
|
||||
top:1px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.item-body { |
|
||||
position: relative; |
|
||||
display: inline-flex; |
|
||||
width: 162px; |
|
||||
height:100%; |
|
||||
flex-direction: row; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
font-size: 14px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 400; |
|
||||
color: #FFFFFF; |
|
||||
margin-top:15px; |
|
||||
|
|
||||
img { |
|
||||
width:47px; |
|
||||
height:47px; |
|
||||
margin:0 10px; |
|
||||
margin-right:20px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
span.num { |
|
||||
font-size: 18px; |
|
||||
font-family: PangMenZhengDao; |
|
||||
font-weight: 400; |
|
||||
color: #E2B066; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
.item::after { |
.item-body { |
||||
content: ""; |
position: relative; |
||||
position: absolute; |
display: inline-flex; |
||||
display: inline-flex; |
width: 162px; |
||||
top:20px; |
height: 100%; |
||||
right:0px; |
flex-direction: row; |
||||
width: 1px; |
justify-content: center; |
||||
height: 116px; |
align-items: center; |
||||
background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2)); |
font-size: 14px; |
||||
opacity: 1; |
font-family: PingFang SC, PingFang SC; |
||||
flex-direction: row; |
font-weight: 400; |
||||
justify-content: center; |
color: #ffffff; |
||||
align-items: center; |
margin-top: 15px; |
||||
|
|
||||
|
img { |
||||
|
width: 47px; |
||||
|
height: 47px; |
||||
|
margin: 0 10px; |
||||
|
margin-right: 20px; |
||||
} |
} |
||||
|
|
||||
|
span.num { |
||||
|
font-size: 18px; |
||||
|
font-family: PangMenZhengDao; |
||||
|
font-weight: 400; |
||||
|
color: #e2b066; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
|
||||
|
.item::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
display: inline-flex; |
||||
|
top: 20px; |
||||
|
right: 0px; |
||||
|
width: 1px; |
||||
|
height: 116px; |
||||
|
background: linear-gradient( |
||||
|
90deg, |
||||
|
rgba(8, 135, 182, 0.2), |
||||
|
rgba(0, 100, 137, 1), |
||||
|
rgba(3, 60, 81, 0.2) |
||||
|
); |
||||
|
opacity: 1; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
} |
} |
||||
</style> |
} |
||||
|
</style> |
||||
|
|||||
Loading…
Reference in new issue