|
@@ -16,7 +16,7 @@
|
|
@current-change="dataList"
|
|
@current-change="dataList"
|
|
@selection-change="selectionChange"
|
|
@selection-change="selectionChange"
|
|
>
|
|
>
|
|
- <template #menu-left="{ size }">
|
|
|
|
|
|
+ <template #menu-left>
|
|
<div id="charts"></div>
|
|
<div id="charts"></div>
|
|
</template>
|
|
</template>
|
|
</avue-crud>
|
|
</avue-crud>
|
|
@@ -28,6 +28,8 @@ import { useCrud } from "@/hooks/userCrud";
|
|
import dictDataUtil from "@/common/configs/dictDataUtil";
|
|
import dictDataUtil from "@/common/configs/dictDataUtil";
|
|
|
|
|
|
import { useDictionaryStoreHook } from "@/store";
|
|
import { useDictionaryStoreHook } from "@/store";
|
|
|
|
+import { getStatistics } from "@/api/order/index";
|
|
|
|
+import * as echarts from "echarts";
|
|
|
|
|
|
// 数据字典相关
|
|
// 数据字典相关
|
|
const { dicts } = useDictionaryStoreHook();
|
|
const { dicts } = useDictionaryStoreHook();
|
|
@@ -44,8 +46,41 @@ const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等
|
|
|
|
|
|
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
|
|
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
|
|
|
|
|
|
|
|
+const charts = ref(null);
|
|
|
|
+
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
|
+ charts.value = echarts.init(document.getElementById("charts"));
|
|
|
|
+
|
|
dataList();
|
|
dataList();
|
|
|
|
+
|
|
|
|
+ getStatistics(search.value).then((res) => {
|
|
|
|
+ const { data } = res;
|
|
|
|
+ const { value, key } = data;
|
|
|
|
+ charts.value.setOption({
|
|
|
|
+ title: {
|
|
|
|
+ text: "任务状态统计图",
|
|
|
|
+ left: "center",
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ data: key,
|
|
|
|
+ },
|
|
|
|
+ yAxis: {},
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ type: "bar",
|
|
|
|
+ data: value,
|
|
|
|
+ itemStyle: {
|
|
|
|
+ barBorderRadius: 5,
|
|
|
|
+ borderWidth: 1,
|
|
|
|
+ borderType: "solid",
|
|
|
|
+ borderColor: "#73c0de",
|
|
|
|
+ shadowColor: "#5470c6",
|
|
|
|
+ shadowBlur: 3,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ });
|
|
|
|
+ });
|
|
});
|
|
});
|
|
|
|
|
|
// 设置表格列或者其他自定义的option
|
|
// 设置表格列或者其他自定义的option
|
|
@@ -73,15 +108,7 @@ option.value = Object.assign(option.value, {
|
|
prop: "workOrderCode",
|
|
prop: "workOrderCode",
|
|
search: true,
|
|
search: true,
|
|
},
|
|
},
|
|
- {
|
|
|
|
- label: "工单名称",
|
|
|
|
- prop: "workOrderName",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "产线编码",
|
|
|
|
- prop: "productLineCode",
|
|
|
|
- search: true,
|
|
|
|
- },
|
|
|
|
|
|
+
|
|
{
|
|
{
|
|
label: "产线名称",
|
|
label: "产线名称",
|
|
prop: "productLineName",
|
|
prop: "productLineName",
|
|
@@ -95,10 +122,7 @@ option.value = Object.assign(option.value, {
|
|
prop: "materialCode",
|
|
prop: "materialCode",
|
|
search: true,
|
|
search: true,
|
|
},
|
|
},
|
|
- {
|
|
|
|
- label: "工单名称",
|
|
|
|
- prop: "workOrderName",
|
|
|
|
- },
|
|
|
|
|
|
+
|
|
{
|
|
{
|
|
label: "工序编码",
|
|
label: "工序编码",
|
|
prop: "operationCode",
|
|
prop: "operationCode",
|
|
@@ -129,17 +153,17 @@ option.value = Object.assign(option.value, {
|
|
label: "计划结束时间",
|
|
label: "计划结束时间",
|
|
prop: "planStartEnd",
|
|
prop: "planStartEnd",
|
|
},
|
|
},
|
|
- {
|
|
|
|
- label: "修改时间",
|
|
|
|
- prop: "updated",
|
|
|
|
- },
|
|
|
|
],
|
|
],
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
+:deep(.avue-crud__left) {
|
|
|
|
+ width: 100%;
|
|
|
|
+}
|
|
#charts {
|
|
#charts {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 300px;
|
|
height: 300px;
|
|
|
|
+ border: 1px solid #ccc;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|