376 lines
10 KiB
Vue
376 lines
10 KiB
Vue
<template>
|
|
<Layout>
|
|
<a-card class="ks-page-card ks-charts-wrapper">
|
|
<template #title>
|
|
<a-space>
|
|
<span class="point"></span>
|
|
<span class="text">指标效果对比</span>
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
返回
|
|
</template>
|
|
<a-button class="ks-page-card-goback" size="small" @click="goback">
|
|
<RollbackOutlined />
|
|
<span>返回</span>
|
|
</a-button>
|
|
</a-tooltip>
|
|
</a-space>
|
|
</template>
|
|
<div class="ks-scrollable">
|
|
<div class="ks-model-charts" style="height: 80vh;position: relative;overflow: auto">
|
|
|
|
<a-card class="ks-model-chart-card ks-model-chart-card-carousel">
|
|
<template #title>
|
|
<a-space>
|
|
<span class="ks-model-chart-card-icon model-icon"></span>
|
|
<span>多维度算法指标对比</span>
|
|
</a-space>
|
|
</template>
|
|
|
|
<a-carousel
|
|
arrows
|
|
:dots="false"
|
|
:slides-to-show="3"
|
|
:slides-to-scroll="1"
|
|
arrow="always"
|
|
:autoplay="false"
|
|
class="chart-carousel"
|
|
>
|
|
<template #prevArrow>
|
|
<div class="custom-slick-arrow prev-arrow" style="z-index: 1">
|
|
<left-circle-outlined />
|
|
</div>
|
|
</template>
|
|
<template #nextArrow>
|
|
<div class="custom-slick-arrow next-arrow">
|
|
<right-circle-outlined />
|
|
</div>
|
|
</template>
|
|
<div class="slick-slide-item">
|
|
<Chart001 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</div>
|
|
<div class="slick-slide-item">
|
|
<Chart0021 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</div>
|
|
<div class="slick-slide-item">
|
|
<Chart0022 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</div>
|
|
<div class="slick-slide-item">
|
|
<Chart0023 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</div>
|
|
<div class="slick-slide-item">
|
|
<Chart0024 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</div>
|
|
<div class="slick-slide-item">
|
|
<Chart003 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</div>
|
|
</a-carousel>
|
|
|
|
</a-card>
|
|
|
|
<a-card class="ks-model-chart-card">
|
|
<template #title>
|
|
<a-space>
|
|
<span class="ks-model-chart-card-icon grid-icon"></span>
|
|
<span>多维度仿真推演效果对比</span>
|
|
</a-space>
|
|
</template>
|
|
<a-row :gutter="15">
|
|
<a-col :span="24">
|
|
<div class="ks-model-chart-item" style="height:380px;">
|
|
<ChartRed :datas="datas" :deduction-pod="deductionPodDetails" :redName="redName" :blueName="blueName"/>
|
|
<ChartBlue :datas="datas" :deduction-pod="deductionPodDetails" :redName="redName" :blueName="blueName"/>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="15">
|
|
<a-col :span="12">
|
|
<Chart004 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<Chart005 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="15">
|
|
<!-- <a-col :span="12">-->
|
|
<!-- <Chart006 :datas="datas" :redName="redName" :blueName="blueName"/>-->
|
|
<!-- </a-col>-->
|
|
<a-col :span="12">
|
|
<Chart007 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<Chart008 :datas="datas" :redName="redName" :blueName="blueName"/>
|
|
</a-col>
|
|
<!-- <a-col :span="12">-->
|
|
<!-- <Chart009 :datas="datas" :redName="redName" :blueName="blueName"/>-->
|
|
<!-- </a-col>-->
|
|
</a-row>
|
|
</a-card>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</Layout>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, type PropType, ref, watch } from 'vue';
|
|
import { LeftCircleOutlined, RightCircleOutlined, RollbackOutlined } from '@ant-design/icons-vue';
|
|
import {useRouter} from 'vue-router'
|
|
import Chart001 from './charts-001.vue';
|
|
import Chart002 from './charts-002.vue';
|
|
import Chart0021 from './charts-002-1.vue';
|
|
import Chart0022 from './charts-002-2.vue';
|
|
import Chart0023 from './charts-002-3.vue';
|
|
import Chart0024 from './charts-002-4.vue';
|
|
import Chart003 from './charts-003.vue';
|
|
import Chart004 from './charts-004.vue';
|
|
import Chart005 from './charts-005.vue';
|
|
import Chart006 from './charts-006.vue';
|
|
import Chart007 from './charts-007.vue';
|
|
import Chart008 from './charts-008.vue';
|
|
import Chart009 from './charts-009.vue';
|
|
import ChartBlue from './charts-blue.vue';
|
|
import ChartRed from './charts-red.vue';
|
|
import Layout from '../../layout.vue'
|
|
import type { DeductionPod, ModelDeductionData } from '../types';
|
|
import { findChartsDataById, findOneModelDeductionDetails } from '../api';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
RollbackOutlined,
|
|
Layout,
|
|
LeftCircleOutlined,
|
|
RightCircleOutlined,
|
|
Chart001,
|
|
Chart002,
|
|
Chart0021,
|
|
Chart0022,
|
|
Chart0023,
|
|
Chart0024,
|
|
Chart003,
|
|
Chart004,
|
|
Chart005,
|
|
Chart006,
|
|
Chart007,
|
|
Chart008,
|
|
Chart009,
|
|
ChartBlue,
|
|
ChartRed,
|
|
},
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
},
|
|
deduction: {
|
|
type: [Object, null, undefined] as PropType<DeductionPod | null | undefined>,
|
|
},
|
|
},
|
|
emits: ['cancel'],
|
|
setup(_props, { emit }) {
|
|
const router = useRouter();
|
|
const datas = ref<ModelDeductionData[]>([]);
|
|
const deductionPodDetails = ref<DeductionPod | null | undefined>(null);
|
|
const blueName = ref<string>('蓝方')
|
|
const redName = ref<string>('红方')
|
|
|
|
const handleCancel = () => {
|
|
emit('cancel');
|
|
};
|
|
|
|
const goback = () => {
|
|
router.push({
|
|
path: '/app/ai/applications/gambling',
|
|
})
|
|
}
|
|
|
|
const load = (n: any) => {
|
|
deductionPodDetails.value = null
|
|
if (n?.params?.id) {
|
|
findOneModelDeductionDetails(n?.params?.id).then(rv=> {
|
|
deductionPodDetails.value = rv.data;
|
|
blueName.value = rv.data?.blueName ?? '蓝方';
|
|
redName.value = rv.data?.redName ?? '红方';
|
|
if(rv.data.deductionId) {
|
|
findChartsDataById(rv.data.deductionId).then(r => {
|
|
datas.value = (r.data ?? []).reverse();
|
|
console.error(n, datas.value);
|
|
});
|
|
}
|
|
})
|
|
}
|
|
};
|
|
|
|
watch(() => router.currentRoute.value, (n:any) => {
|
|
load(n);
|
|
}, { deep: true, immediate: true });
|
|
|
|
return {
|
|
goback,
|
|
deductionPodDetails,
|
|
handleCancel,
|
|
datas,
|
|
blueName,
|
|
redName,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.ks-charts-modal{
|
|
background: url('@/assets/icons/bg-model-builder-canvas.png') center / 100% 100%;
|
|
.ant-modal-content{
|
|
padding:0;
|
|
border: 1px solid #041a3c;
|
|
}
|
|
.ant-modal-header{
|
|
height: 55px;
|
|
line-height: 50px;
|
|
background: #041125;
|
|
background: linear-gradient(359deg, #010c1d 1%, #041a3c 55%);
|
|
border-radius: 0;
|
|
}
|
|
.ant-modal-close {
|
|
position: absolute;
|
|
top: 13px;
|
|
}
|
|
.ks-charts-modal-title,
|
|
.ant-modal-title {
|
|
line-height: 55px;
|
|
font-size:16px;
|
|
}
|
|
.ant-modal-body{
|
|
height: 90vh;
|
|
overflow: auto;
|
|
border-top: 1px solid #181d26;
|
|
background: #041125;
|
|
}
|
|
.ks-charts-modal-icon{
|
|
background: url('@/assets/icons/m-03.png') center / 100% 100%;
|
|
width: 30px;
|
|
height:30px;
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
.ks-model-chart-card {
|
|
border-color: #161c26;
|
|
border-radius: 0;
|
|
margin-bottom: 15px;
|
|
background: transparent;
|
|
position: relative;
|
|
|
|
.ks-model-chart-card-icon{
|
|
width: 30px;
|
|
height:30px;
|
|
display:block;
|
|
&.grid-icon{
|
|
background: url('@/assets/icons/icon-grid.png') center / 100% 100%;
|
|
}
|
|
&.model-icon{
|
|
background: url('@/assets/icons/icon-model-input.png') center / 100% 100%;
|
|
}
|
|
}
|
|
|
|
.ant-card-head {
|
|
border-color: #161c26;
|
|
color: #eee;
|
|
border-radius: 0;
|
|
background: linear-gradient(359deg, #010c1d 1%, #041a3c 55%);
|
|
}
|
|
|
|
.ks-model-chart-item {
|
|
height: 500px;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 15px;
|
|
border: 1px solid #0a2651;
|
|
margin-bottom: 15px;
|
|
color: #eee;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
background: linear-gradient(359deg, #010c1d 1%, #041a3c 55%);
|
|
&.size-small{
|
|
height: 300px;
|
|
}
|
|
&:hover{
|
|
border-color: #2f3b4e;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ant-statistic-title {
|
|
color: #eee;
|
|
}
|
|
}
|
|
|
|
&.ks-model-chart-card-carousel{
|
|
.ks-model-chart-item{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.ks-model-chart-item-description{
|
|
display:inline-block;
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0%;
|
|
span{
|
|
display:inline-block;
|
|
width: 100%;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-carousel {
|
|
position: relative;
|
|
|
|
.slick-slide-item {
|
|
width: calc(100% / 3 - 5px);
|
|
margin: 0 5px;
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
position: relative;
|
|
}
|
|
|
|
// 自定义箭头样式优化（适配深色主题）
|
|
.custom-slick-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 35px;
|
|
height: 35px;
|
|
font-size: 30px;
|
|
color: #eee;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
opacity: 0.3;
|
|
z-index: 20;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
opacity: 0.9;
|
|
}
|
|
&.prev-arrow {
|
|
left: 0px;
|
|
z-index: 20;
|
|
}
|
|
|
|
&.next-arrow {
|
|
right: 0px;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |