王钦
1 year ago
120 changed files with 2524 additions and 1127 deletions
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 666 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 356 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 460 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 475 KiB |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 798 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 467 KiB |
|
After Width: | Height: | Size: 244 KiB |
|
After Width: | Height: | Size: 211 KiB |
|
After Width: | Height: | Size: 676 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 657 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 399 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 98 KiB |
@ -0,0 +1,496 @@ |
|||
<template> |
|||
<Dialog |
|||
v-model="modelVisible" |
|||
top="10%" |
|||
:title="'新增'" |
|||
width="1000px" |
|||
> |
|||
<div class="AddNEditDialog"> |
|||
<el-form |
|||
ref="basicInfoForm" |
|||
:model="editData" |
|||
label-width="60px" |
|||
:inline="true" |
|||
:rules="groupBasicRules" |
|||
> |
|||
<el-row :gutter="5" > |
|||
<el-col :span="10"> |
|||
<el-form-item label="名称" prop="groupName"> |
|||
<el-input |
|||
v-model="editData.groupName" |
|||
placeholder="任务组名称" style="width: 320px;" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="描述" prop="remark"> |
|||
<el-input |
|||
v-model="editData.remark" |
|||
placeholder="任务组描述" style="width: 320px" |
|||
></el-input> |
|||
</el-form-item> |
|||
|
|||
</el-col> |
|||
<el-col :span="4"> |
|||
|
|||
<div style="display: flex; justify-content: center;padding-top: 5px;"> |
|||
<Button |
|||
@click.native="(modelVisible = false), (submitting = false)" |
|||
type="info" style="background-color: #3d697f;margin-right: 20px;" |
|||
> |
|||
取消 |
|||
</Button> |
|||
<Button |
|||
type="primary" |
|||
@click.native="onSaveTaskGroup" |
|||
:loading="submitting" |
|||
> |
|||
保存 |
|||
</Button> |
|||
</div></el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<div class="line" ></div> |
|||
<template > |
|||
<!-- 如果是新增的、还没有保存的任务组，不能添加任务 --> |
|||
<div class="fl-around task_op"> |
|||
<el-button size="mini" type="primary" @click="onAddTaskGroup" |
|||
>新增任务组</el-button |
|||
> |
|||
</div> |
|||
<div class="all_groups"> |
|||
<div |
|||
class="task_group" |
|||
v-for="(taskGroup, index) in taskGroupsEditing" |
|||
> |
|||
<div class="fl-around task_info"> |
|||
<div class="time_show"> |
|||
<div |
|||
class="time_label" |
|||
>{{ taskGroup.time }}</div> |
|||
<img src="./assets/editor.svg" @click="onModifyTime(taskGroup)" class="arrow" /> |
|||
|
|||
</div> |
|||
<div class="fl-around task_op"> |
|||
<el-button |
|||
size="mini" |
|||
type="primary" |
|||
@click="onAddTaskItem(index)" |
|||
>新增子任务</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
type="danger" |
|||
@click="onDeleteTaskGroup(index)" |
|||
>删除任务组</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<TaskItem |
|||
v-for="(item, idx) in taskGroup.tasksEdit" |
|||
:propData="item" |
|||
:groupIndex="[index,idx]" |
|||
@onModify="onEditTaskItem" |
|||
@onDelete="onDeleteTaskItem" |
|||
> |
|||
</TaskItem> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
|
|||
<template #footer> </template> |
|||
|
|||
<taskEditDialog |
|||
v-model="isEditing" |
|||
:groupIndex="[-1,-1]" |
|||
:propData="selectedTaskData" |
|||
@onSubmit="onSubmitTaskItem" |
|||
/> |
|||
|
|||
<timeEditDialog |
|||
v-model="isShowTimeEdit" |
|||
:propData="editingTime" |
|||
@onSubmit="onSubmitTime" |
|||
/> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import Form from "@screen/components/FormConfig"; |
|||
|
|||
import request from "@/utils/request"; |
|||
import { Message } from "element-ui"; |
|||
import { addEditFormList } from "./../data"; |
|||
|
|||
import taskEditDialog from "./taskEditDialog.vue"; |
|||
import timeEditDialog from "./timeEditDialog.vue"; |
|||
import TaskItem from "./TaskItem.vue"; |
|||
|
|||
export default { |
|||
name: "AddNEditDialog", |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Form, |
|||
TaskItem, |
|||
taskEditDialog, |
|||
timeEditDialog, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
}, |
|||
data() { |
|||
let gNameValidator = (rule, value, callback) => { |
|||
return callback(new Error("请输入任务组名称")); |
|||
}; |
|||
return { |
|||
editingTime: "", |
|||
editData: {}, |
|||
mode: "", |
|||
isEditing: false, |
|||
isShowTimeEdit: false, |
|||
group: {}, |
|||
submitting: false, |
|||
formList: addEditFormList, |
|||
taskGroupsEditing: [], |
|||
selectedTaskGroup: {}, |
|||
selectedTaskIndex: -1, |
|||
selectedTaskData: {}, |
|||
groupBasicRules: { |
|||
groupName: [ |
|||
{ required: true, message: "请输入活动名称", trigger: "blur" }, |
|||
], |
|||
}, |
|||
selectedGroupIndex: -1, |
|||
}; |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("onSuccess"); |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
watch: { |
|||
modelVisible: { |
|||
immediate: true, |
|||
handler(bool) { |
|||
if (!bool) return; |
|||
this.initEditingData(); |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
initEditingData() { |
|||
this.taskGroupsEditing = [{time:"08:00:00",tasksEdit:[]}]; |
|||
this.mode = "add"; |
|||
this.editData = { |
|||
groupName: "", |
|||
remark: "", |
|||
detailedConfiguration: '[]', |
|||
}; |
|||
}, |
|||
|
|||
|
|||
// 新增任务组 |
|||
onAddTaskGroup() { |
|||
this.editingTime = "0:0:0"; |
|||
this.isShowTimeEdit = true; |
|||
this.selectedGroupIndex = -1; |
|||
}, |
|||
onDeleteTaskGroup(index) { |
|||
this.$confirm("确定要删除任务组？", "操作确认", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
const _tastInfo = _.cloneDeep(this.taskGroupsEditing); |
|||
_tastInfo.splice(index,1); |
|||
setTimeout(() => { |
|||
this.taskGroupsEditing =_tastInfo |
|||
}, 100); |
|||
}) |
|||
.catch(() => { |
|||
this.$message.warn("取消删除。"); |
|||
}); |
|||
}, |
|||
|
|||
onAddTaskItem(taskGroupIndex) { |
|||
this.selectedTaskGroupIndex = taskGroupIndex; |
|||
this.selectedTaskIndex = -1; |
|||
this.selectedTaskData = {}; |
|||
this.isEditing = true; |
|||
}, |
|||
onDeleteTaskItem(groupIndex){ |
|||
const _tastInfo = _.cloneDeep(this.taskGroupsEditing); |
|||
_tastInfo[groupIndex[0]].tasksEdit.splice(groupIndex[1],1); |
|||
setTimeout(() => { |
|||
this.taskGroupsEditing =_tastInfo |
|||
}, 100); |
|||
}, |
|||
onEditTaskItem(groupIndex){ |
|||
this.selectedTaskGroupIndex = groupIndex[0]; |
|||
this.selectedTaskIndex = groupIndex[1]; |
|||
this.selectedTaskData = this.taskGroupsEditing[this.selectedTaskGroupIndex].tasksEdit[this.selectedTaskIndex]; |
|||
this.isEditing = true; |
|||
}, |
|||
onSubmitTaskItem(data) { |
|||
this.isEditing = false; |
|||
const tastInfo = { |
|||
direction:data.others.direction, |
|||
deviceType:data.others.deviceType, |
|||
devices: data.devices, |
|||
params:data.params, |
|||
screenSize:data.others.screenSize, |
|||
others:data.others |
|||
} |
|||
const _tastInfo = _.cloneDeep(this.taskGroupsEditing); |
|||
this.taskGroupsEditing = [] |
|||
setTimeout(() => { |
|||
if(this.selectedTaskIndex === -1){ |
|||
_tastInfo[this.selectedTaskGroupIndex].tasksEdit.push(tastInfo) |
|||
} else { |
|||
_tastInfo[this.selectedTaskGroupIndex].tasksEdit[this.selectedTaskIndex] = tastInfo |
|||
} |
|||
this.taskGroupsEditing =_tastInfo |
|||
}, 100); |
|||
|
|||
}, |
|||
|
|||
|
|||
onModifyTime(taskG) { |
|||
this.editingTime = taskG.time; |
|||
this.selectedTaskGroup = taskG; |
|||
this.isShowTimeEdit = true; |
|||
}, |
|||
onSubmitTime(time) { |
|||
this.isShowTimeEdit = false; |
|||
let aryTime = time.split(':') |
|||
if(aryTime.length === 3){ |
|||
if(aryTime[0].length === 1){ |
|||
aryTime[0] = '0'+aryTime[0] |
|||
} |
|||
if(aryTime[1].length === 1){ |
|||
aryTime[1] = '0'+aryTime[1] |
|||
} |
|||
if(aryTime[2].length === 1){ |
|||
aryTime[2] = '0'+aryTime[1] |
|||
} |
|||
} |
|||
let _time = aryTime.join(':'); |
|||
if (Object.keys(this.selectedTaskGroup).length > 0) { |
|||
|
|||
this.selectedTaskGroup.time = _time; |
|||
this.selectedTaskGroup = {}; |
|||
} else { |
|||
this.taskGroupsEditing.push({ time:_time, tasksEdit: [] }); |
|||
} |
|||
}, |
|||
onSaveTaskGroup() { |
|||
this.$refs['basicInfoForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return; |
|||
} |
|||
let submitForm = { |
|||
groupName: this.editData.groupName.trim(), |
|||
status: "1", |
|||
remark: this.editData.remark.trim(), |
|||
detailedConfiguration: "", |
|||
dcBatchFunctionsJobList:[] |
|||
} |
|||
function formatParamter (devices, params, others){ |
|||
let functions; |
|||
let deviceType = others.deviceType; |
|||
if (deviceType == '2'){ //情报板 |
|||
functions = [ |
|||
{ |
|||
"functionId": "11", |
|||
"params": { |
|||
"size": "65535", |
|||
"fileName": "play012.lst" |
|||
} |
|||
}, |
|||
{ |
|||
"functionId": "13", |
|||
"params": { |
|||
parameters: [params] |
|||
} |
|||
}, |
|||
{ |
|||
"functionId": "1B", |
|||
"params": { |
|||
"fileId": "12" |
|||
} |
|||
} |
|||
|
|||
] |
|||
} else if (deviceType == '5'){ //语音广播 |
|||
functions = [ |
|||
{ |
|||
"functionId": "", |
|||
"params": { |
|||
"name": "task-3", |
|||
"outVol": "6", |
|||
"priority": "1", |
|||
"text": params.text, |
|||
"repeatTimes": "3", |
|||
"termList": [ |
|||
{ |
|||
"zoneld": "6001", |
|||
"termDN": "601" |
|||
} |
|||
], |
|||
"functionType": "startPaTts" |
|||
} |
|||
} |
|||
] |
|||
|
|||
} else if (deviceType == '10') { //疲劳唤醒 |
|||
functions = [ |
|||
{ |
|||
"functionId": "SETMD", |
|||
"params": { SET: params.SETMD } |
|||
}, |
|||
{ |
|||
"functionId": "SETTM", |
|||
"params": { SET: params.SETTM } |
|||
} |
|||
] |
|||
} else if (deviceType == '12') { //行车诱导 |
|||
// { mode: "00", onWorkStatus: "01", inWorkStatus: "02" } |
|||
functions = [{ functionId: "51", params }] |
|||
} else if (deviceType == '13') { //智能设备箱 |
|||
functions = [ |
|||
{ |
|||
"functionId": "SETMD", |
|||
"params": { SET: params.SETMD } |
|||
}, |
|||
{ |
|||
"functionId": "SETTM", |
|||
"params": { SET: params.SETTM } |
|||
} |
|||
] |
|||
} |
|||
|
|||
let temp = { |
|||
...others, |
|||
devices, |
|||
functions |
|||
}; |
|||
return temp |
|||
} |
|||
this.taskGroupsEditing.forEach((t,idx) => { |
|||
let arycallParameter = []; |
|||
t.tasksEdit.forEach(e=>{ |
|||
arycallParameter.push(formatParamter(e.devices,e.params,e.others)) |
|||
}) |
|||
submitForm.dcBatchFunctionsJobList.push({ |
|||
"jobId": idx, |
|||
"jobName": "", |
|||
"invokeTarget": "com.zc.business.task.ScheduledTaskSchedulingTask.invokeTarget()", |
|||
"callParameter": JSON.stringify(arycallParameter), |
|||
"status": "0", |
|||
"time": t.time |
|||
}) |
|||
}); |
|||
this.submitting = true; |
|||
|
|||
request({ |
|||
url: `/business/dcBatchFunctionsJobGroup/add`, |
|||
method: "POST", |
|||
data: submitForm, |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return; |
|||
|
|||
Message.success(`保存成功`); |
|||
this.$emit("onSuccess"); |
|||
}) |
|||
.catch((err) => { |
|||
console.log( |
|||
"%c [ err ]-110-「DeviceControlDialog.vue」", |
|||
"font-size:15px; background:#547bf2; color:#98bfff;", |
|||
err |
|||
); |
|||
// Message.error(`保存失败`); |
|||
}) |
|||
.finally(() => { |
|||
this.submitting = false; |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.AddNEditDialog { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.tips { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
.line{ |
|||
height:1px; |
|||
width: 100%; |
|||
border-bottom: 1px dashed #00B3CC; |
|||
} |
|||
.all_groups { |
|||
max-height: 500px; |
|||
overflow-y: scroll; |
|||
padding-right: 5px; |
|||
} |
|||
.task_group { |
|||
border: 1px solid #09b; |
|||
margin-bottom: 20px; |
|||
.task_info { |
|||
padding: 10px; |
|||
background: #004050; |
|||
.time_show { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.time_label{ |
|||
width: 160px; |
|||
border:1px solid #2B93A5; |
|||
border-radius: 5px; |
|||
color:#2ab8a9; |
|||
height: 22px; |
|||
line-height: 20px; |
|||
padding-left: 5px; |
|||
} |
|||
.arrow{ |
|||
width:20px; |
|||
height: 20px; |
|||
margin-left: 10px; |
|||
cursor: pointer; |
|||
} |
|||
color: #0ac; |
|||
} |
|||
} |
|||
.task_op { |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,226 @@ |
|||
<template> |
|||
<div class="task_editor_box" v-if="isCompReady"> |
|||
<div class="flex main_ctt"> |
|||
<div class="device_type"> |
|||
<span v-if="editData.deviceType">{{ deviceTypeDic[editData.deviceType].label }}</span> |
|||
</div> |
|||
<div class="devices"> |
|||
<template v-if="editData.devices"> |
|||
<span v-for="item, index in editData.devices" v-if="index < 1" class="title"> |
|||
{{ item.deviceName }} |
|||
</span> |
|||
<span v-if="editData.devices.length > 1" class="other">+{{ editData.devices.length - 1 }}</span> |
|||
</template> |
|||
</div> |
|||
<div class="content"> |
|||
<template v-if="editData.deviceType == '2'"> |
|||
<BoardRecordPreview :tpl="editData.params" class="board"> |
|||
</BoardRecordPreview> |
|||
</template> |
|||
<template v-if="editData.deviceType == '5'"> |
|||
<div class="textArea">{{ editData.params.text }}</div> |
|||
</template> |
|||
<template v-if="editData.deviceType == '10' || editData.deviceType == '13'"> |
|||
<div class="center mode10"> |
|||
<div class="mode10_m"> |
|||
<div |
|||
:class="awakerWorkModeDic[editData.params.SETMD] !== '常亮模式' ? 'mode10_mc mode10_mc2' : 'mode10_mc mode10_mc1'"> |
|||
</div>{{ awakerWorkModeDic[editData.params.SETMD] }} |
|||
</div> |
|||
<div>时长：<span style="color:#15a5c0">{{ editData.params.SETTM }}分钟</span></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<template v-if="editData.deviceType == '12'"> |
|||
<div class="center mode10"> |
|||
<div class="mode10_m"> |
|||
<div |
|||
:class="inducerModeDic[editData.params.mode] !== '常亮模式' ? 'mode10_mc mode10_mc2' : 'mode10_mc mode10_mc1'"> |
|||
</div>{{ inducerModeDic[editData.params.mode] }} |
|||
</div> |
|||
<div> |
|||
<p>上行：{{ inducerWorkType[editData.params.onWorkStatus] }}</p> |
|||
<p>下行：{{ inducerWorkType[editData.params.inWorkStatus] }}</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
</div> |
|||
<div class="button"> |
|||
<el-button type="primary" icon="el-icon-edit" size="mini" circle @click="onModify"></el-button> |
|||
<el-button type="danger" icon="el-icon-delete" size="mini" circle @click="onDelete"></el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import request from "@/utils/request"; |
|||
import { deviceTypeDic, awakerWorkModeDic, inducerWorkTypeDic, inducerModeDic } from "@screen/utils/enum.js" |
|||
import { getDeviceList } from "@screen/utils/api/device.js" |
|||
import BoardRecordPreview from '@screen/components/infoBoard/BoardRecordPreview.vue' |
|||
export default { |
|||
name: "TaskItem", |
|||
components: { |
|||
BoardRecordPreview |
|||
}, |
|||
props: { |
|||
groupIndex: Array, |
|||
propData: Object |
|||
}, |
|||
data() { |
|||
return { |
|||
isCompReady: false, |
|||
editData: {}, |
|||
isEditingTask: false, |
|||
selectedType: "", |
|||
deviceTypeDic: "", |
|||
awakerWorkModeDic: "", |
|||
inducerModeDic: "", |
|||
inducerWorkType: "", |
|||
deviceDic: {}, |
|||
deviceList: [] |
|||
}; |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
mounted() { |
|||
this.deviceTypeDic = deviceTypeDic; |
|||
this.awakerWorkModeDic = awakerWorkModeDic; |
|||
this.inducerModeDic = inducerModeDic; |
|||
this.inducerWorkType = inducerWorkTypeDic; |
|||
|
|||
this.editData = { |
|||
direction: this.propData.direction, |
|||
deviceType: this.propData.deviceType, |
|||
devices: this.propData.devices, |
|||
params: this.propData.params, |
|||
screenSize: this.propData.screenSize |
|||
}; |
|||
this.isCompReady = true; |
|||
}, |
|||
methods: { |
|||
onModify() { |
|||
this.$emit("onModify", this.groupIndex); |
|||
}, |
|||
onDelete() { |
|||
this.$emit("onDelete", this.groupIndex); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.task_editor_box { |
|||
.main_ctt { |
|||
align-items: stretch; |
|||
border-top: 1px dashed #0AC; |
|||
padding: 6px 8px; |
|||
max-height: 80px; |
|||
|
|||
.device_type { |
|||
width: 200px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
|
|||
.devices { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
|
|||
span { |
|||
font-size: 14px; |
|||
margin: 0 4px 3px 0; |
|||
border-radius: 3px; |
|||
white-space: nowrap; |
|||
word-break: break-all; |
|||
float: left; |
|||
} |
|||
|
|||
.title { |
|||
border: 1px solid #0AC; |
|||
padding: 2px 8px; |
|||
} |
|||
|
|||
.other { |
|||
padding: 3px 5px; |
|||
border: 1px solid #00b3cc; |
|||
color: #00b3cc; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
width: 300px; |
|||
display: flex; |
|||
align-items: stretch; |
|||
|
|||
.board { |
|||
flex: 1; |
|||
} |
|||
|
|||
.textArea { |
|||
flex: 1; |
|||
display: flex; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
background-color: #000; |
|||
color: yellow; |
|||
} |
|||
|
|||
.center { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
|
|||
.button { |
|||
width: 120px; |
|||
margin-left: 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.mode10 { |
|||
display: flex; |
|||
flex-direction: row !important; |
|||
justify-content: flex-start !important; |
|||
|
|||
.mode10_m { |
|||
margin-right: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.mode10_mc { |
|||
width: 10px; |
|||
height: 10px; |
|||
border-radius: 50%; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.mode10_mc1 { |
|||
background-color: #15a5c0; |
|||
} |
|||
|
|||
.mode10_mc2 { |
|||
width: 10px; |
|||
background-color: #eef54e; |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,466 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="修改" width="600px" label-width="120px"> |
|||
|
|||
<el-form> |
|||
<el-form-item label="设备类型"> |
|||
<!-- <el-radio-group v-model="searchData.deviceType" @input="onChange"> |
|||
<el-radio-button v-for="item in deviceTypeOptions" :key="item.value" :label="item.label" :value="item.value" |
|||
v-if="item.timingControl"></el-radio-button> |
|||
</el-radio-group> --> |
|||
<el-select v-model="searchData.deviceType" placeholder="请选择设备类型" @change="onSelectDeviceType" |
|||
:disabled="mode=='edit'"> |
|||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.label" :value="item.value+''" |
|||
v-if="item.timingControl"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="方向"> |
|||
<el-select v-model="searchData.direction" placeholder="请选择方向" @change="onChange" clearable> |
|||
<el-option v-for="item in directionOptions" :key="item.value" :label="item.label" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="选择设备" v-if="searchData.deviceType != '2'"> |
|||
<el-select v-model="editData.devices" multiple placeholder="请选择设备" filterable> |
|||
<el-option v-for="item in deviceArr" :key="item.id" :label="item.deviceName" :value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<template v-if="searchData.deviceType=='2'"> |
|||
|
|||
<el-form-item label="屏幕像素"> |
|||
<el-select v-model="filterData.screenSize" placeholder="请选择" clearable @change="resetEditData"> |
|||
<el-option v-for="item in boardPixelOptions" :key="item.value" :label="item.label" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="选择设备"> |
|||
<el-select v-model="editData.devices" multiple placeholder="请选择设备" filterable> |
|||
<el-option v-for="item in deviceArr" :key="item.id" :label="item.deviceName" :value="item.id" |
|||
v-if="item.screenSize == filterData.screenSize"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="预览" v-if="filterData.screenSize"> |
|||
<div class="tplItem"> |
|||
<!-- 模板内容 --> |
|||
<BoardPreview class="boardPreview" :boardWH="filterData.screenSize" :tpl="editData.type2" /> |
|||
<!-- 操作按钮 --> |
|||
<div class="infoBtnBox"> |
|||
<el-tooltip content="编辑" placement="top"> |
|||
<p @click="onEditBoard" class="btn btnEdit"></p> |
|||
</el-tooltip> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
</template> |
|||
|
|||
<template v-else-if="searchData.deviceType == '5'"> |
|||
<!-- 语音广播 --> |
|||
<el-form-item label="广播内容"> |
|||
<el-input type="textarea" :maxlength="150" v-model="editData.type5.text"></el-input> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<template v-else-if="searchData.deviceType == '10'"> |
|||
<!-- 激光疲劳唤醒 --> |
|||
<el-form-item label="工作模式"> |
|||
<el-select v-model="editData.type10.SETMD" placeholder="请选择"> |
|||
<el-option v-for="value,key in awakerWorkModeDic" :key="key" :label="value" :value="key" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="工作时长"> |
|||
<el-col :span="8"> |
|||
<el-input-number v-model="editData.type10.SETTM" :min="0" :max="100000" /> |
|||
</el-col> |
|||
<el-col :span="4" style="margin-left: 10px;">分钟</el-col> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<template v-else-if="searchData.deviceType == '12'"> |
|||
<!-- 行车诱导 --> |
|||
<el-alert title="行车诱导设备开启后无法自动关闭，需要再新增一个定时任务将其关闭。" type="warning" :closable="false" show-icon> |
|||
</el-alert> |
|||
<el-form-item label="工作模式(定时控制只能使用手动模式)"> |
|||
<el-select v-model="editData.type12.mode" placeholder="请选择" disabled> |
|||
<el-option v-for="value, key in inducerModeDic" :key="key" :label="value" :value="key" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="上行工作模式"> |
|||
<el-select v-model="editData.type12.onWorkStatus" placeholder="请选择"> |
|||
<el-option v-for="value, key in inducerWorkTypeDic" :key="key" :label="value" :value="key" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="下行工作模式"> |
|||
<el-select v-model="editData.type12.inWorkStatus" placeholder="请选择"> |
|||
<el-option v-for="value, key in inducerWorkTypeDic" :key="key" :label="value" :value="key" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<template v-else-if="searchData.deviceType == '13'"> |
|||
<!-- 智能设备箱 --> |
|||
<el-form-item label="工作模式"> |
|||
<el-select v-model="editData.type13.SETMD" placeholder="请选择"> |
|||
<el-option v-for="value, key in awakerWorkModeDic" :key="key" :label="value" :value="key" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="工作时长"> |
|||
<el-col :span="8"> |
|||
<el-input-number v-model="editData.type13.SETTM" :min="0" :max="100000" /> |
|||
</el-col> |
|||
<el-col :span="4" style="margin-left: 10px;">分钟</el-col> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
|
|||
<el-form-item style="display: flex; justify-content: flex-end;"> |
|||
<el-button size="mini" type="primary" @click="onSubmit">保存</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" |
|||
:visible.sync="editDialog.visible" :screenSize="filterData.screenSize" :tpl="editDialog.tpl"></BoardInfoEditor> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import { deviceTypeOptions, directionOptions, awakerWorkModeDic, inducerModeDic, inducerWorkTypeDic } from "@screen/utils/enum.js" |
|||
import { getDeviceList } from "@screen/utils/api/device.js" |
|||
import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue"; |
|||
import BoardInfoEditor from "@screen/components/infoBoard/BoardInfoEditor"; |
|||
import BoardUtils from "@screen/utils/infoBoard.js" |
|||
import { submitTaskRequest } from "@screen/utils/api/batch.js" |
|||
export default { |
|||
name: "taskEditDialog", |
|||
components: { |
|||
Dialog, BoardInfoEditor, BoardPreview |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
deviceDic:Object, |
|||
deviceList:Array, |
|||
groupId: Number, |
|||
time: String, |
|||
visible: Boolean, |
|||
propData: Object |
|||
}, |
|||
data() { |
|||
return { |
|||
mode:"add", |
|||
deviceTypeOptions, |
|||
directionOptions, |
|||
awakerWorkModeDic, |
|||
inducerModeDic, |
|||
inducerWorkTypeDic, |
|||
deviceArr:[], |
|||
searchData: { |
|||
deviceType: "", |
|||
direction: "" |
|||
}, |
|||
filterData:{ |
|||
screenSize:"" |
|||
}, |
|||
editData:{ |
|||
devices:[], |
|||
type2:{}, |
|||
type5:{}, |
|||
type10:{}, |
|||
type12:{}, |
|||
type13:{} |
|||
}, |
|||
editDialog:{} |
|||
}; |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
watch: { |
|||
modelVisible: { |
|||
immediate: true, |
|||
handler(bool) { |
|||
if (!bool) return; |
|||
this.initBasicData(); |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
async initBasicData(){ |
|||
|
|||
//把props传来的数据转化一下，用来编辑 |
|||
if (this.propData.deviceType){ |
|||
this.searchData.deviceType = this.propData.deviceType; |
|||
this.searchData.direction = this.propData.direction; |
|||
this.filterData.screenSize = this.propData.screenSize; |
|||
await this.onChange(); |
|||
this.editData.devices = _.map(this.propData.devices, "id"); |
|||
|
|||
if (this.propData.deviceType == "2"){ |
|||
this.editData.type2 = BoardUtils.contentToDeviceItem(this.propData.params); |
|||
} else if (["5","10","13"].includes(this.propData.deviceType)){ |
|||
this.editData["type" + this.propData.deviceType] = { ...this.propData.params}; |
|||
} else if (["12"].includes(this.propData.deviceType)) { |
|||
this.editData["type" + this.propData.deviceType] = { ...this.propData.params }; |
|||
} |
|||
this.editData |
|||
|
|||
}else{ |
|||
this.searchData.deviceType = ""; |
|||
this.searchData.direction = ""; |
|||
this.filterData.screenSize = ""; |
|||
this.editData = { |
|||
devices:[], |
|||
type2:{}, |
|||
type5:{}, |
|||
type10:{}, |
|||
type12:{}, |
|||
type13:{} |
|||
}; |
|||
} |
|||
}, |
|||
onEditBoard(){ |
|||
let arr = this.filterData.screenSize.split("*"); |
|||
console.log(arr, "传入的尺寸") |
|||
this.editDialog = { |
|||
visible: true, |
|||
mode: this.mode, |
|||
type: "device", |
|||
tpl: { |
|||
...this.editData.type2, |
|||
origin:{ |
|||
displayAreaWidth: arr[0], |
|||
displayAreaHeight: arr[1] |
|||
} |
|||
} |
|||
}; |
|||
}, |
|||
____onEditSubmit(data){ |
|||
|
|||
this.editDialog.visible = false; |
|||
this.editData.type2 = data.data; |
|||
}, |
|||
onSubmit(){ |
|||
// this.boardDataTransform(); |
|||
let devices = []; |
|||
this.deviceArr.forEach((item,index)=>{ |
|||
if (this.editData.devices.includes(item.id)){ |
|||
let temp = { |
|||
id: item.id, |
|||
deviceName: item.deviceName, |
|||
iotDeviceId: item.iotDeviceId, |
|||
deviceType: item.deviceType, |
|||
direction: item.direction |
|||
} |
|||
if(item.type == '2'){ |
|||
temp.screenSize = item.screenSize; |
|||
} |
|||
devices.push(temp); |
|||
} |
|||
}); |
|||
|
|||
if(this.searchData.deviceType === ''){ |
|||
this.$message.error('请选择设备类型') |
|||
return; |
|||
} |
|||
|
|||
if(devices.length === 0){ |
|||
this.$message.error('请选择设备') |
|||
return; |
|||
} |
|||
let params = this.processParams(); |
|||
// 语音广播 |
|||
if(this.searchData.deviceType == "5" && (!params.text || params.text === '')){ |
|||
this.$message.error('请输入广播内容') |
|||
return; |
|||
} |
|||
// 激光疲劳 |
|||
if(this.searchData.deviceType == "10"){ |
|||
if(!params.SETMD){ |
|||
this.$message.error('请选择工作模式') |
|||
return; |
|||
} |
|||
|
|||
if(params.SETTM === undefined){ |
|||
this.$message.error('请输入工作时长') |
|||
return; |
|||
} |
|||
} |
|||
console.log(params.SETTM,333) |
|||
// 行车诱导 |
|||
if(this.searchData.deviceType == "12"){ |
|||
if(!params.inWorkStatus){ |
|||
this.$message.error('请选择上行工作模式') |
|||
return; |
|||
} |
|||
if(!params.onWorkStatus){ |
|||
this.$message.error('请选择下行工作模式') |
|||
return; |
|||
} |
|||
} |
|||
this.$emit("onSubmit",{ |
|||
devices, params, others:{ direction: this.searchData.direction, deviceType: this.searchData.deviceType, screenSize: this.filterData.screenSize }}) |
|||
}, |
|||
processParams(){ |
|||
if(this.searchData.deviceType == "2"){ |
|||
return BoardUtils.deviceItemToContent(this.editData.type2); |
|||
}else if(this.searchData.deviceType == "5"){ |
|||
return { |
|||
text : this.editData.type5.text |
|||
} |
|||
} else if (this.searchData.deviceType == "10") { |
|||
return { |
|||
SETMD: this.editData.type10.SETMD, |
|||
SETTM: this.editData.type10.SETTM |
|||
} |
|||
} else if (this.searchData.deviceType == "12") { |
|||
return this.editData.type12 |
|||
} else if (this.searchData.deviceType == "13") { |
|||
return { |
|||
SETMD: this.editData.type13.SETMD, |
|||
SETTM: this.editData.type13.SETTM |
|||
} |
|||
} |
|||
}, |
|||
onSelectDeviceType(){ |
|||
if (Object.keys(this.editData['type' + this.searchData.deviceType]).length<=0){ |
|||
this.editData['type'+this.searchData.deviceType] = {}; |
|||
} |
|||
if (this.searchData.deviceType == "12") { |
|||
this.$set(this.editData["type" + this.searchData.deviceType], "mode", "00"); |
|||
} |
|||
this.onChange(); |
|||
}, |
|||
async onChange() { |
|||
this.resetEditData(); |
|||
this.deviceArr = []; |
|||
const res = await getDeviceList(this.searchData) |
|||
if (this.searchData.deviceType == '2'){ |
|||
res.data.forEach(item => { |
|||
item.screenSize = JSON.parse(item.otherConfig).screenSize; |
|||
// this.deviceArr.push(item); |
|||
}) |
|||
} |
|||
this.deviceArr = res.data; |
|||
|
|||
}, |
|||
resetEditData(){ |
|||
this.editData.devices = []; |
|||
let arr = this.filterData.screenSize.split("*"); |
|||
this.editData.type2 = { |
|||
origin:{ |
|||
displayAreaWidth: +arr[0], |
|||
displayAreaHeight: +arr[1] |
|||
} |
|||
}; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.AddNEditDialog { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.tips { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
.task{ |
|||
border: 1px solid #FFF; |
|||
.task_info{ |
|||
} |
|||
.task_op{ |
|||
} |
|||
} |
|||
|
|||
.tplItem { |
|||
margin-right: 14px; |
|||
display: flex; |
|||
align-items: stretch; |
|||
padding-bottom: 10px; |
|||
|
|||
.boardPreview { |
|||
border: 1px solid rgba(61, 232, 255, 0.5); |
|||
// width: 560px; |
|||
// height:80px; |
|||
flex: 1; |
|||
} |
|||
|
|||
.infoBtnBox { |
|||
&.infoBtnBoxSm { |
|||
width: 60px; |
|||
} |
|||
|
|||
width: 110px; |
|||
height: 80px; |
|||
display: flex; |
|||
margin-left: 10px; |
|||
/* // border: solid 1px #05afe3; */ |
|||
border: 1px solid rgba(61, 232, 255, 0.5); |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
.btn { |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 30px; |
|||
height: 30px; |
|||
|
|||
&.btnApply { |
|||
background-image: url(~@/assets/jihe/images/button/toLeft.svg); |
|||
} |
|||
|
|||
&.btnEdit { |
|||
background-image: url(~@/assets/jihe/images/button/edit.svg); |
|||
} |
|||
|
|||
&.btnDelete { |
|||
background-image: url(~@/assets/jihe/images/button/delete.svg); |
|||
} |
|||
} |
|||
|
|||
i { |
|||
font-size: 24px; |
|||
color: #666; |
|||
padding-left: 4px; |
|||
cursor: pointer; |
|||
caret-color: rgba(0, 0, 0, 0); |
|||
user-select: none; |
|||
} |
|||
|
|||
i:hover { |
|||
color: #05afe3; |
|||
} |
|||
|
|||
.disabledClass { |
|||
pointer-events: none; |
|||
cursor: auto !important; |
|||
color: #ccc; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="触发时间设置" width="400px" label-width="120px"> |
|||
<el-form> |
|||
<el-form-item label="时(支持cron表达式)"> |
|||
<el-input-number :min="0" :max="24" v-model="editData.hour"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item label="分(支持cron表达式)"> |
|||
<el-input-number :min="0" :max="59" v-model="editData.minute"></el-input-number> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="秒(固定值 0)"> |
|||
<el-input-number value="0" :disabled="true"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button size="mini" type="primary" @click="onSubmit">保存</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
export default { |
|||
name: "timeEditDialog", |
|||
components: { |
|||
Dialog |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
propData: String |
|||
}, |
|||
data() { |
|||
return { |
|||
editData:{ |
|||
hour:"", |
|||
minute:"" |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
watch: { |
|||
modelVisible: { |
|||
immediate: true, |
|||
handler(bool) { |
|||
if (!bool) return; |
|||
this.transformData(); |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
onSubmit(){ |
|||
let time = [this.editData.hour, this.editData.minute, "00"].join(":"); |
|||
this.$emit("onSubmit", time) |
|||
}, |
|||
transformData(){ |
|||
let arr = this.propData.split(":"); |
|||
this.editData.hour = arr[0]; |
|||
this.editData.minute = arr[1]; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.AddNEditDialog { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.tips { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
.task{ |
|||
border: 1px solid #FFF; |
|||
.task_info{ |
|||
} |
|||
.task_op{ |
|||
} |
|||
} |
|||
|
|||
.tplItem { |
|||
margin-right: 14px; |
|||
display: flex; |
|||
align-items: stretch; |
|||
padding-bottom: 10px; |
|||
|
|||
.boardPreview { |
|||
border: 1px solid rgba(61, 232, 255, 0.5); |
|||
// width: 560px; |
|||
// height:80px; |
|||
flex: 1; |
|||
} |
|||
|
|||
.infoBtnBox { |
|||
&.infoBtnBoxSm { |
|||
width: 60px; |
|||
} |
|||
|
|||
width: 110px; |
|||
height: 80px; |
|||
display: flex; |
|||
margin-left: 10px; |
|||
/* // border: solid 1px #05afe3; */ |
|||
border: 1px solid rgba(61, 232, 255, 0.5); |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
.btn { |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 30px; |
|||
height: 30px; |
|||
|
|||
&.btnApply { |
|||
background-image: url(~@/assets/jihe/images/button/toLeft.svg); |
|||
} |
|||
|
|||
&.btnEdit { |
|||
background-image: url(~@/assets/jihe/images/button/edit.svg); |
|||
} |
|||
|
|||
&.btnDelete { |
|||
background-image: url(~@/assets/jihe/images/button/delete.svg); |
|||
} |
|||
} |
|||
|
|||
i { |
|||
font-size: 24px; |
|||
color: #666; |
|||
padding-left: 4px; |
|||
cursor: pointer; |
|||
caret-color: rgba(0, 0, 0, 0); |
|||
user-select: none; |
|||
} |
|||
|
|||
i:hover { |
|||
color: #05afe3; |
|||
} |
|||
|
|||
.disabledClass { |
|||
pointer-events: none; |
|||
cursor: auto !important; |
|||
color: #ccc; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@ -1,120 +0,0 @@ |
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
|
|||
export const tabMap = { |
|||
AlarmEvents: { |
|||
state: 5, |
|||
textColor: "#007FF4", |
|||
text: "去确认", |
|||
}, |
|||
EventsConfirmed: { |
|||
state: 5, |
|||
textColor: "#007FF4", |
|||
text: "去确认", |
|||
}, |
|||
DisposingEvents: { |
|||
state: 4, |
|||
textColor: "#007FF4", |
|||
text: "去处置", |
|||
}, |
|||
IncidentDisposed: { |
|||
state: 3, |
|||
textColor: "#007FF4", |
|||
text: "处置记录", |
|||
}, |
|||
}; |
|||
|
|||
export const searchFormList = [ |
|||
{ |
|||
label: "时间范围:", |
|||
key: "time", |
|||
required: true, |
|||
type: "datePicker", |
|||
default: [ |
|||
moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"), |
|||
moment().format("YYYY-MM-DD HH:mm:ss"), |
|||
], |
|||
options: { |
|||
format: "yyyy-MM-dd", |
|||
type: "daterange", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "设备类型:", |
|||
key: "type", |
|||
required: true, |
|||
type: "select", |
|||
default: "1-1", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
value: "1-1", |
|||
label: "高清网络枪型固定摄像机", |
|||
}, |
|||
{ |
|||
value: "1-2", |
|||
label: "高清网络球形摄像机", |
|||
}, |
|||
{ |
|||
value: "1-3", |
|||
label: "桥下高清网络球形摄像机", |
|||
}, |
|||
{ |
|||
value: "1-4", |
|||
label: "360°全景摄像机", |
|||
}, |
|||
{ |
|||
value: "1-5", |
|||
label: "180°全景摄像机", |
|||
}, |
|||
{ |
|||
value: "2-1", |
|||
label: "门架式可变信息标志", |
|||
}, |
|||
{ |
|||
value: "2-3", |
|||
label: "雨棚可变信息标志", |
|||
}, |
|||
{ |
|||
value: "2-4", |
|||
label: "站前悬臂式可变信息标志", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "气象检测器", |
|||
}, |
|||
{ |
|||
value: "5", |
|||
label: "路段语音广播系统", |
|||
}, |
|||
{ |
|||
value: "6", |
|||
label: "护栏碰撞预警系统", |
|||
}, |
|||
{ |
|||
value: "7", |
|||
label: "毫米波雷达", |
|||
}, |
|||
{ |
|||
value: "8", |
|||
label: "合流区预警系统", |
|||
}, |
|||
{ |
|||
value: "10", |
|||
label: "激光疲劳唤醒", |
|||
}, |
|||
{ |
|||
value: "11", |
|||
label: "一类交通量调查站", |
|||
}, |
|||
{ |
|||
value: "12", |
|||
label: "智能行车诱导系统", |
|||
}, |
|||
{ |
|||
value: "13", |
|||
label: "智能设备箱", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
@ -1,673 +0,0 @@ |
|||
<template> |
|||
<div class="statisticAnalysis"> |
|||
<el-tabs class="full_tab" v-model="activeName" @tab-click="changeTabs"> |
|||
<el-tab-pane label="设备分析" name="first" class="tab_con"> |
|||
<DeviceSummary |
|||
class="deviceSummary" |
|||
:dataList="equipments" |
|||
></DeviceSummary> |
|||
<div class="bottomTabs"> |
|||
<DeviceUptime :dataList="equipments" class="tabs-lo" /> |
|||
<OnLineBarCharts :dataList="sectionData" class="tabs-mo" /> |
|||
<!-- <MonthlyEquipment class="tabs-mo" :dataList="equipments" /> --> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="设备查询" name="second" class="tab_con"> |
|||
<div class="topdiv"> |
|||
<div class="left-div"> |
|||
<el-button |
|||
size="mini" |
|||
icon="el-icon-refresh-left" |
|||
class="btnSearch" |
|||
@click="onRefreshData" |
|||
>刷新</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
icon="el-icon-download" |
|||
class="btnSearch" |
|||
@click="SystemStatusExport" |
|||
>导出Excel</el-button |
|||
> |
|||
</div> |
|||
<div class="right-div"> |
|||
<InputSearch |
|||
:formList="searchFormList" |
|||
@handleSearch="handleSearch" |
|||
/> |
|||
<!-- :placeholder="searchText" --> |
|||
</div> |
|||
</div> |
|||
<div class="queryChart"> |
|||
<!-- v-if="isEmpty01" --> |
|||
<Empty |
|||
v-if="isEmpty01" |
|||
class="floatEmpty" |
|||
:text="emptyText01" |
|||
></Empty> |
|||
<div ref="queryChart" class="keep-ratio"></div> |
|||
</div> |
|||
<div style="position: relative; bottom: 15px"> |
|||
<Empty |
|||
v-if="isEmpty02" |
|||
class="floatEmpty" |
|||
:text="emptyText02" |
|||
></Empty> |
|||
<el-table |
|||
:border="false" |
|||
:data="tableData" |
|||
height="420" |
|||
header-align="left" |
|||
empty-text=" " |
|||
> |
|||
<el-table-column prop="order" label="序号" width="80"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="deviceName" |
|||
label="设备名称" |
|||
></el-table-column> |
|||
<el-table-column prop="deviceNo" label="设备桩号"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="direction" |
|||
label="方向" |
|||
class-name="showClass" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
scope.row.direction == "1" |
|||
? "菏泽" |
|||
: scope.row.direction == "2" |
|||
? "双向" |
|||
: "济南" |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="deviceIp" label="设备IP"> </el-table-column> |
|||
<el-table-column prop="production" label="厂家"> </el-table-column> |
|||
<!-- <el-table-column prop="model" label="型号"> </el-table-column> --> |
|||
<!-- <el-table-column prop="network" label="网段"> </el-table-column> --> |
|||
<el-table-column prop="time" label="监测时间"> </el-table-column> |
|||
<el-table-column prop="deviceStatus" label="设备状态"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.deviceStatus == 1">在线</div> |
|||
<div v-if="scope.row.deviceStatus == 0" style="color: #bbb"> |
|||
离线 |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="footer"> |
|||
<Pagination |
|||
@current-change="changePage" |
|||
width="'100%'" |
|||
:page-size="pageSize" |
|||
:current-page.sync="pageIndex" |
|||
layout="total, sizes, prev, pager, next" |
|||
:total="pageTotal" |
|||
@size-change="handleSizeChange" |
|||
> |
|||
</Pagination> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import onlineCharts from "./assets/charts"; |
|||
// import barCharts from "./assets/barCharts"; |
|||
import DeviceUptime from "./components/deviceUptime"; |
|||
import OnLineBarCharts from "./components/onLineBarCharts"; |
|||
import MonthlyEquipment from "./components/monthlyEquipment"; |
|||
import DeviceSummary from "./components/deviceSummary"; |
|||
import { |
|||
getSystemStatusList, |
|||
getSystemStatusTabList, |
|||
getSystemStatusType, |
|||
getSystemStatusExport, |
|||
getStatusSection, |
|||
} from "@/api/MonthlyEquipment"; |
|||
// import { download } from "../../../../../utils/request.js"; |
|||
import Pagination from "@screen/components/Pagination.vue"; |
|||
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|||
import { searchFormList } from "./data"; |
|||
import { Loading } from "element-ui"; |
|||
import { first } from "lodash"; |
|||
|
|||
export default { |
|||
name: "publicService", |
|||
components: { |
|||
DeviceUptime, |
|||
MonthlyEquipment, |
|||
Pagination, |
|||
InputSearch, |
|||
DeviceSummary, |
|||
OnLineBarCharts, |
|||
}, |
|||
data() { |
|||
return { |
|||
searchText: "请设置查询条件", |
|||
isEmpty01: true, |
|||
emptyText01: "请输入参数查询...", |
|||
isEmpty02: true, |
|||
emptyText02: "请输入参数查询...", |
|||
startTime: "", |
|||
time: "", |
|||
typeQuery: "", //高清网络枪型固定摄像机 |
|||
pageTotal: 0, |
|||
pageIndex: 1, |
|||
pageSize: 30, |
|||
searchFormList, |
|||
equipSeries: [ |
|||
"高清网络球形摄像机", |
|||
"360°全景摄像机", |
|||
"门架式可变信息标志", |
|||
"站前悬臂式可变信息标志", |
|||
"气象检测器", |
|||
"合流区预警系统", |
|||
"高清网络枪型固定摄像机", |
|||
"智能设备箱", |
|||
"毫米波雷达", |
|||
"路段语音广播系统", |
|||
"护碰撞预警系统", |
|||
"激光疲劳唤醒系统", |
|||
"180°全景摄像机", |
|||
"一类交通量调音站", |
|||
"雨棚可变信息标志", |
|||
"智能行车诱导系统", |
|||
], |
|||
equipments: [], |
|||
activeName: "first", |
|||
tableData: [], |
|||
interval: null, |
|||
sectionData: [], |
|||
}; |
|||
}, |
|||
provide() { |
|||
return { |
|||
initDataList: this.initDevice, |
|||
}; |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this.interval); |
|||
}, |
|||
methods: { |
|||
getSection() { |
|||
getStatusSection().then((res) => { |
|||
this.sectionData = res.data; |
|||
}); |
|||
}, |
|||
handleSizeChange(size) { |
|||
this.pageSize = size; |
|||
this.initData(); |
|||
}, |
|||
initData() { |
|||
this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"); |
|||
this.time = moment().format("YYYY-MM-DD HH:mm:ss"); |
|||
this.typeQuery = this.searchFormList[1].options.options[0].value; |
|||
clearInterval(this.interval); |
|||
if (this.activeName == "first") { |
|||
this.initDevice(); |
|||
} else if (this.activeName == "second") { |
|||
this.queryChart = echarts.init(this.$refs["queryChart"]); |
|||
this.queryChart.setOption(onlineCharts); |
|||
this.initQueryChart(); |
|||
this.initQueryTable(1); |
|||
} |
|||
|
|||
this.interval = setInterval(() => { |
|||
if (this.activeName == "first") { |
|||
this.initDevice(); |
|||
} |
|||
}, 30000); |
|||
}, |
|||
changePage(page) { |
|||
this.initQueryTable(page); |
|||
}, |
|||
formatDate(val) { |
|||
let year = val.getFullYear(); |
|||
var m = val.getMonth() + 1; |
|||
var day = val.getDate(); |
|||
|
|||
m = m < 10 ? "0" + m : "" + m; |
|||
day = day < 10 ? "0" + day : "" + day; |
|||
|
|||
return year + "-" + m + "-" + day + " 00:00:00"; |
|||
}, |
|||
onRefreshData() { |
|||
if (!this.typeQuery || !this.startTime) { |
|||
this.$message({ |
|||
message: "请先设置查询条件！", |
|||
type: "warning", |
|||
}); |
|||
return; |
|||
} |
|||
this.initQueryChart(); |
|||
this.initQueryTable(1); |
|||
}, |
|||
handleSearch(data) { |
|||
this.typeQuery = data.type; |
|||
this.startTime = moment(data.time[0]).format("YYYY-MM-DD HH:mm:ss"); |
|||
this.time = moment(data.time[1]).format("YYYY-MM-DD HH:mm:ss"); |
|||
let typeText = |
|||
this.searchFormList[1].options.options[this.typeQuery - 1]?.label; |
|||
this.searchText = `${moment(this.startTime).format( |
|||
"YYYY年MM月DD日" |
|||
)}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`; |
|||
this.initQueryChart(); |
|||
this.initQueryTable(1); |
|||
}, |
|||
changeTabs() { |
|||
this.initData(); |
|||
this.$nextTick(() => { |
|||
this.queryChart.resize(); |
|||
}); |
|||
}, |
|||
//导出 |
|||
SystemStatusExport() { |
|||
let loadingInstance = Loading.service({ |
|||
fullscreen: true, |
|||
background: "#00000052", |
|||
text: "文件正在下载...", |
|||
}); |
|||
getSystemStatusExport({ |
|||
startTime: this.startTime, |
|||
time: this.time, |
|||
type: this.typeQuery, |
|||
}) |
|||
.then((res) => { |
|||
const url = window.URL.createObjectURL(new Blob([res])); |
|||
let link = document.createElement("a"); |
|||
link.style.display = "none"; |
|||
link.href = url; |
|||
link.setAttribute("download", "设备统计信息.xlsx"); |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
URL.revokeObjectURL(link.href); // 释放URL 对象 |
|||
document.body.removeChild(link); |
|||
link = null; |
|||
loadingInstance.close(); |
|||
}) |
|||
.catch((err) => { |
|||
Message.error(err); |
|||
loadingInstance.close(); |
|||
}); |
|||
}, |
|||
initDevice() { |
|||
//设备在线离线率接口 |
|||
|
|||
// if (process.env.NODE_ENV == "development") { |
|||
// this.equipments = []; |
|||
// this.equipSeries.forEach((item) => { |
|||
// this.equipments.push({ |
|||
// title: item, |
|||
// total: Math.floor(Math.random() * 600) + 800, |
|||
// pctOnl: Math.floor(100 * Math.random()) + "%", |
|||
// pctOffl: "25%", |
|||
// pctLose: "15%", |
|||
// sumUseState: "90%", |
|||
// }); |
|||
// }); |
|||
// return; |
|||
// } |
|||
|
|||
getSystemStatusType().then((res) => { |
|||
let allList = []; |
|||
let sort = res.data["排序规则"].rule.split(","); |
|||
sort.forEach((i) => { |
|||
for (let key in res.data) { |
|||
let val = res.data[key]; |
|||
let item = { |
|||
title: key, |
|||
total: val.sum, |
|||
pctOnl: val.sucessRate, |
|||
pctOffl: val.failRate, |
|||
pctLose: val.lostRate, |
|||
sumUseState: val.sumUseState, |
|||
}; |
|||
if (i === key) { |
|||
allList.push(item); |
|||
} |
|||
// if (key.includes("全部设备")) { |
|||
// allList.unshift(item); |
|||
// } else { |
|||
// allList.push(item); |
|||
// } |
|||
} |
|||
}); |
|||
|
|||
this.equipments = allList; |
|||
}); |
|||
}, |
|||
setStatus(id, status) { |
|||
if (status == "doing") { |
|||
this["isEmpty" + id] = true; |
|||
this["emptyText" + id] = "数据查询中..."; |
|||
} else if (status == "empty") { |
|||
this["isEmpty" + id] = true; |
|||
this["emptyText" + id] = "暂无数据..."; |
|||
} else if (status == "finish") { |
|||
this["isEmpty" + id] = false; |
|||
this["emptyText" + id] = ""; |
|||
} |
|||
}, |
|||
initQueryChart() { |
|||
this.setStatus("01", "doing"); |
|||
let data = this.searchFormList[1].options.options; |
|||
let typeLabel = ""; |
|||
data.forEach((item) => { |
|||
if (item.value == this.typeQuery) { |
|||
typeLabel = item.label; |
|||
} |
|||
}); |
|||
getSystemStatusList({ |
|||
startTime: this.startTime, |
|||
time: this.time, |
|||
type: this.typeQuery, |
|||
}).then((res) => { |
|||
if (res.code == 200) { |
|||
this.setStatus("01", "finish"); |
|||
let origin = res.data; |
|||
let startStamp = +moment(this.startTime).startOf("day").format("x"); |
|||
let endStamp = +moment(this.time).endOf("day").format("x"); |
|||
let oneDay = 86400000; |
|||
let daysTotal = Math.ceil((endStamp - startStamp) / oneDay); |
|||
let queryChartData = []; |
|||
let dataX = []; |
|||
let data0 = []; |
|||
let data1 = []; |
|||
for (let i = 0; i < daysTotal; i++) { |
|||
let ts = startStamp + i * oneDay; |
|||
let date = moment(ts).format("YYYY-M-D"); |
|||
let val = origin[date] ? +origin[date].replace("%", "") : 0; |
|||
dataX.push(moment(ts).format("MM-DD")); |
|||
data0.push(val); |
|||
data1.push(100); |
|||
} |
|||
onlineCharts.xAxis.data = dataX; |
|||
onlineCharts.series[0].data = data0; |
|||
onlineCharts.series[0].name = typeLabel; |
|||
onlineCharts.series[1].data = data1; |
|||
onlineCharts.yAxis[0].name = "在线率(%)"; |
|||
|
|||
this.$nextTick(() => { |
|||
this.queryChart.setOption(onlineCharts); |
|||
}); |
|||
// } else { |
|||
// this.setStatus("01", "empty"); |
|||
// } |
|||
} |
|||
}); |
|||
}, |
|||
//查询列表 |
|||
initQueryTable(pageIndex) { |
|||
this.setStatus("02", "doing"); |
|||
getSystemStatusTabList({ |
|||
startTime: this.startTime, |
|||
time: this.time, |
|||
type: this.typeQuery, |
|||
pageNum: pageIndex, |
|||
pageSize: this.pageSize, |
|||
}).then((res) => { |
|||
if (res.code == 200) { |
|||
// if (res.rows && res.rows.length > 0) { |
|||
this.setStatus("02", "finish"); |
|||
this.pageIndex = pageIndex; |
|||
this.pageTotal = res.total; |
|||
this.tableData = res.rows; |
|||
this.tableData.forEach((it, index) => { |
|||
it.order = (pageIndex - 1) * this.pageSize + index + 1; |
|||
}); |
|||
// } else { |
|||
// this.setStatus("02", "empty"); |
|||
// } |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
async mounted() { |
|||
await this.initData(); |
|||
this.getSection(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.floatEmpty { |
|||
position: absolute; |
|||
z-index: 100; |
|||
// background: rgba($color: #000000, $alpha: 0.2); |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.bottomTabs { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
flex-direction: row; |
|||
flex: 1; |
|||
height: 0; |
|||
|
|||
.tabs-lo { |
|||
display: inline-flex; |
|||
width: 670px; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
.tabs-mo { |
|||
display: inline-flex; |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.deviceSummary { |
|||
height: 390px; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.btnSearch { |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
margin-left: 10px; |
|||
border-color: transparent; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table .cell { |
|||
padding-left: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__header-wrapper th { |
|||
background-color: #064258 !important; |
|||
color: #00d1ff; |
|||
border-color: #064258 !important; |
|||
border: 0px !important; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
::v-deep .el-table { |
|||
border: 0px !important; |
|||
background-color: transparent; |
|||
font-size: 12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table__body-wrapper { |
|||
background-color: #064258; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__cell { |
|||
height: 47px; |
|||
padding-left: 15px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
::v-deep .el-table tr:hover td { |
|||
background: #1b2528 !important; |
|||
color: #00d1ff; |
|||
height: 47px; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(odd) td { |
|||
background-color: #13272f; |
|||
border: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(even) td { |
|||
border: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr { |
|||
background-color: #133242 !important; |
|||
border-collapse: 0; |
|||
border: 0px !important; |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
::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; |
|||
} |
|||
|
|||
.full_tab { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
::v-deep .el-tabs__header { |
|||
} |
|||
::v-deep .el-tabs__content { |
|||
flex: 1; |
|||
.el-tab-pane { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tab_con { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.topdiv { |
|||
display: inline-flex; |
|||
position: relative; |
|||
width: 100%; |
|||
height: 40px; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.right-div { |
|||
display: inline; |
|||
width: 450px; |
|||
} |
|||
} |
|||
|
|||
.statisticAnalysis { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 8px 20px 20px; |
|||
|
|||
.header-shot { |
|||
width: 98%; |
|||
margin: auto; |
|||
margin-top: 15px; |
|||
height: 160px; |
|||
} |
|||
|
|||
.queryChart { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 343px; |
|||
margin-top: 20px; |
|||
padding: 0 20px; |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425860 100%); |
|||
margin-bottom: 30px; |
|||
--keep-ratio: scaleX(1); |
|||
|
|||
> div { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
width: 100%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
|
|||
> div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content-l { |
|||
width: calc(25%); |
|||
|
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.content-mi { |
|||
width: calc(50%); |
|||
|
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.content-m { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width: calc(100% / 4); |
|||
margin-right: 20px; |
|||
|
|||
.content-m-t { |
|||
width: 100%; |
|||
height: 240px; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
|
|||
.content-r { |
|||
width: 49.4%; |
|||
} |
|||
} |
|||
} |
|||
.footer { |
|||
margin: 15px 0; |
|||
height: 36px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,114 @@ |
|||
|
|||
var options = { |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
formatter: function(params) { |
|||
console.log(params) |
|||
let text= `${params[0].axisValue} <br />` |
|||
for(let i of params){ |
|||
if(i.seriesIndex===0){ |
|||
text += `${i.marker} ${i.seriesName}： ${i.data}%<br />` |
|||
} |
|||
if(i.seriesIndex===1){ |
|||
text += `${i.marker} ${i.seriesName}： ${i.data}ms<br />` |
|||
} |
|||
} |
|||
return text |
|||
} |
|||
}, |
|||
legend: { |
|||
top: "5%", |
|||
x: "right", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
grid: { |
|||
top: "25%", //上边距
|
|||
right: "0%", //右边距
|
|||
left: "0%", //左边距
|
|||
bottom: "10%", //下边距
|
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: [], |
|||
axisTick: { |
|||
show: false, //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#fff", |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "%", |
|||
nameTextStyle: { |
|||
color: "#fff", |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
align: "right", |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.5)", |
|||
}, |
|||
}, |
|||
}, { |
|||
type: "value", |
|||
name: "ms", |
|||
nameTextStyle: { |
|||
color: "#fff", |
|||
align: "right", |
|||
verticalAlign: "center", |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.5)", |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "丢包率", |
|||
type: "line", |
|||
symbol: "circle", |
|||
itemStyle: { |
|||
color: "#1890ff", |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [] |
|||
}, { |
|||
name: "平均往返时延", |
|||
type: "line", |
|||
symbol: "circle", |
|||
yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#ff7272", |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [] |
|||
} |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue