|
|
@@ -3,7 +3,6 @@
|
|
|
<div class="risk_profile_container">
|
|
|
<!-- 1.==================== -->
|
|
|
<HeaderBoxContent :headerObj="headerObj"></HeaderBoxContent>
|
|
|
- <HeaderBoxContent :headerObj="headerObj"></HeaderBoxContent>
|
|
|
|
|
|
<el-scrollbar class="profile_scroll-box">
|
|
|
<StepsTool :step-list="stepList" :active-index="1">
|
|
|
@@ -93,86 +92,9 @@ const infoList = ref([
|
|
|
{ lable: "状态", value: "处置中", icon: "4" },
|
|
|
]);
|
|
|
|
|
|
-function getImgSrc(picName) {
|
|
|
- return new URL(`../../../../assets/img/risk_info_icon-${picName}.png`, import.meta.url).href
|
|
|
-}
|
|
|
-
|
|
|
-//4.时间分布 地区分布
|
|
|
-// 初始化时间分布图（蓝色渐变）
|
|
|
-const initTimeChart = () => {
|
|
|
- if (!timeChart.value) return
|
|
|
- const chart = echarts.init(timeChart.value)
|
|
|
- chart.setOption({
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- grid: { left: '10%', right: '5%', top: '15%', bottom: '18%' }, // 调整四周距离
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['12/04', '12/05', '12/06', '12/07', '12/08', '12/09', '12/10'],
|
|
|
- axisLine: { lineStyle: { color: '#4A90E2' } } // X 轴颜色
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLine: { lineStyle: { color: '#4A90E2' } }, // Y 轴颜色
|
|
|
- splitLine: { lineStyle: { type: 'dashed', color: '#ccc' } } // Y 轴背景横线虚线
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- data: [3, 6, 2, 9, 5, 8, 10],
|
|
|
- barWidth: 30,
|
|
|
- itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
- { offset: 0, color: 'rgba(63, 174, 253, 0)' },
|
|
|
- { offset: 1, color: '#3FAEFD' }
|
|
|
- ])
|
|
|
- },
|
|
|
- barBackgroundStyle: { color: 'rgba(74, 144, 226, 0.2)' } // 背景透明色
|
|
|
- }
|
|
|
- ]
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 初始化地区分布图（黄色渐变）
|
|
|
-const initAreaChart = () => {
|
|
|
- if (!areaChart.value) return
|
|
|
- const chart = echarts.init(areaChart.value)
|
|
|
- chart.setOption({
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- grid: { left: '10%', right: '5%', top: '15%', bottom: '18%' }, // 调整四周距离
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['长宁区', '闵行区'],
|
|
|
- axisLine: { lineStyle: { color: '#FBA541' } } // X 轴颜色
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLine: { lineStyle: { color: '#FBA541' } }, // Y 轴颜色
|
|
|
- splitLine: { lineStyle: { type: 'dashed', color: '#ccc' } } // Y 轴背景横线虚线
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- data: [5, 9],
|
|
|
- barWidth: 30,
|
|
|
- itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
- { offset: 0, color: 'rgba(251,165,65,0)' },
|
|
|
- { offset: 1, color: '#FBA541' }
|
|
|
- ])
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 绑定 ECharts 容器
|
|
|
-const timeChart = ref(null)
|
|
|
-const areaChart = ref(null)
|
|
|
-
|
|
|
// 在组件挂载后初始化 ECharts
|
|
|
onMounted(() => {
|
|
|
- initTimeChart()
|
|
|
- initAreaChart()
|
|
|
+
|
|
|
})
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -193,96 +115,7 @@ onMounted(() => {
|
|
|
border: 1px solid;
|
|
|
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(7, 108, 208, 1)) 1 1;
|
|
|
|
|
|
- .risk_profile_header {
|
|
|
- width: 100%;
|
|
|
- height: 50px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 16px;
|
|
|
-
|
|
|
- .risk_profile_title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20px;
|
|
|
-
|
|
|
- > img {
|
|
|
- width: 40px;
|
|
|
- height: 37px;
|
|
|
- }
|
|
|
-
|
|
|
- .risk_profile_name {
|
|
|
- // width: 352px;
|
|
|
- font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 24px;
|
|
|
- color: #e2ffff;
|
|
|
- line-height: 24px;
|
|
|
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
-
|
|
|
- /* 金属光泽渐变效果 */
|
|
|
- background: linear-gradient(to top, #49ffff 4%, #ffffff 100%);
|
|
|
- -webkit-background-clip: text;
|
|
|
- /* 文字应用渐变 */
|
|
|
- background-clip: text;
|
|
|
-
|
|
|
- /* 使文字透明，背景渐变会应用到文字 */
|
|
|
- color: transparent;
|
|
|
-
|
|
|
- /* 光泽效果：文本阴影 */
|
|
|
- text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);
|
|
|
|
|
|
- /* 给文字加一些柔和的过渡效果 */
|
|
|
- transition: all 0.3s ease;
|
|
|
- font-style: italic;
|
|
|
- transform: skewX(-5deg);
|
|
|
- }
|
|
|
-
|
|
|
- .risk_profile_type {
|
|
|
- height: 24px;
|
|
|
- width: 158px;
|
|
|
- background: url(../../../../assets/img/待核实.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 14px;
|
|
|
- color: #ffd15c;
|
|
|
- line-height: 24px;
|
|
|
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
|
- text-align: center;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .risk_profile_change_btn {
|
|
|
- border-radius: 2px 2px 2px 2px;
|
|
|
- // border: 1px solid rgba(47, 154, 255, 0.82);
|
|
|
- background: rgba(8, 255, 229, 0.1);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- // justify-content: space-between;
|
|
|
- padding: 5px 5px;
|
|
|
- box-sizing: border-box;
|
|
|
- > img {
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- }
|
|
|
- > div {
|
|
|
- font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 16px;
|
|
|
- color: #50e0ff;
|
|
|
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
.profile_scroll-box {
|
|
|
height: calc(100% - 80px);
|
|
|
.info-box {
|
