sl-sfy-safety/src/views/datamanager/systemdata/TableEcharts.vue

<template>
    <div>
        <el-dialog v-model="visible" :before-close="handleClose" center style="width: 700px;">
            <el-card>
                <template #header>
                    <div v-if="isShowAll === false" style="text-align: center;">
                        <el-button type="text" @click="currentDayChart">今日</el-button>
                        <el-button type="text" @click="currentMonthChart">本月</el-button>
                        <el-button type="text" @click="allDatasChart">累计</el-button>

                    </div>
                    <div v-else>
                        <el-form inline ref="ruleFormRef" :model="form" style="width:600px">
                            <el-form-item style="margin-top: 20px;">
                                <el-select v-model="form.workspace" placeholder="请选择车间"
                                    style="width: 140px ;text-align: left;">
                                    <el-option v-for="item in BoardDeptList" :key="item.value" :value="item.value"
                                        :label="item.label"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-button style="text-align: left;width: 100px;" type="primary"
                                @click="getDepartmentData">生成柱状图</el-button>
                            <el-button style="text-align: left; margin-left: 180px;" type="text"
                                @click="currentDayChart">今日</el-button>
                            <el-button style="text-align: left;" type="text" @click="currentMonthChart">本月</el-button>
                            <el-button style="text-align: left;" type="text" @click="allDatasChart">累计</el-button>

                        </el-form>

                    </div>
                </template>
                <div id="container" style="width: 600px; height: 470px;margin-left: 20px;"></div>
            </el-card>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">

import * as echarts from 'echarts';
import { ref, markRaw } from 'vue';
import { ElMessageBox } from 'element-plus';
import { BoardDeptList } from './config'
import { watch } from 'vue';
import { onMounted } from 'vue';
import { VisitsModel } from '@/api/datamanagement/dataplatform';

interface DataOption {
    title: {},//标题
    tooltip: {},//虚线
    calculate: Boolean,
    xAxis: {},
    yAxis: {},
    series: SerialModel[]
}




const visible = ref(false);
const userId = ref(1);
const isShowAll = ref(false);//控制标题是否居中
const chart = ref<any>("");




watch(
    () => props.dialogVisible,
    (newvisible) => {
        visible.value = newvisible
        console.log('tablechart', visible.value)
    },
    { immediate: true },
)
watch(
    () => props.userId,
    (newuserId) => {
        userId.value = newuserId
        console.log('tablechart-data:', userId.value)
        currentDayChart()
    },
    { immediate: true },
)

const form = ref({
    workspace: '',
});


const props = defineProps<{
    dialogVisible: boolean,
    userId: number,
    currentDayChart: (d: number) => Promise<VisitsModel[]>,
    currentMonthChart: (d: number) => Promise<VisitsModel[]>,
    allDatasChart: (d: number) => Promise<VisitsModel[]>,
    closeDialog(),
    // getDepartmentData: () => Promise<unknown>,

}>();



// 关闭对话框
function closeDialog() {
    visible.value = false;
    props.closeDialog();
    // emit('closeDialog');
}

// 关闭对话框
function handleClose(done: () => void) {
    ElMessageBox.confirm('确认关闭?')
        .then(() => {

            done()
            closeDialog();//关闭对话框
        })
        .catch(() => {

            // catch error
        })
}

// 查看今日数据
function currentDayChart() {
    isShowAll.value = false;
    console.log('table-chart-currentday');
    const daytitle = ref();
    const seriesdata = ref()
    props.currentDayChart(userId.value).then(res => {
        daytitle.value = getHorizontalTitle(res);
        seriesdata.value = getVorizontalData(res);
        console.log('查看今日数据', res);
        console.log('查看今日数据', daytitle);
        console.log('查看今日数据', seriesdata);
        initChart(optionday.value, daytitle.value, seriesdata.value)
    })

};

// 查看本月数据
function currentMonthChart() {
    isShowAll.value = false;
    console.log('currentmonth:', userId.value);
    const monthtitle = ref();
    const monthseriesdata = ref()
    props.currentMonthChart(userId.value).then(res => {
        console.log('table-chart-currentmonth:', res);
        monthtitle.value = getHorizontalTitle(res);
        monthseriesdata.value = getVorizontalData(res);
        console.log('查看今日数据', res);
        console.log('查看今日数据', monthtitle);
        console.log('查看今日数据', monthseriesdata);
        initChart(optionmonth.value, monthtitle.value, monthseriesdata.value)
    })
};


// 查看累计数据
function allDatasChart() {
    isShowAll.value = true;
    console.log('alldata');
    const alltitle = ref();
    const allseriesdata = ref()
    props.allDatasChart(userId.value).then(res => {
        console.log(res);
        alltitle.value = getHorizontalTitle(res);
        allseriesdata.value = getVorizontalData(res);
        console.log('查看今日数据', res);
        console.log('查看今日数据', alltitle);
        console.log('查看今日数据', allseriesdata);
        initChart(optionall.value, alltitle.value, allseriesdata.value)
    })
}

