|
|
@@ -0,0 +1,358 @@
|
|
|
+<template>
|
|
|
+ <Timenation />
|
|
|
+ <BarChart />
|
|
|
+ <LineChart />
|
|
|
+ <!-- <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 departmentList"
|
|
|
+ :key="item.deptId"
|
|
|
+ :value="item.deptName"
|
|
|
+ :label="item.deptName"
|
|
|
+ ></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> -->
|
|
|
+ <!-- <div id="container" style="width: 600px; height: 470px; margin-left: 20px"></div> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import Timenation from './Timenation.vue';
|
|
|
+ import BarChart from '../../charts/BarChart.vue';
|
|
|
+ import LineChart from '../../charts/LineChart.vue';
|
|
|
+
|
|
|
+ // import * as echarts from 'echarts';
|
|
|
+ // import { ref, markRaw } from 'vue';
|
|
|
+ // import { watch } from 'vue';
|
|
|
+ // import { onMounted } from 'vue';
|
|
|
+ // import { DepartMentModel, VisitsModel, getDeptList } 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>("");
|
|
|
+
|
|
|
+ // const departmentList = ref<DepartMentModel[]>([]);
|
|
|
+ // const getDepartmentList = () => {
|
|
|
+ // getDeptList().then((res) => {
|
|
|
+ // departmentList.value = res;
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+
|
|
|
+ // 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<{
|
|
|
+ // stuffNo?: number | string | undefined,
|
|
|
+
|
|
|
+ // currentDayChart: (d: number) => Promise<VisitsModel[]>,
|
|
|
+ // currentMonthChart: (d: number) => Promise<VisitsModel[]>,
|
|
|
+ // allDatasChart: (d: number) => Promise<VisitsModel[]>,
|
|
|
+ // getDepartmentData: () => Promise<unknown>,
|
|
|
+ // }>();
|
|
|
+
|
|
|
+ // 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 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:', userId.value);
|
|
|
+ // 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 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;
|
|
|
+ // getDepartmentList();
|
|
|
+ // })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped></style>
|
wyf