zhoule
1 year ago
11 changed files with 417 additions and 158 deletions
|
After Width: | Height: | Size: 804 B |
|
After Width: | Height: | Size: 1018 KiB |
@ -0,0 +1,94 @@ |
|||||
|
<template> |
||||
|
<div class='HomeFrame'> |
||||
|
<ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left" |
||||
|
popper-class="global-input-search-popover"> |
||||
|
<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')"> |
||||
|
<img src="@screen/images/home-Frame/Frame.svg"> |
||||
|
</Button> |
||||
|
|
||||
|
<div class="body"> |
||||
|
<div class="title"> |
||||
|
图标含义 |
||||
|
</div> |
||||
|
<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> --> |
||||
|
<img class="image" src="@screen/images/home-Frame/logoMean.jpg"> |
||||
|
<div class="footer"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ElPopover> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Button from '@screen/components/Buttons/Button.vue'; |
||||
|
import Form from '@screen/components/FormConfig'; |
||||
|
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
||||
|
import { merge, cloneDeep } from "lodash" |
||||
|
|
||||
|
export default { |
||||
|
name: 'HomeFrame', |
||||
|
components: { |
||||
|
Button, |
||||
|
Form |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeIcon: null |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClick(type) { |
||||
|
this.activeIcon = this.activeIcon === type ? null : type; |
||||
|
}, |
||||
|
filterEnd(data) { |
||||
|
this.activeIcon = null; |
||||
|
// this.filterData = data; |
||||
|
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss'> |
||||
|
div.el-popper.global-input-search-popover { |
||||
|
background: rgba(6, 66, 88, 0.8); |
||||
|
border: 1px solid rgba(42, 217, 253, 0.6); |
||||
|
position: relative; |
||||
|
padding-top: 36px; |
||||
|
transform: translateY(24px); |
||||
|
|
||||
|
.body { |
||||
|
.title { |
||||
|
background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%); |
||||
|
padding: 3px 9px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<style lang='scss' scoped> |
||||
|
.image { |
||||
|
width: 1440px; |
||||
|
height: 900px; |
||||
|
} |
||||
|
|
||||
|
.HomeFrame { |
||||
|
|
||||
|
.btn { |
||||
|
padding: 9px; |
||||
|
background: linear-gradient(180deg, #152E3C 0%, #163A45 100%); |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
height: unset; |
||||
|
border: 1px solid rgba(40, 144, 167, 1); |
||||
|
} |
||||
|
|
||||
|
.btn-active { |
||||
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,130 +1,155 @@ |
|||||
|
|
||||
/* 数据 */ |
/* 数据 */ |
||||
let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
|
let nameList = [ |
||||
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903]; // 人数
|
"1月", |
||||
|
"2月", |
||||
|
"3月", |
||||
|
"4月", |
||||
|
"5月", |
||||
|
"6月", |
||||
|
"7月", |
||||
|
"8月", |
||||
|
"9月", |
||||
|
"10月", |
||||
|
"11月", |
||||
|
"12月", |
||||
|
]; // 类别
|
||||
|
let valueList = [ |
||||
|
800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903, |
||||
|
]; // 人数
|
||||
// var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]
|
// var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]
|
||||
/* 数据整合 */ |
/* 数据整合 */ |
||||
let dataList = []; |
let dataList = []; |
||||
nameList.map((item, index) => { |
nameList.map((item, index) => { |
||||
if (index === 4) { |
if (index === 4) { |
||||
dataList.push({ |
dataList.push({ |
||||
name: item, |
name: item, |
||||
value: valueList[index], |
value: valueList[index], |
||||
itemStyle: { |
itemStyle: { |
||||
color: { |
color: { |
||||
type: 'linear', |
type: "linear", |
||||
x: 0, |
x: 0, |
||||
y: 0, |
y: 0, |
||||
x2: 0, |
x2: 0, |
||||
y2: 1, |
y2: 1, |
||||
colorStops: [{ |
colorStops: [ |
||||
offset: 0, color: '#FFB904' // 0% 处的颜色
|
{ |
||||
}, { |
offset: 0, |
||||
offset: 1, color: '#FF6969' // 100% 处的颜色
|
color: "#FFB904", // 0% 处的颜色
|
||||
}], |
|
||||
global: false // 缺省为 false
|
|
||||
}, |
}, |
||||
borderRadius: 6 |
{ |
||||
}, |
offset: 1, |
||||
label: { show: false } |
color: "#FF6969", // 100% 处的颜色
|
||||
}) |
}, |
||||
} else { |
], |
||||
dataList.push({ |
global: false, // 缺省为 false
|
||||
name: item, |
}, |
||||
value: valueList[index], |
borderRadius: 6, |
||||
itemStyle: { |
|
||||
borderRadius: 6 |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
var options = { |
|
||||
grid: { |
|
||||
top: '7%',//上边距
|
|
||||
right: '0',//右边距
|
|
||||
left: '0',//左边距
|
|
||||
bottom: "2%",//下边距
|
|
||||
containLabel: true, |
|
||||
}, |
|
||||
tooltip: { |
|
||||
|
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
data: nameList, |
|
||||
axisTick: { |
|
||||
show: false //隐藏X轴刻度
|
|
||||
}, |
}, |
||||
axisLine: { |
label: { show: false }, |
||||
lineStyle: { |
}); |
||||
color: "rgba(49, 217, 255, 0.8)" |
} else { |
||||
} |
dataList.push({ |
||||
|
name: item, |
||||
|
value: valueList[index], |
||||
|
itemStyle: { |
||||
|
borderRadius: 6, |
||||
}, |
}, |
||||
axisLabel: { |
}); |
||||
show: true, |
} |
||||
color: '#B6E6FF', |
}); |
||||
fontSize: 8, |
|
||||
fontFamily: 'Source Han Sans CN-Regular', |
var options = { |
||||
|
grid: { |
||||
|
top: "7%", //上边距
|
||||
|
right: "0", //右边距
|
||||
|
left: "0", //左边距
|
||||
|
bottom: "2%", //下边距
|
||||
|
containLabel: true, |
||||
|
}, |
||||
|
tooltip: {}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: [], |
||||
|
axisTick: { |
||||
|
show: false, //隐藏X轴刻度
|
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "rgba(49, 217, 255, 0.8)", |
||||
}, |
}, |
||||
}, |
}, |
||||
yAxis: [{ |
axisLabel: { |
||||
type: 'value', |
show: true, |
||||
|
color: "#fff", |
||||
|
fontSize: "10px", |
||||
|
fontFamily: "Source Han Sans CN-Regular", |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: "value", |
||||
name: "", |
name: "", |
||||
splitNumber: 5, |
splitNumber: 5, |
||||
nameTextStyle: { |
nameTextStyle: { |
||||
color: '#B6E6FF', |
color: "#B6E6FF", |
||||
fontSize: 13, |
fontSize: 10, |
||||
fontFamily: 'Source Han Sans CN-Regular', |
fontFamily: "Source Han Sans CN-Regular", |
||||
align: "left", |
align: "left", |
||||
verticalAlign: "center", |
verticalAlign: "center", |
||||
}, |
}, |
||||
axisLabel: { |
axisLabel: { |
||||
fontSize: 13, |
fontSize: "10px", |
||||
color: '#B6E6FF', |
color: "#fff", |
||||
fontFamily: 'HarmonyOS Sans-Regular', |
fontFamily: "HarmonyOS Sans-Regular", |
||||
// formatter:function(value,index){
|
// formatter:function(value,index){
|
||||
// return yList[index]
|
// return yList[index]
|
||||
// }
|
// }
|
||||
}, |
}, |
||||
axisLine: { |
axisLine: { |
||||
show: false, |
show: false, |
||||
}, |
}, |
||||
axisTick: { |
axisTick: { |
||||
show: false |
show: false, |
||||
}, |
}, |
||||
splitLine: { |
splitLine: { |
||||
lineStyle: { |
lineStyle: { |
||||
color: 'rgba(49, 217, 255, 0.5)', |
color: "rgba(49, 217, 255, 0.5)", |
||||
} |
}, |
||||
}, |
}, |
||||
}], |
}, |
||||
series: [{ |
], |
||||
type: 'bar', |
series: [ |
||||
data: dataList, |
{ |
||||
|
type: "bar", |
||||
|
data: [], |
||||
z: 4, |
z: 4, |
||||
itemStyle: { |
itemStyle: { |
||||
color: { |
color: { |
||||
type: 'linear', |
type: "linear", |
||||
x: 0, |
x: 0, |
||||
y: 0, |
y: 0, |
||||
x2: 0, |
x2: 0, |
||||
y2: 1, |
y2: 1, |
||||
colorStops: [{ |
colorStops: [ |
||||
offset: 0, color: '#06D7B1' // 0% 处的颜色
|
{ |
||||
}, { |
offset: 0, |
||||
offset: 1, color: '#80F1BB' // 100% 处的颜色
|
color: "#06D7B1", // 0% 处的颜色
|
||||
}], |
}, |
||||
global: false // 缺省为 false
|
{ |
||||
}, |
offset: 1, |
||||
borderRadius: [4, 4, 0, 0] |
color: "#80F1BB", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
global: false, // 缺省为 false
|
||||
|
}, |
||||
|
borderRadius: [4, 4, 0, 0], |
||||
}, |
}, |
||||
barWidth: 10, |
barWidth: 10, |
||||
label: { |
label: { |
||||
show: false, |
show: false, |
||||
} |
}, |
||||
}, |
}, |
||||
] |
], |
||||
} |
}; |
||||
|
|
||||
export default options; |
export default options; |
||||
|
|||||
Loading…
Reference in new issue