interface SerialModel {
    data: [],
    type: string,
}


function initChart(data: DataOption, title: [], series: []) {
    data.xAxis = {};
    const dataseries = ref<SerialModel[]>([]);

    const type = ref('category');
    const horidata = ref([]) //todo，获取横坐标
    const nameLocation = ref('center');
    const axisLabel = { interval: 0, rotate: 30 };
    const nameTextStyle = {
        color: 'red',
        fontSize: 6,
    };
    horidata.value = title;

    data.xAxis = { type: type.value, data: horidata.value, nameLocation: nameLocation.value, axisLabel: axisLabel, nameTextStyle: nameTextStyle }


    const seriesdata = ref<SerialModel>({
        data: [],//todo，获取数值,
        type: 'bar'
    })
    seriesdata.value.data = series;
    dataseries.value.push(seriesdata.value)
    data.series = dataseries.value;

    console.log('data.xAxis.data', data.xAxis);
    console.log('data.yAxis.data', data.series)
    console.log(data)
    createChart(data);

}

// 创建图表
function createChart(option: DataOption) {
    chart.value = markRaw(echarts.init(document.getElementById('container') as HTMLDivElement))

    chart.value.setOption(option);

    // 大小自适应
    window.addEventListener('resize', () => {
        chart.value.resize();
    })
}

// 创建柱状图
function getDepartmentData() {
    // todo,原型未定义
}



function getHorizontalTitle(data: VisitsModel[]) {
    console.log('getHorizontalTitle:', data)
    const title = ref<string[]>([]);
    for (var i = 0; i < data.length; i++) {
        title.value.push(data[i].workshopName)
        console.log('getHorizontalTitle-data-i', data[i].workshopName)
    }
    console.log('title:', title);
    return title;
}

function getVorizontalData(data: VisitsModel[]) {
    console.log('getvorizontaldata:', data)
    const seriesData = ref<number[]>([]);
    for (var i = 0; i < data.length; i++) {
        seriesData.value.push(data[i].visits)
        console.log('getHorizontalTitle-data-i', data[i].visits)
    }
    console.log('seriesData:', seriesData);
    return seriesData;
}

const optionday = ref();
optionday.value = {
    title: {
        text: '各车间地点访问次数柱状图(天)',
        x: "center", //设置标题位置居中
        textStyle: {//设置主标题的文字风格
            fontSize: 10 //文字大小
        },



    },//标题
    tooltip: {
        trigger: 'axis'
    },//虚线
    calculate: true,//显示数据
    xAxis: {
        type: 'category',
        data: [],//todo，获取横坐标
        nameLocation: 'center',
        axisLabel: { interval: 0, rotate: 30 },
        nameTextStyle: {
            color: 'red',
            fontSize: 6,

        }
    },
    yAxis: {
        type: 'value',
        name: '访问次数',
        nameTextStyle: {
            color: 'black',
            fontSize: 8,
            padding: 0,
        }

    },
    series: [
        {
            data: [],//todo，获取数值,
            type: 'bar'
        }
    ]
};


const optionmonth = ref();
optionmonth.value = {
    title: {
        text: '各车间地点访问次数柱状图(月)',
        x: "center", //设置标题位置居中
        textStyle: {//设置主标题的文字风格
            fontSize: 10 //文字大小
        },



    },//标题
    tooltip: {
        trigger: 'axis'
    },//虚线
    calculate: true,//显示数据
    xAxis: {
        type: 'category',
        data: [],//todo，获取横坐标
        nameLocation: 'center',
        axisLabel: { interval: 0, rotate: 30 },
        nameTextStyle: {
            color: 'red',
            fontSize: 6,

        }
    },
    yAxis: {
        type: 'value',
        name: '访问次数',
        nameTextStyle: {
            color: 'black',
            fontSize: 8,
            padding: 0,
        }

    },
    series: [
        {
            data: [],//todo，获取数值,
            type: 'bar'
        }
    ]
};


const optionall = ref();
optionall.value = {
    title: {
        text: '各车间地点访问次数柱状图(汇总)',
        x: "center", //设置标题位置居中
        textStyle: {//设置主标题的文字风格
            fontSize: 10 //文字大小
        },



    },//标题
    tooltip: {
        trigger: 'axis'
    },//虚线
    calculate: true,//显示数据
    xAxis: {
        type: 'category',
        data: [],//todo，获取横坐标
        nameLocation: 'center',
        axisLabel: { interval: 0, rotate: 30 },
        nameTextStyle: {
            color: 'red',
            fontSize: 6,

        }
    },
    yAxis: {
        type: 'value',
        name: '访问次数',
        nameTextStyle: {
            color: 'black',
            fontSize: 8,
            padding: 0,
        }

    },
    series: [
        {
            data: [],//todo，获取数值,
            type: 'bar'
        }
    ]
};


onMounted(() => {
    isShowAll.value = false;
})

</script>

<style scoped></style>