axwen-test31 2.0.0

package/src/views/market/monitor/summary/components/label-analysis-whole.vue

@@ -0,0 +1,859 @@
+<template>
+    <div class="label-analysis-whole">
+        <div class="target">
+            <div class="target-content" v-for="(item, index) in targetList" :key="index">
+                <div>
+                    <div class="label">{{ item.label }}
+                        <el-tooltip :content="item.content || ''" placement="top">
+                            <i v-if="item.content" class="el-icon-question"></i>
+                        </el-tooltip>
+                    </div>
+                    <div class="value font-bold">
+                        <span v-if="item.append && item.value >= 0">{{ item.append }}</span>
+                        {{ item.prepend ? (item.value ? item.value.toFixed(2) : 0) : numberToThousands(item.value) }}
+                        <span v-if="item.prepend">{{ item.prepend }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <el-tabs v-model="active" @input="handleTabChange">
+                <el-tab-pane label="目标过程明细" name="process" class="process">
+                    <div class="header">
+                        <div class="btns">
+                            <div
+                                v-for="item in Processtns"
+                                :class="{ 'font-bold': true, 'btn': true, 'active': item.value === activeProcess }"
+                                :key="item.value"
+                                @click="handleBtnChange(item)"
+                            >{{ item.label }}</div>
+                        </div>
+                        <div>
+                            <el-date-picker
+                                v-model="dateRange"
+                                type="daterange"
+                                start-placeholder="开始日期"
+                                end-placeholder="结束日期"
+                                range-separator="至"
+                                :clearable="false"
+                                align="right"
+                                :picker-options="pickerOptions"
+                                @change="loadChartData"
+                            >
+                            </el-date-picker>
+                        </div>
+                    </div>
+                    <div class="chart" ref="div" v-loading="processLoading">
+                        <the-chart class="h-full" ref="chartTwo" identity="chartTwo" />
+                    </div>
+                    <div class="table" v-loading="processLoading">
+                        <div class="table-header font-bold">列表数据</div>
+                        <yt-table
+                            ref="table"
+                            class="h-full"
+                            :fields="proceFields"
+                            :data="tableData"
+                            :style="{ 'maxWidth': tableMaxWidth}"
+                            :hasExport="false"
+                            :showFooter="false"
+                            height='389'
+                        >
+                        </yt-table>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="目标效果统计" name="effect" class="effect">
+                    <div class="header label-analysis-whole-table">
+                        <div class="btns">
+                            <div
+                                v-for="item in effectBtns"
+                                :class="{ 'font-bold': true, 'btn': true, 'active': item.value === activeEffect }"
+                                :key="item.value"
+                                @click="handleEffectBtnChange(item)"
+                            >{{ item.label }}</div>
+                        </div>
+                        <yt-search ref="search" :fields="searchFields" :grid="6" @submit="handleSearch" v-show="['customer', 'staff'].includes(activeEffect)" />
+                        <yt-table
+                            ref="customerTable"
+                            class="h-full"
+                            :fields="effectFields"
+                            :show-summary="true"
+                            :hasExport="false"
+                            :api="api"
+                            :beforeSearch="beforeSearch"
+                            :summaryMethod="getSummaries"
+                            :showFooter="showFooter"
+                            :height='380'
+                            row-key="custId"
+                            @load="handleLoad"
+                            v-if="activeEffect === 'customer'"
+                        />
+                        <yt-table
+                            ref="customerTable"
+                            class="h-full"
+                            :fields="table2fields"
+                            :show-summary="true"
+                            :hasExport="false"
+                            :data="tableOrgData"
+                            :summaryMethod="getSummaries"
+                            :showFooter="showFooter"
+                            :height='380'
+                            row-key="actId"
+                            v-else
+                        />
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+            <div class="update-time">
+                <span>数据更新时间：{{ data.data.dataUpdTime || '' }}</span>
+            </div>
+        </div>
+        <target-customer-list :detailForm="detailForm" ref="customer" />
+    </div>
+</template>
+
+<script>
+import { getActProcessDetailStatistics, getActProcessStatisticsByCustType, getActProcessStatisticsByUserType, getActProcessStatisticsByOrgType } from '@/api/market'
+import TheChart from '@/components/chart/the-chart'
+import { formatDate, handleAnalysisParam } from '@/utils'
+import CustomerExploreDetail from '@/views/customer/explore/customer-explore-detail'
+import TargetCustomerList from './target-customer-list'
+import { formatTargetToPage } from '@market-event-edit-pro/util'
+import { mapState } from 'vuex'
+import { numberToThousands } from '@/utils'
+import { throttle } from "lodash";
+
+const getCurentMoth = () => {
+    const today = new Date();
+    return [
+        new Date(today.getFullYear(), today.getMonth(), 1),
+        new Date(today.getFullYear(), today.getMonth() + 1, 0)
+    ]
+}
+
+export default {
+    name: 'label-analysis-whole',
+    components: { TheChart, CustomerExploreDetail, TargetCustomerList },
+    props: {
+        data: {
+            type: Object,
+            default: () => ({})
+        },
+        targetFieldsList: {
+            type: Array,
+            default: () => ([])
+        }
+    },
+    inject: ['isLoop', 'getCurrentJobId', 'getDetailForm'],
+    data () {
+        return {
+            numberToThousands,
+            active: 'process',
+            processLoading: true,
+            activeProcess: 'newlyAddTargetCompleteCount',
+            activeEffect: 'customer',
+            dateRange: getCurentMoth(),
+            tableData: [],
+            tableOrgData: [], // 按员工、按机构
+            staffFields: [],
+            orgFields: [],
+            wholeData: {},
+            searchParams: {},
+            tableMaxWidth: '1600px',
+            pickerOptions: {},
+            detailForm: {},
+            targetList: [
+                { label: '目标总个数', key: 'targetCount', value: '' },
+                { label: '目标完成人次', key: 'targetCompleteTimes', value: '' },
+                { label: '目标完成人数', key: 'targetCompleteCount', value: '' },
+                { label: '整体目标完成率', key: 'wholeTargetCompleteRate', value: '', prepend: '%', content: '整体目标完成率：每个目标完成率汇总/目标个数' },
+                { label: '与昨日相比', key: 'targetCompareYesterdayCompleteRate', value: '', append: '+', prepend: '%' }
+            ],
+            Processtns: [
+                { label: '新增目标完成人数', value: 'newlyAddTargetCompleteCount' },
+                { label: '累计营销成功率', value: 'marketingSuccRate' },
+                { label: '累计目标完成率', value: 'sumTargetCompleteRate' }
+            ],
+            effectBtns: [
+                { label: '按客户', value: 'customer' },
+                { label: '按员工', value: 'staff' },
+                { label: '按机构', value: 'org' }
+            ],
+            customerSearchFields: [
+                { title: '客户姓名', key: 'custName', type: 'input' },
+                { title: '客户号', key: 'custId', type: 'input' },
+                { title: '所属机构', key: 'orgId', type: 'org', props: { type: 'user' }}
+            ],
+            staffSearchFields: [
+                { title: '员工姓名', key: 'custName', type: 'input' },
+                { title: '所属机构', key: 'orgId', type: 'org', props: { type: 'user' }}
+            ]
+        }
+    },
+    watch: {
+        data: {
+            handler (val) {
+                this.targetList.forEach(item  => {
+                    item.value = val.data[item.key]
+                })
+            },
+            immediate: true,
+            deep: true
+        }
+    },
+    computed: {
+        ...mapState(['customerTagMap']),
+        api () {
+            let api = null
+            if (this.activeEffect === 'customer') api = getActProcessStatisticsByCustType
+            if (this.activeEffect === 'staff') api = getActProcessStatisticsByUserType
+            if (this.activeEffect === 'org') api = getActProcessStatisticsByOrgType
+            return api
+        },
+        table2fields () {
+            return this.activeEffect === 'staff' ? this.staffFields : this.orgFields
+        },
+        showFooter () {
+            return this.activeEffect === 'customer' ? true : false
+        },
+        proceFields () {
+            let arr = [
+                {
+                    title: '日期',
+                    key: 'date',
+                    table: {
+                        maxWidth: 120,
+                        showOverflowTooltip: true
+                    }
+                },
+                {
+                    title: '目标',
+                    key: 'targetName',
+                    table: {
+                        maxWidth: 120,
+                        showOverflowTooltip: true
+                    }
+                },
+                {
+                    title: '目标内容',
+                    key: 'goalVal',
+                    table: {
+                        maxWidth: 150,
+                        showOverflowTooltip: true
+                    },
+                    render: (h, { row }) => {
+                        let map = { 0: '目标数', 1: '目标率' }
+                        let unitMap = { 0: '人', 1: '%' }
+                        let areas = row.actTargetAreaList[0]
+                        let text = areas.goalType && areas.goalVal ? (map[areas.goalType] + ',' + areas.goalVal + unitMap[areas.goalType]) : '-'
+                        return <span>{{ text }}</span>
+                    }
+                },
+                {
+                    title: '对应规则',
+                    key: 'actTargetAreaList',
+                    table: {
+                        minWidth: 200,
+                        showOverflowTooltip: true
+                    },
+                    render: (h, { row }) => {
+                        return <CustomerExploreDetail targetType= {row.actTargetAreaList.length ? row.actTargetAreaList[0].targetType : 'label' } class="monitor-cur-customer-label" data= {row.actTargetAreaList.length ? this.formatTarget(row.actTargetAreaList[0]) : {}} />
+                    }
+                },
+                {
+                    title: '新增目标完成人数',
+                    key: 'newlyAddTargetCompleteCount',                   
+                    table: {
+                        maxWidth: 120,
+                        showOverflowTooltip: true
+                    },
+                    render: (h, { row }) => {
+                        return <yt-button type="text" size="medium" onClick={() => this.handleClickName(row)} logName="新增目标完成人数">{row.newlyAddTargetCompleteCount}</yt-button>
+                    }
+                },
+                {
+                    title: '新增目标完成率',
+                    key: 'newlyAddTargetCompleteRate',
+                    table: {
+                        maxWidth: 120,
+                        showOverflowTooltip: true
+                    },
+                    render: (h, { row }) => {
+                        return <span>{ row.newlyAddTargetCompleteRate.toFixed(2) }%</span>
+                    }
+                },
+                {
+                    title: '累计营销成功率',
+                    key: 'marketingSuccRate',
+                    table: {
+                        maxWidth: 120,
+                        showOverflowTooltip: true
+                    },
+                    render: (h, { row }) => {
+                        return <span>{ typeof row.marketingSuccRate === 'number' ? row.marketingSuccRate.toFixed(2) : 0 }%</span>
+                    }
+                },
+                {
+                    title: '累计目标完成率',
+                    key: 'targetCompleteRate',
+                    table: {
+                        maxWidth: 120,
+                        showOverflowTooltip: true
+                    },
+                    render: (h, { row }) => {
+                        return <span>{ row.targetCompleteRate.toFixed(2) }%</span>
+                    }
+                }
+            ]
+            return arr
+        },
+        effectFields () {
+            let arr = [
+                {
+                    title: '客户号',
+                    key: 'custId',
+                    type: 'input',
+                    table: {
+                        minWidth: 120,
+                        showOverflowTooltip: true
+                    },
+                    search: {
+                        order: 2
+                    }
+                },
+                {
+                    title: '客户姓名',
+                    key: 'custName',
+                    type: 'input',
+                    table: {
+                        minWidth: 120,
+                        showOverflowTooltip: true
+                    },
+                    search: {
+                        order: 1
+                    }
+                },
+                {
+                    title: '所属机构',
+                    key: 'actTargetAreaList',
+                    table: {
+                        minWidth: 120,
+                        showOverflowTooltip: true,
+                        children: [
+                            {
+                                title: '所属分区/辖区行',
+                                key: 'managerOrgLv1Name',
+                                table: {
+                                    minWidth: 120,
+                                    showOverflowTooltip: true
+                                }
+                            },
+                            {
+                                title: '所属支行/辖属行',
+                                key: 'managerOrgLv2Name',
+                                table: {
+                                    minWidth: 120,
+                                    showOverflowTooltip: true
+                                }
+                            }
+                        ]
+                    }
+                }
+            ]
+            let arr1 = [
+                {
+                    title: '员工姓名',
+                    key: 'userName',
+                    type: 'input',
+                    table: {
+                        minWidth: 120,
+                        showOverflowTooltip: true,
+                        isShow: () => this.activeEffect == 'staff'
+                    },
+                    search: {
+                        order: 1
+                    }
+                },
+                {
+                    title: '所属机构',
+                    key: 'actTargetAreaList',
+                    table: {
+                        minWidth: 120,
+                        showOverflowTooltip: true,
+                        children: [
+                            {
+                                title: '所属分区/辖区行',
+                                key: 'managerOrgLv1Name',
+                                table: {
+                                    minWidth: 120,
+                                    showOverflowTooltip: true
+                                }
+                            },
+                            {
+                                title: '所属支行/辖属行',
+                                key: 'managerOrgLv2Name',
+                                table: {
+                                    minWidth: 120,
+                                    showOverflowTooltip: true
+                                }
+                            }
+                        ]
+                    }
+                }
+            ]
+            let arr2 = [
+                {
+                    title: '机构名称',
+                    key: 'managerOrgLv1Name',
+                    type: 'input',
+                    table: {
+                        minWidth: 120,
+                        showOverflowTooltip: true,
+                        isShow: () => this.activeEffect == 'org'
+                    },
+                    search: {
+                        order: 1
+                    }
+                }
+            ]
+            if (this.targetFieldsList && this.targetFieldsList.length) {
+                this.targetFieldsList.forEach((item, index) => {
+                    let field = {
+                        title: item.actTargetArea.actTargetDesc,
+                        key: item.actTargetArea.targetId,
+                        table: {
+                            minWidth: 120,
+                            showOverflowTooltip: true,
+                            children: [
+                                {
+                                    title: '是否达标',
+                                    key: 'completeFlag',
+                                    index: index,
+                                    table: {
+                                        minWidth: 120,
+                                        showOverflowTooltip: true
+                                    },
+                                    render: (h, { row }, props) => {
+                                        let isFlag = false
+                                        if (row && row.actTargetEffectInfoList) {
+                                            isFlag = row.actTargetEffectInfoList[props.index]?.completeFlag || false
+                                        }
+                                        let text = isFlag ? '是' : '否'
+                                        return <span>{text}</span>
+                                    }
+                                }
+                            ] 
+                        }
+                    }
+                    if (item.targetLabelFlag) {
+                        field.table.children.unshift({
+                            title: '目标结果',
+                            key: 'completeResult',
+                            index: index,
+                            table: {
+                                minWidth: 120,
+                                showOverflowTooltip: true
+                            },
+                            render: (h, { row }) => {
+                                let text = '-'
+                                if (row && row.actTargetEffectInfoList) {
+                                    text = row.actTargetEffectInfoList[index]?.completeResult || '-'
+                                }
+                                return <span>{text}</span>
+                            }
+                        })
+                    }
+                    arr.push(field)
+                })
+                // 按员工、按机构
+                this.targetFieldsList.forEach((item, index) => {
+                    let field = {
+                        title: item.actTargetArea.actTargetDesc,
+                        key: item.actTargetArea.targetId,
+                        table: {
+                            minWidth: 120,
+                            showOverflowTooltip: true,
+                            children: [
+                                {
+                                    title: '达标人数',
+                                    key: 'completeCount',
+                                    index: index,
+                                    table: {
+                                        minWidth: 120,
+                                        showOverflowTooltip: true
+                                    },
+                                    render: (h, { row }, props) => {
+                                        let text = '-'
+                                        if (row && row.actTargetEffectInfoList) {
+                                            text = row.actTargetEffectInfoList[index]?.completeCount || '-'
+                                        }
+                                        return <span>{text}</span>
+                                    }
+                                }
+                            ] 
+                        }
+                    }
+                    if (item.targetLabelFlag) {
+                        field.table.children.push({
+                            title: '目标合计',
+                            key: 'completeResult',
+                            index: index,
+                            table: {
+                                minWidth: 120,
+                                showOverflowTooltip: true
+                            },
+                            render: (h, { row }) => {
+                                let text = '-'
+                                if (row && row.actTargetEffectInfoList) {
+                                    text = row.actTargetEffectInfoList[index]?.completeResult || '-'
+                                }
+                                return <span>{text}</span>
+                            }
+                        })
+                    }
+                    arr1.push(field)
+                    arr2.push(field)
+                })
+            }
+            this.staffFields = arr1
+            this.orgFields = arr2
+            return arr
+        },
+        searchFields () {
+            return this.activeEffect === 'customer' ? this.customerSearchFields : this.staffSearchFields
+        }
+    },
+    mounted () {
+        this.loadChartData()
+        this.handleAutoTableWidth()
+        window.addEventListener("resize", this.handleAutoTableWidth);
+    },
+    activated() {
+        window.addEventListener("resize", this.handleAutoTableWidth);
+    },
+    destroyed() {
+        window.removeEventListener("resize", this.handleAutoTableWidth);
+    },
+    methods: {
+        isNull(value) {
+            if (value) {
+                return false;
+            }
+            return true;
+        },
+        handleTabChange (val) {
+            if (val === 'effect') {
+                this.$nextTick(() => {
+                    this.$refs.search.handleSizeChange()
+                    this.$refs.customerTable.doLayout()
+                })
+            }
+        },
+        // 用来获取当前屏幕可用宽度，给table一个maxWidth，否则宽度会自动增加
+        handleAutoTableWidth: throttle(function () {
+            this.$nextTick(() => {
+                const $header = this.$refs["div"];
+                let width = $header ? $header.offsetWidth || 1200 : 1200
+                this.tableMaxWidth = width + 'px'
+                const table = this.$refs.table
+                const customerTable = this.$refs.customerTable
+                if (table) {
+                    table.doLayout()
+                }
+                if (customerTable) {
+                    customerTable.doLayout()
+                }
+            })
+        }, 300),
+        handleSearch (form) {
+            this.searchParams = form
+            if (this.activeEffect === 'customer') {
+                this.$refs.customerTable.refresh(true)
+            } else if (['staff', 'org'].includes(this.activeEffect)) {
+                this.beforeSearch1()
+            }
+        },
+        beforeSearch (params) {
+            if (this.activeEffect === 'customer') {
+                if (params.search) {
+                    params.search = Object.assign(params.search, this.searchParams)
+                    params.search = handleAnalysisParam(params.search, this.isLoop, this.$route.query.id)
+                }
+            } else if (['staff', 'org'].includes(this.activeEffect)) {
+                let params = handleAnalysisParam({}, this.isLoop || false, this.$route.query.id)
+                this.api(params).then(res => {
+                    this.tableOrgData = res.data
+                })
+            }
+            return params
+        },
+        beforeSearch1 () {
+            let params = {
+                userName: this.searchParams.custName,
+                orgId: this.searchParams.orgId
+            }
+            params = handleAnalysisParam(params, this.isLoop || false, this.$route.query.id)
+            this.api(params).then(res => {
+                this.tableOrgData = res.data
+            }).finally(() => {
+                this.$refs.customerTable.doLayout()
+            })
+        },
+        // 合计
+        getSummaries(param) {
+            const { columns, data } = param;
+            const sums = [];
+            let tableData = this.$refs.customerTable && this.$refs.customerTable.tableData || []
+            columns.forEach((column, index) => {
+                if (index === 0) {
+                    sums[index] = '合计';
+                    return;
+                } else if (['目标结果', '目标合计'].includes(column.label) && (column.index === 0 || column.index) && tableData.length) {
+                    let text = tableData[0].actTargetEffectInfoList[column.index].proValueSum || ''
+                    sums[index] = text
+                } 
+                else {
+                    return ''
+                }
+            });
+            return sums;
+        },
+        handleLoad () {
+            this.$nextTick(() => {
+                this.$refs.customerTable.doLayout()
+            })
+        },
+        handleBtnChange (item) {
+            this.activeProcess = item.value
+            this.getChartData()
+        },
+        handleEffectBtnChange (item) {
+            this.activeEffect = item.value
+            this.$refs.search.initForm()
+            this.$refs.search.handleReset()
+            this.$nextTick(() => {
+                this.$refs.customerTable.refresh(true)
+                if (['staff', 'org'].includes(this.activeEffect)) {
+                    this.beforeSearch1()
+                }
+            })
+        },
+        loadChartData () {
+            this.processLoading = true
+            let params = {
+                startTime: formatDate(this.dateRange[0]),
+                endTime: formatDate(this.dateRange[1])
+            }
+            params = handleAnalysisParam(params, this.isLoop, this.$route.query.id)
+            getActProcessDetailStatistics(params).then(res => {
+                this.wholeData = res.data
+                this.getChartData(res.data)
+                this.getTableData(res.data)
+            }).finally(() => {
+                this.processLoading = false
+            })
+        },
+        getChartData (val) {
+            let data = val || this.wholeData
+            let series = []
+            let titleList = []
+            if (data && data.actTargetDetailListMap) {
+                let obj = Object.values(data.actTargetDetailListMap)
+                obj.forEach((element, index) => {
+                    let list = []
+                    let title = ''
+                    element.forEach(item => {
+                        list.push(item[this.activeProcess] || 0)
+                        if (index === 0) titleList.push(item.date)
+                        title = item.targetName
+                    })
+                    series.push({ data: list, type: 'line', name: title, barWidth: 20 })
+                });
+            }
+            this.renderChartTwo(series, titleList)
+        },
+        renderChartTwo (series, titleList) {
+            const processBtn = this.Processtns.find(i => i.value === this.activeProcess)
+            let { label: yName, value: yValue } = processBtn
+            const chartOptions = {
+                color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16'],
+                legend: {
+                    show: true,
+                    bottom: '0px'
+                },
+                grid: {
+                    top: '56px',
+                    left: '16px',
+                    right: '66px',
+                    bottom: '40px',
+                    containLabel: true
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    formatter: function (params) {
+                        let relVal = params[0].name
+                        for (let i = 0; i < params.length; i++) {
+                            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + (yValue === 'newlyAddTargetCompleteCount' ? '' : '%')
+                        }
+                        return relVal
+                    }
+                },
+                xAxis: { type: 'category', interval: 'auto', name: '日期', data: titleList },
+                yAxis: {
+                    name: yName,
+                    minInterval: 1,
+                    nameTextStyle: {
+                        align: 'left'
+                    },
+                    axisLabel: {
+                        formatter: function (value, index) {
+                            return yValue === 'newlyAddTargetCompleteCount' ? value : `${value}%`
+                        }
+                    }
+                },
+                series: series
+            };
+            this.$refs['chartTwo'].init(chartOptions);
+        },
+        getTableData (data) {
+            this.tableData = data.actTargetProcessListResponseDTOList
+        },
+        formatAreas(data) {
+            let arr = []
+            arr.push(data)
+            return formatTargetToPage(arr,this.customerTagMap)
+        },
+        formatTarget(data) {
+            let Target = this.formatAreas(data)
+            return Target.length === 1 ? Target[0].target : []
+        },
+        handleClickName (row) {
+            let params = {
+                startTime: row.date,
+                endTime: row.date,
+                targetId: row.targetId
+            }
+            params = handleAnalysisParam(params, this.isLoop, this.$route.query.id)
+            this.detailForm = this.getDetailForm()
+            this.$refs.customer.open(params)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.label-analysis-whole {
+    .target {
+        width: 100%;
+        display: flex;
+        background: #F8F8FB;
+        padding: 12px 16px;
+        margin-top: 12px;
+
+        .target-content {
+            flex: 1;
+            .label {
+                font-size: 12px;
+                display: flex;
+                align-items: center;
+            }
+            .value {
+                font-size: 16px;
+            }
+        }
+    }
+
+    .content {
+        position: relative;
+        border: 1px solid #E3E5E8;
+        border-radius: 4px;
+        margin-top: 12px;
+        .process {
+            .header {
+                display: flex;
+                justify-content: space-between;
+                
+                .btns {
+                    width: 328px;
+                    height: 32px;
+                    background: #EFF4FF;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 3px 8px;
+                    border-radius: 4px;
+
+                    .btn {
+                        padding: 5px 8px;
+                        cursor: pointer;
+                    }
+                    .active {
+                        color: #1664FF;
+                        background: #ffffff;
+                        border-radius: 4px;
+                    }
+                }
+            }
+            .chart {
+                height: 333px;
+                margin-bottom: 12px;
+                border-radius: 4px;
+            }
+            .table {
+                width: 100%;
+                border-radius: 4px;
+                height: 207px;
+
+                .table-header {
+                    padding: 16px 4px;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        .effect {
+            .header {
+                .yt-form {
+                    display: flex !important;
+                    .el-row {
+                        padding-right: 10px !important;
+                    }
+                }
+                .btns {
+                    width: 172px;
+                    height: 32px;
+                    background: #EFF4FF;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 3px 8px;
+                    border-radius: 4px;
+                    margin-bottom: 12px;
+
+                    .btn {
+                        padding: 5px 8px;
+                        cursor: pointer;
+                    }
+                    .active {
+                        color: #1664FF;
+                        background: #ffffff;
+                        border-radius: 4px;
+                    }
+                }
+            }
+        }
+
+        // yt-table中会莫名奇妙展示（收起、展开），故在此隐藏
+        .label-analysis-whole-table {
+            .yt-search__more {
+                display: none;
+            }
+        }
+    }
+    .update-time {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        color: #9E9E9E;
+    }
+}
+</style>