hui
1 year ago
52 changed files with 3822 additions and 1502 deletions
@ -0,0 +1,192 @@ |
|||
<template> |
|||
<div class="from-content" style="width: 100%"> |
|||
<div class="InputSearch input" v-if="params && types == 'input'"> |
|||
<ElInput |
|||
style="width: 100%" |
|||
v-model="value" |
|||
:placeholder="placeholder" |
|||
@change="handleSearch" |
|||
></ElInput> |
|||
<img src="./search.svg" @click="handleFormShow" /> |
|||
</div> |
|||
<ElPopover |
|||
v-else |
|||
ref="PopoverRef" |
|||
placement="bottom" |
|||
popper-class="global-input-search-popover" |
|||
:popperOptions="popperOptions" |
|||
:visibleArrow="false" |
|||
:width="this.width" |
|||
trigger="click" |
|||
@show="handleShow" |
|||
style="width: 100%" |
|||
> |
|||
<div class="InputSearch" slot="reference" ref="ReferenceInputRef"> |
|||
<span>{{ placeholder }}</span> |
|||
<img src="./search.svg" @click="handleFormShow" /> |
|||
</div> |
|||
|
|||
<div style="width: 100%; max-height: 360px"> |
|||
<slot> |
|||
<Form |
|||
v-if="formList && formList.length" |
|||
class="form" |
|||
ref="FormConfigRef" |
|||
:formList="formList" |
|||
v-bind="getFormConfigOptions" |
|||
/> |
|||
<!-- <ElEmpty v-else description="暂无搜索内容"></ElEmpty> --> |
|||
<div v-else class="no-data">暂无数据</div> |
|||
</slot> |
|||
|
|||
<div class="footer"> |
|||
<Button |
|||
style="background-color: rgba(0, 179, 204, 0.3)" |
|||
@click.native="handleResetForm" |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button @click.native="handleSearch"> 搜索 </Button> |
|||
</div> |
|||
</div> |
|||
</ElPopover> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import Form from "@screen/components/FormConfig"; |
|||
import { cloneDeep } from "lodash"; |
|||
|
|||
export default { |
|||
name: "InputSearch", |
|||
components: { |
|||
Button, |
|||
Form, |
|||
}, |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: "form", |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: "请点击右侧图标筛选", |
|||
}, |
|||
valueData: { |
|||
type: String, |
|||
}, |
|||
params: { |
|||
type: String, |
|||
}, |
|||
queryParams: { |
|||
type: Array, |
|||
}, |
|||
formConfigOptions: { |
|||
type: Object, |
|||
default: null, |
|||
}, |
|||
formList: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
types: this.type, |
|||
value: this.valueData, |
|||
width: null, |
|||
popperOptions: { |
|||
popHideCallBack: () => { |
|||
// console.log("---") |
|||
}, |
|||
}, |
|||
}; |
|||
}, |
|||
emit: ["handleSearch"], |
|||
computed: { |
|||
getFormConfigOptions() { |
|||
return { |
|||
column: "1", |
|||
labelWidth: "120px", |
|||
...this.formConfigOptions, |
|||
}; |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleFormShow() { |
|||
console.log(this.params, this.types); |
|||
if (this.params) { |
|||
if (this.types == "form") { |
|||
this.types = "input"; |
|||
} else { |
|||
this.types = "form"; |
|||
} |
|||
} else { |
|||
this.types = "form"; |
|||
} |
|||
console.log(this.params, this.types); |
|||
}, |
|||
handleShow() { |
|||
if (this.width) return; |
|||
|
|||
this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width; |
|||
}, |
|||
handleResetForm() { |
|||
this.$refs.FormConfigRef?.reset(); |
|||
|
|||
this.$refs.PopoverRef.doClose(); |
|||
|
|||
this.$emit("handleSearch", cloneDeep(this.$refs.FormConfigRef?.formData)); |
|||
}, |
|||
handleSearch() { |
|||
if (this.types == "form") { |
|||
this.$refs.FormConfigRef.validate() |
|||
.then((result) => { |
|||
this.$refs.PopoverRef.doClose(); |
|||
this.$emit("handleSearch", result); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("catch"); |
|||
}); |
|||
} else { |
|||
let params = {}; |
|||
params[this.params] = this.value; |
|||
this.$emit("handleSearch", params); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.InputSearch { |
|||
width: 100%; |
|||
height: 26px; |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%) !important; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 3px 15px; |
|||
padding-right: 9px; |
|||
cursor: pointer; |
|||
|
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 14px; |
|||
} |
|||
.input ::v-deep .el-input__inner { |
|||
background: none; |
|||
height: auto !important; |
|||
font-size: 12px; |
|||
padding: 0px 0; |
|||
line-height: 14px; |
|||
} |
|||
::v-deep .el-input__inner::placeholder { |
|||
font-size: 12px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
import * as PresetFormItems from "@screen/common/PresetFormItems.js"; |
|||
import { merge, cloneDeep } from "lodash"; |
|||
|
|||
export const searchFormList = [ |
|||
PresetFormItems.eventType, |
|||
PresetFormItems.direction, |
|||
{ |
|||
label: "时间范围:", |
|||
key: "daterange", |
|||
required: false, |
|||
type: "datePicker", |
|||
options: { |
|||
type: "daterange", |
|||
format: "yyyy-MM-dd HH:mm:ss", |
|||
valueFormat: "yyyy-MM-dd HH:mm:ss", |
|||
}, |
|||
}, |
|||
PresetFormItems.startStation, |
|||
PresetFormItems.endStation |
|||
|
|||
|
|||
]; |
|||
File diff suppressed because it is too large
@ -1,124 +1,124 @@ |
|||
let chartIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZmFiLCAyMDIyLzA4LzE2LTIyOjM1OjQxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjQuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMTVlZWQ0OC00MDdlLTQwNTQtOWI1My1hOWVmZDU4MTliNWYiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6NDY6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PibZhN0AAAHBSURBVDiNfdTtThNREAbgZ5sCrRTaRaBqQDTR6AXaq9grJEaiKCJWaAv9ENDUH2fWLkU8yeTkZGbe885nNp/PVU9vIMMGNtHGo1BNMQoZF7k7jlkVqDewji72sI5VrIT6F64xwRecFbnJPaDeQBsv8RSdCpsS6BYzDENOcVTkLv8CBZPX2McOdrEVITYC6BpjnKOP7zjG+yI3yd5dzLNg8jbY7MW9g+2lHJUgpzgJOcRRPX7dj3C6eIaDAO+iGUCzYPERWSXU5+jXIxct5MFgN0AOsLaoi9Ul0HHkaoBOLZg0IoQNPMaTJZAqWDfytylVtol2LdishNFaKBv/AClPI3waISto1UKZoRZ39h8QFZus8laTqvEbNyEzqdQPnZ/hcyMl/BbTmpSsacg43v0wXD43+BE2V+FzjWFdmp1ZKAZheByUt91tyD4+S/00wGWAjerxOJYS2JSSngX4lrsNeREfnUg9dRG+o3JEWniDF1Lpd6U2KEdkHoyuwvkM36TmPCxy4+rQdvDKoss7FhugzM8kIjiPED8UuSH310jLYkRaUl9V18gswD7ha5Ebl77ZA4utLY1MOT4sRmKI0fJi+wM9v6Q1QC+Y6wAAAABJRU5ErkJggg==`; |
|||
let xdata = { |
|||
value: ['平阴停车区'] |
|||
value: ["平阴停车区"], |
|||
}; |
|||
let sdata = { |
|||
value: [32774] |
|||
} |
|||
value: [32774], |
|||
}; |
|||
|
|||
let dataZoomMove = { |
|||
start: 0, |
|||
end: 4 |
|||
} |
|||
start: 0, |
|||
end: 4, |
|||
}; |
|||
var options = { |
|||
grid: { |
|||
containLabel: true, |
|||
// 边距自行修改
|
|||
bottom: '0%', |
|||
left: '0%', |
|||
top: '2%', |
|||
right: '15%', |
|||
}, |
|||
xAxis: { |
|||
type: 'value', |
|||
grid: { |
|||
containLabel: true, |
|||
// 边距自行修改
|
|||
bottom: "0%", |
|||
left: "0%", |
|||
top: "2%", |
|||
right: "15%", |
|||
}, |
|||
xAxis: { |
|||
type: "value", |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "category", |
|||
data: xdata.value, |
|||
inverse: true, |
|||
axisLabel: { |
|||
show: false |
|||
fontSize: "14px", |
|||
inside: true, |
|||
verticalAlign: "bottom", |
|||
color: "#fff", |
|||
padding: 10, |
|||
margin: -5, |
|||
formatter: function (value, index) { |
|||
// let index = xdata.value.indexOf(value);
|
|||
return `{a|Top${index + 1}} {b|${value}}`; |
|||
}, |
|||
rich: { |
|||
a: { |
|||
fontSize: "14px", |
|||
}, |
|||
|
|||
b: { |
|||
fontSize: "14px", |
|||
padding: [0, 0, 0, 70], |
|||
}, |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
show: false, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: xdata.value, |
|||
inverse: true, |
|||
axisLabel: { |
|||
fontSize: '14px', |
|||
inside: true, |
|||
verticalAlign: 'bottom', |
|||
color: '#fff', |
|||
padding: 10, |
|||
margin: -5, |
|||
formatter: function (value, index) { |
|||
// let index = xdata.value.indexOf(value);
|
|||
return `{a|Top${index + 1}} {b|${value}}` |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
data: sdata.value, |
|||
type: "bar", |
|||
barWidth: 8, |
|||
itemStyle: { |
|||
borderRadius: 40, |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 1, |
|||
y2: 0, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "#1cd0f000", // 0% 处的颜色
|
|||
}, |
|||
rich: { |
|||
a: { |
|||
fontSize: '14px', |
|||
}, |
|||
|
|||
b: { |
|||
fontSize: '14px', |
|||
padding: [0, 0, 0, 70], |
|||
} |
|||
{ |
|||
offset: 1, |
|||
color: "#1cd0f0", // 100% 处的颜色
|
|||
}, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
data: sdata.value, |
|||
type: 'bar', |
|||
barWidth: 8, |
|||
itemStyle: { |
|||
borderRadius: 40, |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 1, |
|||
y2: 0, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: '#1cd0f000', // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: '#1cd0f0', // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
} |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: 'right', |
|||
distance: -10, |
|||
data: sdata, |
|||
color: '#fff', |
|||
formatter: (c) => { |
|||
return `{a|}{b|${c.value}件}` |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: "right", |
|||
distance: -10, |
|||
data: sdata, |
|||
color: "#fff", |
|||
formatter: (c) => { |
|||
return `{a|}{b|${c.value}起}`; |
|||
}, |
|||
rich: { |
|||
a: { |
|||
widht: 20, |
|||
height: 20, |
|||
backgroundColor: { |
|||
image: chartIcon, |
|||
}, |
|||
rich: { |
|||
a: { |
|||
widht: 20, |
|||
height: 20, |
|||
backgroundColor: { |
|||
image: chartIcon |
|||
}, |
|||
}, |
|||
b: { |
|||
padding: [0, 0, 0, 10] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
b: { |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
@ -1,148 +1,152 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
|
|||
color: ["#5090FF", "#01B3E4"], |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: 'rect', |
|||
top: '0%', |
|||
right: '5%', |
|||
data: ['实时数据'], |
|||
itemWidth:18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
itemStyle:{ |
|||
color:"#FFD15C", |
|||
}, |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#fff', |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
}, |
|||
color: "#FFD15C", |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: "rect", |
|||
top: "0%", |
|||
right: "5%", |
|||
data: ["实时数据"], |
|||
itemWidth: 18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
// itemStyle: {
|
|||
// color: "#FFD15C",
|
|||
// },
|
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: "#fff", |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#FFD15C", |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#fff", |
|||
fontSize: 10, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"00:00", |
|||
"01:00", |
|||
"02:00", |
|||
"03:00", |
|||
"04:00", |
|||
"05:00", |
|||
"06:00", |
|||
"07:00", |
|||
"08:00", |
|||
"09:00", |
|||
"10:00", |
|||
"11:00", |
|||
"12:00", |
|||
"13:00", |
|||
"14:00", |
|||
"15:00", |
|||
"16:00", |
|||
"17:00", |
|||
"18:00", |
|||
"19:00", |
|||
"20:00", |
|||
"21:00", |
|||
"22:00", |
|||
"23:00", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
max: 40, |
|||
minInterval: 1, |
|||
nameTextStyle: { |
|||
fontSize: 10, |
|||
color: "#fff", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(255, 255, 255, 0.15)", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 10, |
|||
fontFamily: "Bebas", |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "实时数据", // 图例对应类别
|
|||
data: [ |
|||
"00:00", |
|||
"01:00", |
|||
"02:00", |
|||
"03:00", |
|||
"04:00", |
|||
"05:00", |
|||
"06:00", |
|||
"07:00", |
|||
"08:00", |
|||
"09:00", |
|||
"10:00", |
|||
"11:00", |
|||
"12:00", |
|||
"13:00", |
|||
"14:00", |
|||
"15:00", |
|||
"16:00", |
|||
"17:00", |
|||
"18:00", |
|||
"19:00", |
|||
"20:00", |
|||
"21:00", |
|||
"22:00", |
|||
"23:00", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
max:40, |
|||
minInterval: 1, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(255, 255, 255, 0.15)", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
12, 12, 23, 23, 30, 12, 26, 28, 31, 23, 25, 12, 18, 18, 18, 18, 23, 21, |
|||
20, 20, 20, 20, 20, 22, 22, 12, 12, 12, |
|||
], // 纵坐标数据
|
|||
lineStyle: { |
|||
color: "#FFD15C", |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "实时数据", // 图例对应类别
|
|||
data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
|
|||
lineStyle :{ |
|||
color:"#FFD15C" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: 'linear', |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: '#FFD15C99' // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity:0.01, |
|||
color: '#FFD15C01' // 100% 处的颜色
|
|||
} |
|||
] |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: "linear", |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: "#FFD15C99", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity: 0.01, |
|||
color: "#FFD15C01", // 100% 处的颜色
|
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
|
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
export default options; |
|||
|
|||
@ -1,154 +1,156 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
|
|||
color: ["#5090FF", "#01B3E4"], |
|||
tooltip: { |
|||
trigger: "axis", |
|||
backgroundColor: "rgba(0,0,0,.6)", |
|||
borderColor: "rgba(147, 235, 248, .8)", |
|||
textStyle: { |
|||
color: "#FFF", |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: 'rect', |
|||
top: '0%', |
|||
right: '5%', |
|||
data: ['实时数据'], |
|||
itemWidth:18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#C9D2FA', |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
color: "#0783FA", |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
// backgroundColor: "rgba(0,0,0,.6)",
|
|||
// borderColor: "rgba(147, 235, 248, .8)",
|
|||
// textStyle: {
|
|||
// color: "#FFF",
|
|||
// },
|
|||
}, |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
icon: "rect", |
|||
top: "0%", |
|||
right: "5%", |
|||
data: ["实时数据"], |
|||
itemWidth: 18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
textStyle: { |
|||
fontSize: 10, |
|||
color: "#fff", |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#0783FA", |
|||
fontSize: 10, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#fff", |
|||
fontSize: 10, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"00:00", |
|||
"01:00", |
|||
"02:00", |
|||
"03:00", |
|||
"04:00", |
|||
"05:00", |
|||
"06:00", |
|||
"07:00", |
|||
"08:00", |
|||
"09:00", |
|||
"10:00", |
|||
"11:00", |
|||
"12:00", |
|||
"13:00", |
|||
"14:00", |
|||
"15:00", |
|||
"16:00", |
|||
"17:00", |
|||
"18:00", |
|||
"19:00", |
|||
"20:00", |
|||
"21:00", |
|||
"22:00", |
|||
"23:00", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
max: 40, |
|||
minInterval: 5, |
|||
splitNumber: 5, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(255, 255, 255, 0.15)", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 10, |
|||
fontFamily: "Bebas", |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "实时数据", // 图例对应类别
|
|||
data: [ |
|||
"00:00", |
|||
"01:00", |
|||
"02:00", |
|||
"03:00", |
|||
"04:00", |
|||
"05:00", |
|||
"06:00", |
|||
"07:00", |
|||
"08:00", |
|||
"09:00", |
|||
"10:00", |
|||
"11:00", |
|||
"12:00", |
|||
"13:00", |
|||
"14:00", |
|||
"15:00", |
|||
"16:00", |
|||
"17:00", |
|||
"18:00", |
|||
"19:00", |
|||
"20:00", |
|||
"21:00", |
|||
"22:00", |
|||
"23:00", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
max:40, |
|||
minInterval: 5, |
|||
splitNumber:5, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(255, 255, 255, 0.15)", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
12, 12, 23, 23, 30, 12, 26, 28, 31, 23, 25, 12, 18, 18, 18, 18, 23, 21, |
|||
20, 20, 20, 20, 20, 22, 22, 12, 12, 12, |
|||
], // 纵坐标数据
|
|||
lineStyle: { |
|||
color: "#0783FA", |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "实时数据", // 图例对应类别
|
|||
data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
|
|||
lineStyle :{ |
|||
color:"#0783FA" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: 'linear', |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: '#0783FA99' // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity:0.01, |
|||
color: '#0783FA01' // 100% 处的颜色
|
|||
} |
|||
] |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: "linear", |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: "#0783FA99", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity: 0.01, |
|||
color: "#0783FA01", // 100% 处的颜色
|
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
|
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
export default options; |
|||
|
|||
@ -0,0 +1,79 @@ |
|||
import * as echarts from "echarts"; |
|||
let options = { |
|||
legend: { |
|||
show: false, |
|||
}, |
|||
radar: [ |
|||
{ |
|||
indicator: [ |
|||
{ text: "Indicator1" }, |
|||
{ text: "Indicator2" }, |
|||
{ text: "Indicator3" }, |
|||
], |
|||
center: ["50%", "55%"], |
|||
radius: 70, |
|||
startAngle: 90, |
|||
splitNumber: 4, |
|||
shape: "circle", |
|||
axisName: { |
|||
formatter: "{value}", |
|||
color: "#428BD4", |
|||
}, |
|||
splitArea: { |
|||
areaStyle: { |
|||
color: ["#0987CD", "#0A7BB9", "#0B6A9C", "#0D5173"], |
|||
// opacity: 0.3,
|
|||
}, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
type: "radar", |
|||
color: "#07A3FB", |
|||
emphasis: { show: false }, |
|||
symbol: "none", |
|||
lineStyle: { |
|||
show: false, |
|||
color: "none", |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: [1, 5, 1], |
|||
name: "Data B", |
|||
areaStyle: { |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: "#DC6A00", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 0.5, |
|||
color: "#5D887C", // 100% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#099CCD", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
export default options; |
|||
@ -0,0 +1,144 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" :title="data ? '修改' : '新增'"> |
|||
<div class='AddNEditDialog'> |
|||
<Form v-model="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="90px" /> |
|||
</div> |
|||
|
|||
<template #footer> |
|||
<Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false"> |
|||
取消 |
|||
</Button> |
|||
<Button @click.native="handleSubmit" :loading="submitting"> |
|||
确定 |
|||
</Button> |
|||
</template> |
|||
</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 { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js"; |
|||
import { Message } from "element-ui"; |
|||
import * as PresetFormItems from "@screen/common/PresetFormItems.js"; |
|||
|
|||
export default { |
|||
name: 'AddNEditDialog', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Form |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: "update:value" |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
data: Object |
|||
}, |
|||
inject: ['setCurrentPage'], |
|||
data() { |
|||
return { |
|||
submitting: false, |
|||
formData: {}, |
|||
formList: [ |
|||
{ |
|||
label: "信息级别:", |
|||
key: "level", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "影响通行", |
|||
}, |
|||
{ |
|||
key: "2", |
|||
label: "不影响通行", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
PresetFormItems.releaseChannel, |
|||
{ |
|||
label: "审核方式:", |
|||
key: "level", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "单人审核", |
|||
}, |
|||
{ |
|||
key: "2", |
|||
label: "双人审核", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "启用日期:", |
|||
key: "startDate", |
|||
type: "DatePicker", |
|||
required: true |
|||
} |
|||
|
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:value', val) |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
modelVisible: { |
|||
immediate: true, |
|||
handler(bool) { |
|||
if (!bool) return; |
|||
|
|||
this.formData = { |
|||
...this.data |
|||
} |
|||
|
|||
this.getOptions(); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
getOptions() { |
|||
}, |
|||
handleSubmit() { |
|||
|
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.AddNEditDialog { |
|||
width: 450px; |
|||
height: 200px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.tips { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,56 @@ |
|||
import * as PresetFormItems from "@screen/common/PresetFormItems.js"; |
|||
import { merge, cloneDeep } from "lodash"; |
|||
|
|||
export const searchFormList = [ |
|||
{ |
|||
label: "启用日期:", |
|||
key: "daterange", |
|||
required: false, |
|||
type: "datePicker", |
|||
options: { |
|||
type: "daterange", |
|||
format: "yyyy-MM-dd HH:mm:ss", |
|||
valueFormat: "yyyy-MM-dd HH:mm:ss", |
|||
}, |
|||
}, |
|||
PresetFormItems.eventType, |
|||
PresetFormItems.releaseChannel, |
|||
{ |
|||
label: "信息级别:", |
|||
key: "level", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "影响通行", |
|||
}, |
|||
{ |
|||
key: "2", |
|||
label: "不影响通行", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "启用状态:", |
|||
key: "status", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "启用", |
|||
}, |
|||
{ |
|||
key: "2", |
|||
label: "停用", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
Loading…
Reference in new issue