<template>
    <div class="mesTechnicalNotice-container">
      <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
        <el-form :model="queryParams" ref="queryForm" labelWidth="90">
          <el-row>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
              <el-form-item label="月份范围">
                <el-date-picker v-model="queryParams.month" type="monthrange" range-separator="-" start-placeholder="开始月份" format="YYYY-MM" value-format="YYYY-MM" end-placeholder="结束月份"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb10 ml10">
              <el-button-group>
                <el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询
                </el-button>
                <el-button icon="ele-Refresh" @click="closeQuery"> 重置 </el-button>
              </el-button-group>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="full-table" shadow="hover" style="margin-top: 8px;">
        <bardialog title="月度人均产出趋势图" :xdata="itembar.xdata"  :seriesdata="itembar.seriesdata" ref="bardialogRef" />

      </el-card>
    </div>
  </template>
          
          <script lang="ts" setup="" name="everypeople">
  import { ref } from 'vue';
  import bardialog from './bargroup/bardialog.vue';
  
  const bardialogRef = ref();
  const loading = ref(false);
  const queryParams = ref<any>({});
  const itembar = ref<any>({});
  
  const getUnique = () => {
      itembar.value.xdata = ['8月','9月','10月','11月','12月'];
      itembar.value.seriesdata = [{
        data: [63,65,0,0,0],
        type: 'bar',
        label: {
					show: true,
					position: 'top',
				},
      }]
  };
  // 查询操作
  const handleQuery = async () => {
      loading.value = true;
      getUnique()
    //   var res = await processEquipmentWork(Object.assign(queryParams.value));
    //   if (res.data.result) {
    //       let data = Object.values(res.data.result);
    //   }
      loading.value = false;
  };
  const closeQuery = async () => {
      queryParams.value = {};
      handleQuery();
  };
  
  
  handleQuery();
  </script>
          <style scoped>
  :deep(.el-ipnut),
  :deep(.el-select),
  :deep(.el-input-number) {
      width: 100%;
  }
  </style>
          
          