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 valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903]; // 人数
|
|||
let nameList = [ |
|||
"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", "轻度拥堵", "基本畅通", "畅通"]
|
|||
/* 数据整合 */ |
|||
let dataList = []; |
|||
nameList.map((item, index) => { |
|||
if (index === 4) { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#FFB904' // 0% 处的颜色
|
|||
}, { |
|||
offset: 1, color: '#FF6969' // 100% 处的颜色
|
|||
}], |
|||
global: false // 缺省为 false
|
|||
if (index === 4) { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "#FFB904", // 0% 处的颜色
|
|||
}, |
|||
borderRadius: 6 |
|||
}, |
|||
label: { show: false } |
|||
}) |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
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轴刻度
|
|||
{ |
|||
offset: 1, |
|||
color: "#FF6969", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
borderRadius: 6, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)" |
|||
} |
|||
label: { show: false }, |
|||
}); |
|||
} 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: [{ |
|||
type: 'value', |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#fff", |
|||
fontSize: "10px", |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "", |
|||
splitNumber: 5, |
|||
nameTextStyle: { |
|||
color: '#B6E6FF', |
|||
fontSize: 13, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
align: "left", |
|||
verticalAlign: "center", |
|||
color: "#B6E6FF", |
|||
fontSize: 10, |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
align: "left", |
|||
verticalAlign: "center", |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 13, |
|||
color: '#B6E6FF', |
|||
fontFamily: 'HarmonyOS Sans-Regular', |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
fontSize: "10px", |
|||
color: "#fff", |
|||
fontFamily: "HarmonyOS Sans-Regular", |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: 'rgba(49, 217, 255, 0.5)', |
|||
} |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.5)", |
|||
}, |
|||
}, |
|||
}], |
|||
series: [{ |
|||
type: 'bar', |
|||
data: dataList, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
type: "bar", |
|||
data: [], |
|||
z: 4, |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#06D7B1' // 0% 处的颜色
|
|||
}, { |
|||
offset: 1, color: '#80F1BB' // 100% 处的颜色
|
|||
}], |
|||
global: false // 缺省为 false
|
|||
}, |
|||
borderRadius: [4, 4, 0, 0] |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "#06D7B1", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#80F1BB", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
borderRadius: [4, 4, 0, 0], |
|||
}, |
|||
barWidth: 10, |
|||
label: { |
|||
show: false, |
|||
} |
|||
}, |
|||
] |
|||
} |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
Loading…
Reference in new issue