admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接劳务管理右下角今日-实时数据。

Browse Source
This commit is contained in:
严妍 2023-07-14 17:44:33 +08:00
parent 3c22e2e7cc
commit 44138c463f
4 changed files with 375 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue
View File

@ -267,7 +267,7 @@ function initOption() {
function drawChart() { function drawChart() {
initOption(); initOption();
console.log("绘制前数据", yData.value) console.log("绘制前数据", yData.value);
let EchartsTime = echarts.init(document.getElementById("EchartsTime")); let EchartsTime = echarts.init(document.getElementById("EchartsTime"));
EchartsTime.setOption(option.value); EchartsTime.setOption(option.value);
} }

17
src/views/sevenLargeScreen/distributionMonitoring/topCenter.vue
View File

@ -63,7 +63,12 @@ import { getRealTimeDataApi, getDevListApi } from "@/api/modules/distribution";
import mitts from "@/utils/bus"; //兄弟组件传值 import mitts from "@/utils/bus"; //兄弟组件传值
// import Card from "@/components/card.vue"; // import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
const store = GlobalStore();
function selectChange(e: any) {
//发送设备编号
mitts.emit("devSn", e);
}
// 下拉框存放的value // 下拉框存放的value
let devValue = ref(1 as any); let devValue = ref(1 as any);
let noiseList = ref([ let noiseList = ref([
@ -76,18 +81,14 @@ let noiseList = ref([
label: "电箱2" label: "电箱2"
} }
]); ]);
function selectChange(e: any) { const store = GlobalStore();
//发送设备编号
mitts.emit("devSn", e);
}
const getDevOption = async () => { const getDevOption = async () => {
const res: any = await getDevListApi({ const res: any = await getDevListApi({
projectSn: store.sn projectSn: store.sn
}); });
if (res.result) { if (res.result) {
devValue.value = res.result[0].devSn; devValue.value = res.result[0].devSn;
noiseList.value = res.result.map(item => { noiseList.value = res.result.map((item: any) => {
return { return {
value: item.devSn, value: item.devSn,
label: item.devName label: item.devName
@ -98,7 +99,7 @@ const getDevOption = async () => {
}; };
// let devSn = ref("" as any); // let devSn = ref("" as any);
let realTimeData = ref(null as any) let realTimeData = ref(null as any);
const getRealTimeList = async () => { const getRealTimeList = async () => {
const res: any = await getRealTimeDataApi({ const res: any = await getRealTimeDataApi({
projectSn: store.sn, projectSn: store.sn,

692
src/views/sevenLargeScreen/laborManagement/rightBottom.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<Card title="按分包单位分析"> <Card title="按分包单位分析">
<div class="rightHeader"> <div class="rightHeader">
<div class="day Selected">实时</div> <div class="day Selected" @click="getNowData">实时</div>
<div class="year Selected">今日</div> <div class="year Selected" @click="getTodayData">今日</div>
</div> </div>
<div id="echartsBottom" style="width: 100%; height: 100%"></div> <div id="echartsBottom" style="width: 100%; height: 100%"></div>
</Card> </Card>
</template> </template>
<script> <script lang="ts" setup>
import { onMounted, reactive, ref, onBeforeUnmount } from "vue"; import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { getComapnyWorkTotalListApi } from "@/api/modules/labor"; import { getComapnyWorkTotalListApi } from "@/api/modules/labor";
@ -16,351 +16,365 @@ import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
const store = GlobalStore(); const store = GlobalStore();
export default { const labelimg = ref(new URL("@/assets/images/larborManagement/greenX.png", import.meta.url).href);
components: { const labelimg2 = ref(new URL("@/assets/images/larborManagement/orangeX.png", import.meta.url).href);
Card let option = ref({
grid: {
left: "10%",
top: "25%",
right: "3%",
bottom: "12%"
}, },
setup() { // "legend": {
const labelimg = ref(new URL("@/assets/images/larborManagement/greenX.png", import.meta.url).href); // "data": [
const labelimg2 = ref(new URL("@/assets/images/larborManagement/orangeX.png", import.meta.url).href); // "信息",
let option = ref({ // "往下场所",
grid: { // "关系",
left: "10%", // "关联",
top: "25%", // "人",
right: "3%", // "物",
bottom: "12%" // "组织"
}, // ],
// "legend": { // "top": "92%",
// "data": [ // "icon": "circle",
// "信息", // "textStyle": {
// "往下场所", // "color": "#0DCAD2"
// "关系", // }
// "关联", // },
// "人", color: ["#A3EAFF", "#ECD64F", "#00E4F0", "#44D16D"],
// "物", tooltip: {
// "组织" position: "top"
// ], },
// "top": "92%", xAxis: {
// "icon": "circle", data: ["XX有限公司", "XX有限公司", "XX有限公司", "XX有限公司"],
// "textStyle": { triggerEvent: true,
// "color": "#0DCAD2" axisTick: {
// } show: false
// }, },
color: ["#A3EAFF", "#ECD64F", "#00E4F0", "#44D16D"], axisLine: {
tooltip: { show: false
position: "top" },
}, axisLabel: {
xAxis: { width: 10,
data: ["XX有限公司", "XX有限公司", "XX有限公司", "XX有限公司"], show: true,
triggerEvent: true, rotate: 0,
axisTick: { interval: 2,
show: false textStyle: {
}, // padding: [14, 0, 0, 0],
axisLine: { fontSize: 12,
show: false color: "#fff"
}, }
axisLabel: { }
width: 10, },
show: true, yAxis: {
rotate: 0, name: "单位：人数",
interval: 0, triggerEvent: true,
textStyle: { nameTextStyle: {
// padding: [14, 0, 0, 0], color: "#fff",
fontSize: 12, fontSize: 12
color: "#fff" // padding: [0, 0, 10, -20]
} },
} splitLine: {
}, show: true,
yAxis: { lineStyle: {
name: "单位：人数", color: "#14346c"
triggerEvent: true, }
nameTextStyle: { },
color: "#fff", axisTick: {
fontSize: 12 show: false
// padding: [0, 0, 10, -20] },
}, axisLine: {
splitLine: { show: true,
show: true, lineStyle: {
lineStyle: { color: "#14346c"
color: "#14346c" }
} },
}, axisLabel: {
axisTick: { show: true,
show: false textStyle: {
}, color: "#fff",
axisLine: { fontSize: 12
show: true, }
lineStyle: { }
color: "#14346c" },
} series: [
}, {
axisLabel: { type: "pictorialBar",
show: true, name: "提示框值",
textStyle: { data: [
color: "#fff",
fontSize: 12
}
}
},
series: [
{ {
type: "pictorialBar", label: {
name: "提示框值", show: true,
data: [ position: "top",
{ formatter: function (params) {
label: { var index = params.dataIndex;
show: true, var str = "{c|}";
position: "top", return str;
formatter: function (params) {
var index = params.dataIndex;
var str = "{c|}";
return str;
},
rich: {
c: {
fontSize: 18,
color: "#fff",
padding: [2, 0, 2, 0],
backgroundColor: {
image: labelimg
},
align: "center",
// verticalAlign: "bottom",
height: 25,
lineHeight: 0,
width: 25
}
}
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(199, 250, 242)"
},
{
offset: 1,
color: "rgba(76, 153, 154,0.5)"
}
],
global: false
}
}
}
}, },
{ rich: {
label: { c: {
show: true, fontSize: 18,
position: "top", color: "#fff",
formatter: function (params) { padding: [2, 0, 2, 0],
var index = params.dataIndex; backgroundColor: {
var str = "{c|}"; image: labelimg
return str;
}, },
rich: { align: "center",
c: { // verticalAlign: "bottom",
fontSize: 18, height: 25,
color: "#fff", lineHeight: 0,
padding: [-4, 0, 8, 0], width: 25
backgroundColor: { }
image: labelimg }
}, },
align: "center", itemStyle: {
// verticalAlign: "bottom", normal: {
height: 25, color: {
lineHeight: 0, type: "linear",
width: 25 x: 0,
} y: 0,
} x2: 0,
}, y2: 1,
itemStyle: { colorStops: [
normal: { {
color: { offset: 0,
type: "linear", color: "rgba(199, 250, 242)"
x: 0, },
y: 0, {
x2: 0, offset: 1,
y2: 1, color: "rgba(76, 153, 154,0.5)"
colorStops: [ }
{ ],
offset: 0, global: false
color: "rgba(199, 250, 242)"
},
{
offset: 1,
color: "rgba(76, 153, 154,0.5)"
}
],
global: false
}
}
}
},
{
label: {
show: true,
position: "top",
formatter: function (params) {
var index = params.dataIndex;
var str = "{c|}";
return str;
},
rich: {
c: {
fontSize: 18,
color: "#fff",
padding: [-4, 0, 8, 0],
backgroundColor: {
image: labelimg
},
align: "center",
// verticalAlign: "bottom",
height: 25,
lineHeight: 0,
width: 25
}
}
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(199, 250, 242)"
},
{
offset: 1,
color: "rgba(76, 153, 154,0.5)"
}
],
global: false
}
}
}
},
{
label: {
show: true,
formatter: function (params) {
var index = params.dataIndex;
var str = "{c|}";
return str;
},
position: "top",
rich: {
c: {
fontSize: 18,
color: "#fff",
padding: [-4, 0, 8, 0],
backgroundColor: {
image: labelimg
},
align: "center",
// verticalAlign: "bottom",
height: 25,
lineHeight: 0,
width: 25
}
}
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(199, 250, 242)"
},
{
offset: 1,
color: "rgba(76, 153, 154,0.5)"
}
],
global: false
}
}
} }
} }
],
stack: "a",
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"
}
]
});
function draw() {
let echartsTest = echarts.init(document.getElementById("echartsBottom"));
console.log("按分包单位分析绘图数据", option.value);
echartsTest.setOption(option.value);
}
//获取按分包单位分析数据
// let timer = null
onMounted(async () => {
await getProjectWorkerList();
draw();
});
async function getProjectWorkerList() {
let res = await getComapnyWorkTotalListApi({
projectSn: store.sn
});
let xData = [];
let yData = [];
console.log("按分包单位分析数据", res);
if (res.result) {
res.result.forEach(item => {
// 只取有数据的工种
if (item.totalPersonNum > 0) {
xData.push(item.enterpriseName);
yData.push(item.totalPersonNum);
// 计算工人总和
// max.value = max.value + item.totalPersonNum;
// projectWorkerTypeOption.push({
// value: item.totalPersonNum,
// name: item.enterpriseName
// });
} }
}); },
console.log(option.value.series[0].data, `series_old`); {
option.value.series[0].data = option.value.series[0].data.map((item, index) => { label: {
return { show: true,
...item, position: "top",
value: yData[index] formatter: function (params) {
}; var index = params.dataIndex;
}); var str = "{c|}";
option.value.xAxis.data = xData; return str;
// option.value.yAxis.data = yData; },
// 接口成功获取新值 rich: {
// optionData.value = getData(data); c: {
// 初始化option fontSize: 18,
draw(); color: "#fff",
console.log(option.value.series[0].data, `series`); padding: [-4, 0, 8, 0],
// initOption(); backgroundColor: {
} image: labelimg
// let res: any = await getComapnyWorkTotalListApi({ },
// projectSn: store.sn align: "center",
// }); // verticalAlign: "bottom",
height: 25,
lineHeight: 0,
width: 25
}
}
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(199, 250, 242)"
},
{
offset: 1,
color: "rgba(76, 153, 154,0.5)"
}
],
global: false
}
}
}
},
{
label: {
show: true,
position: "top",
formatter: function (params) {
var index = params.dataIndex;
var str = "{c|}";
return str;
},
rich: {
c: {
fontSize: 18,
color: "#fff",
padding: [-4, 0, 8, 0],
backgroundColor: {
image: labelimg
},
align: "center",
// verticalAlign: "bottom",
height: 25,
lineHeight: 0,
width: 25
}
}
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(199, 250, 242)"
},
{
offset: 1,
color: "rgba(76, 153, 154,0.5)"
}
],
global: false
}
}
}
},
{
label: {
show: true,
formatter: function (params) {
var index = params.dataIndex;
var str = "{c|}";
return str;
},
position: "top",
rich: {
c: {
fontSize: 18,
color: "#fff",
padding: [-4, 0, 8, 0],
backgroundColor: {
image: labelimg
},
align: "center",
// verticalAlign: "bottom",
height: 25,
lineHeight: 0,
width: 25
}
}
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(199, 250, 242)"
},
{
offset: 1,
color: "rgba(76, 153, 154,0.5)"
}
],
global: false
}
}
}
}
],
stack: "a",
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"
} }
]
});
function draw() {
let echartsTest = echarts.init(document.getElementById("echartsBottom"));
console.log("按分包单位分析绘图数据", option.value);
echartsTest.setOption(option.value);
}
//获取按分包单位分析数据
// let timer = null
onMounted(async () => {
await getProjectWorkerList();
draw();
});
function getNowData() {
yData.value = companyWorkTotalData.value.map((item: any) => item.presencePersonNum);
option.value.series[0].data = option.value.series[0].data.map((item, index) => {
return {
...item,
value: yData.value[index]
};
});
draw();
// option.value.xAxis.data = xData.value;
// presencePersonNum
}
function getTodayData() {
yData.value = companyWorkTotalData.value.map((item: any) => item.attendancePersonNum);
option.value.series[0].data = option.value.series[0].data.map((item, index) => {
return {
...item,
value: yData.value[index]
};
});
draw();
// option.value.xAxis.data = xData.value;
// attendancePersonNum
}
let companyWorkTotalData = ref([] as any);
let xData = ref([] as any);
let yData = ref([] as any);
async function getProjectWorkerList() {
let res = await getComapnyWorkTotalListApi({
projectSn: store.sn
});
if (res.result) {
res.result.forEach((item: any) => {
// 只取有数据的工种
if (item.totalPersonNum > 0) {
companyWorkTotalData.value.push(item);
xData.value.push(item.enterpriseName);
yData.value.push(item.totalPersonNum);
}
});
console.log("按分包单位分析数据", companyWorkTotalData.value);
// console.log(option.value.series[0].data, `series_old`);
option.value.series[0].data = option.value.series[0].data.map((item, index) => {
return {
...item,
value: yData.value[index]
};
});
option.value.xAxis.data = xData.value;
// option.value.yAxis.data = yData;
// 接口成功获取新值
// optionData.value = getData(data);
// 初始化option
draw();
console.log(option.value.series[0].data, `series`);
// initOption();
} }
}; // let res: any = await getComapnyWorkTotalListApi({
// projectSn: store.sn
// });
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

