zhangzhang
1 year ago
11 changed files with 409 additions and 183 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> |
|||
@ -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; |
|||
|
|||
Loading…
Reference in new issue