sl-sfy-safety/src/views/datamanager/platformdata/compoents/common/ChartIndex.vue

<template>
  <Timenation />
  <BarChart v-if="true" />
  <LineChart v-else />
  <!-- <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>