55
src/views/sevenLargeScreen/laborManagement/rightTop.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<Card title="按工种分析"> <Card title="按工种分析">
<div class="rightHeader"> <div class="rightHeader">
<!-- <div class="day Selected">实时</div> --> <!-- <div class="day Selected" @click="getNowData">实时</div> -->
<!-- <div class="year Selected">今日</div> --> <!-- <div class="year Selected" @click="getTodayData">今日</div> -->
</div> </div>
<div class="num">{{max}}</div> <div class="num">{{ max }}</div>
<div id="echartTop" style="width: 100%; height: 100%"></div> <div id="echartTop" style="width: 100%; height: 100%"></div>
</Card> </Card>
</template> </template>
@ -31,42 +31,8 @@ let data = reactive(
return b.value - a.value; return b.value - a.value;
}) })
); );
// let data = reactive(
// [
// {
// name: "塔吊司机",
// value: 1969
// },
// {
// name: "架子工",
// value: 1476
// },
// {
// name: "电焊工",
// value: 1500
// },
// {
// name: "钢筋工",
// value: 1476
// },
// {
// name: "抹灰工",
// value: 2997
// }
// ].sort(function (a, b) {
// return b.value - a.value;
// })
// );
// function array2obj(array, key) { function getData(data: any) {
// let resObj = {};
// for (let i = 0; i < array.length; i++) {
// resObj[array[i][key]] = array[i];
// }
// return resObj;
// }
function getData(data) {
let res = { let res = {
series: [], series: [],
yAxis: [] yAxis: []
@ -114,7 +80,7 @@ function getData(data) {
return res; return res;
} }
// let objData = array2obj(data, "name"); // let objData = array2obj(data, "name");
let option = ref({} as any) let option = ref({} as any);
let optionData = ref(null as any); let optionData = ref(null as any);
// 初始化option 绘制图表 // 初始化option 绘制图表
@ -123,8 +89,8 @@ function initOption() {
legend: { legend: {
show: true, show: true,
itemGap: 20, itemGap: 20,
itemWidth: 40, itemWidth: 15,
itemHeight: 10, itemHeight: 15,
icon: "rect", icon: "rect",
orient: "horizontal", orient: "horizontal",
// x: "right", // x: "right",
@ -174,8 +140,8 @@ function draw() {
// console.log('绘图数据',option.value); // console.log('绘图数据',option.value);
} }
// 存储最大值 // 存储最大值
let max = ref(0 as any) let max = ref(0 as any);
let projectWorkerTypeData = ref([] as any);
//获取工种分析数据 //获取工种分析数据
// let timer = null // let timer = null
const getProjectWorkerList = async () => { const getProjectWorkerList = async () => {
@ -190,6 +156,9 @@ const getProjectWorkerList = async () => {
if (item.workerNum > 0) { if (item.workerNum > 0) {
// 计算工人总和 // 计算工人总和
max.value = max.value + item.workerNum; max.value = max.value + item.workerNum;
// 所有数据
projectWorkerTypeData.value.push(item);
// 取
projectWorkerTypeOption.push({ projectWorkerTypeOption.push({
value: item.workerNum, value: item.workerNum,
name: item.typeName name: item.typeName