Skip to content

D
digital-construction
Commit f3b2627f authored by 张牧越's avatar 张牧越
Browse files
Options

接口联调 实名制联调完成

parent 36bd9a8d
Show whitespace changes
Inline Side-by-side
Showing with 555 additions and 334 deletions
src/api/index.js
View file @ f3b2627f
import request from "@/utils/request"
export function postAction() {
export function getBaseData() {
return request({
url: '',
url: '/api/project/basedata',
method: 'get',
})
}
// real-name
export function getRealNameStatus() {
return request({
url: '/api/personel/basedata',
method: 'get',
})
}
export function getInOutData() {
return request({
url: '/api/personel/latestweek/workinout',
method: 'get',
})
}
export function getCurrentAttendance() {
return request({
url: '/api/personel/attendance',
method: 'get',
})
}
export function getPersonAreaStatus() {
return request({
url: '/api/personel/area',
method: 'get',
})
}
export function getLastWeekAttendance() {
return request({
url: '/api/personel/latestweek/attendance',
method: 'get',
})
}
export function getLastWeekWorkType() {
return request({
url: '/api/personel/latestweek/worktype/attendance',
method: 'get',
})
}
export function getWorkTypeList() {
return request({
url: '/api/personel/worktype/statis',
method: 'get',
})
}
// early-warning
export function getAIdata() {
return request({
url: '/api/aiwarning/basedata',
method: 'get',
})
}
export function getWarningList() {
return request({
url: '/api/aiwarning/list',
method: 'get',
})
}
export function getMonthWarningStatis() {
return request({
url: '/api/aiwarning/month/statis',
method: 'get',
})
}
src/components/construction/Index.vue
View file @ f3b2627f
......@@ -8,21 +8,29 @@
<div class="divider-text">·工程名称·</div>
<div class="divider-line"></div>
</div>
<div class="construction-name">绍兴二院兰亭院区(康复医院)工程</div>
<div class="construction-name">{{ screenDetail.project_name }}</div>
<div class="construction-details">
<div class="construction-detail">
<div class="data">288520.69</div>
<div class="data">{{ screenDetail.project_cost }}</div>
<div class="text">工程造价(万元)</div>
</div>
<div class="construction-detail">
<div class="data unrecord">未录入</div>
<div class="data">{{ screenDetail.build_area }}</div>
<div class="text">建筑面积(㎡)</div>
</div>
<div class="construction-detail">
<div class="data small">
金吉祥
{{
screenDetail.manageList &&
screenDetail.manageList[0] &&
screenDetail.manageList[0].person_name
}}
<br />
15567789235
{{
screenDetail.manageList &&
screenDetail.manageList[0] &&
screenDetail.manageList[0].person_mobile
}}
</div>
<div class="text">项目经理</div>
</div>
......@@ -32,18 +40,78 @@
<div class="divider-text">·建造单位·</div>
<div class="divider-line"></div>
</div>
<div class="unit-scroll">
<div class="unit">
<div>
<div class="dot"></div>
<span class="unit-text">建设单位：</span>
</div>
<div>
<div
v-for="(unit, index) in screenDetail.unitList.jsList"
:key="index"
style="margin-bottom: 12px"
>
<div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }})
</div>
</div>
</div>
</div>
<div class="unit">
<div>
<div class="dot"></div>
<span class="unit-text">施工单位：</span>
</div>
<div>
<div
v-for="(unit, index) in screenDetail.unitList.sgList"
:key="index"
style="margin-bottom: 12px"
>
<div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }})
</div>
</div>
</div>
</div>
<div class="unit">
<div>
<div class="dot"></div>
<span class="unit-text">监理单位：</span>
</div>
<div>
<div
v-for="(unit, index) in constructionUnits"
v-for="(unit, index) in screenDetail.unitList.jlList"
:key="index"
class="unit"
style="margin-bottom: 12px"
>
<div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }})
</div>
</div>
</div>
</div>
<div class="unit">
<div>
<div class="dot"></div>
<span class="unit-text">{{ unit.unitText }}</span>
<span class="unit-text">设计单位：</span>
</div>
<div>
<div class="unit-name">{{ unit.unitName }}</div>
<div class="unit-contact">{{ unit.contact }}</div>
<div
v-for="(unit, index) in screenDetail.unitList.sjList"
:key="index"
style="margin-bottom: 12px"
>
<div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }})
</div>
</div>
</div>
</div>
</div>
</ShadowContainer>
......@@ -63,7 +131,14 @@
<img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" />
<img class="container-img" src="@/assets/swiper-pic.png" alt="" />
<img
class="container-img"
:src="
screenDetail.plane_image_arr[0] &&
screenDetail.plane_image_arr[0].url
"
alt=""
/>
</div>
</ShadowContainer>
<Title text="工程进度" type="long"></Title>
......@@ -177,6 +252,7 @@
</div>
</template>
<script>
import { getBaseData } from "@/api/index";
export default {
name: "Construction",
data() {
......@@ -188,17 +264,17 @@ export default {
contact: "金吉祥(1556783245)",
},
{
unitText: "建设单位：",
unitText: "施工单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
{
unitText: "建设单位：",
unitText: "监理单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
{
unitText: "建设单位：",
unitText: "设计单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
......@@ -256,6 +332,16 @@ export default {
counts: 1,
},
],
screenDetail: {
unitList: {
sgList: [],
jsList: [],
jlList: [],
sjList: [],
},
manageList: [],
plane_image_arr: [],
},
};
},
methods: {
......@@ -423,11 +509,19 @@ export default {
};
chart.setOption(option);
},
getBaseData() {
getBaseData().then((res) => {
console.log(res);
if (res.status == 200) {
this.screenDetail = res.data;
}
});
},
},
mounted() {
this.renderSecurityChart();
this.renderQualityChart();
this.getBaseData();
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
......@@ -517,7 +611,6 @@ export default {
line-height: 15px;
display: flex;
justify-content: flex-start;
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
......@@ -706,4 +799,8 @@ export default {
}
}
}
.unit-scroll {
max-height: 200px;
overflow: scroll;
}
</style>
\ No newline at end of file
src/components/earlywarning/Index.vue
View file @ f3b2627f
......@@ -5,18 +5,36 @@
<img src="@/assets/AIwarning/icon_d_qi@2x.png" alt="" />
</div>
<div class="status-container">
<div
class="status-count"
v-for="(status, index) in countStatus"
:key="index"
>
<img class="status-img" :src="status.img" />
<div class="status-count">
<img class="status-img" src="@/assets/AIwarning/icon_d_jiu@2x.png" />
<div class="status-detail">
<div class="status-text">AI设备总数</div>
<div class="status-number">
{{ screenDetail.aiDeviceCount }}
</div>
</div>
</div>
<div class="status-count">
<img
class="status-img"
src="@/assets/AIwarning/icon_d_si@2x(1).png"
/>
<div class="status-detail">
<div class="status-text">
{{ status.text }}
<div class="status-text">总人数</div>
<div class="status-number">
{{ screenDetail.personCount }}
</div>
</div>
</div>
<div class="status-count">
<img
class="status-img"
src="@/assets/AIwarning/icon_d_shiyi@2x.png"
/>
<div class="status-detail">
<div class="status-text">今日报警</div>
<div class="status-number">
{{ status.counts }}
{{ screenDetail.todayDeviceWarningCount }}
</div>
</div>
</div>
......@@ -46,25 +64,23 @@
src="@/assets/AIwarning/icon_d_san@2x.png"
alt=""
/>
<img
class="person-head"
src="@/assets/AIwarning/icon_d_si@2x.png"
/>
<img class="person-head" :src="warns.alarm_big_img_url" />
</div>
<div class="person-detail">
<div class="name">
<div class="name-text">{{ warns.title }}</div>
<div class="name-text">{{ warns.alarm_type_text }}</div>
<div class="work-no">
<img
class="warn-icon"
src="@/assets/AIwarning/icon_d_er@2x.png"
alt=""
/>
{{ warns.warnno }}
{{ warns.area_name }}
({{ warns.serial_no }})
</div>
</div>
<div class="status">状态：{{ warns.status }}</div>
<div class="time">时间：{{ warns.time }}</div>
<div class="status">状态：{{ warns.status_text }}</div>
<div class="time">时间：{{ warns.log_time }}</div>
</div>
</div>
</vue-seamless-scroll>
......@@ -93,83 +109,12 @@
</div>
</template>
<script>
import { getAIdata, getWarningList, getMonthWarningStatis } from "@/api/index";
export default {
name: "EarlyWarning",
data() {
return {
countStatus: [
{
img: require("@/assets/AIwarning/icon_d_jiu@2x.png"),
text: "AI设备总数",
counts: 4,
},
{
img: require("@/assets/AIwarning/icon_d_si@2x(1).png"),
text: "总人数",
counts: 1611,
},
{
img: require("@/assets/AIwarning/icon_d_shiyi@2x.png"),
text: "今日报警",
counts: 102,
},
],
warningList: [
{
title: "未佩戴安全帽报警",
warnno: "江南钢筋场(21024829562495032058)",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
title: "未佩戴安全帽报警",
warnno: "江南钢筋场(21024829562495032058)",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
title: "未佩戴安全帽报警",
warnno: "江南钢筋场(21024829562495032058)",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
title: "未佩戴安全帽报警",
warnno: "江南钢筋场(21024829562495032058)",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
title: "未佩戴安全帽报警",
warnno: "江南钢筋场(21024829562495032058)",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
title: "未佩戴安全帽报警",
warnno: "江南钢筋场(21024829562495032058)",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
title: "未佩戴安全帽报警",
warnno: "江南钢筋场(21024829562495032058)",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
title: "未佩戴安全帽报警",
warnno: "江南钢筋场(21024829562495032058)",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
title: "未佩戴安全帽报警",
warnno: "江南钢筋场(21024829562495032058)",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
],
warningList: [],
classOption: {
singleHeight: 152,
},
......@@ -177,31 +122,56 @@ export default {
{ value: 30, name: "已处理" },
{ value: 10, name: "未处理" },
],
screenDetail: {},
};
},
methods: {
renderWarningChart() {
const xAxisData = this.warningChartData.map((item) => {
return item.date;
});
const chart = this.$echarts.init(this.$refs.warningChart);
const warnTypes = this.warningChartData[0].data.map((warnType) => {
return warnType.name;
});
const seriesData = warnTypes.map((warnType) => {
const dayDataArray = [];
this.warningChartData.map((item) => {
item.data.map((dayData) => {
if (dayData.name == warnType) {
dayDataArray.push(dayData.total);
}
});
});
return {
name: warnType,
data: dayDataArray,
type: "line",
smooth: true,
};
});
const option = {
color: ["#17FDB7", "#1abcec", "#ffaf51"],
grid: {
top: 30,
top: 100,
bottom: 30,
left: 30,
right: 30,
},
legend: {
orient: "horizontal",
x: "center",
y: "top",
left: "0px",
right: "100px",
textStyle: {
fontSize: 12,
color: "rgba(225, 239, 255, 0.7)",
},
itemGap: 12,
},
xAxis: {
type: "category",
data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"],
data: xAxisData,
axisTick: { show: false },
axisLabel: {
fontSize: "12",
......@@ -220,41 +190,22 @@ export default {
color: "rgba(95, 120, 144, 0.4)",
},
},
minInterval: 1,
},
series: [
{
name: "未佩戴安全帽",
data: [2, 5, 4, 4, 7, 5, 6],
type: "line",
smooth: true,
},
{
name: "未穿反光衣",
type: "line",
data: [5, 2, 3, 4, 2, 2, 4],
smooth: true,
},
{
name: "重点区域滞留",
type: "line",
data: [0, 0, 0, 0, 0, 0, 0],
smooth: true,
},
{
name: "明火",
type: "line",
data: [0, 0, 0, 0, 0, 0, 0],
smooth: true,
},
{
name: "浓烟",
type: "line",
data: [0, 0, 0, 0, 0, 0, 0],
smooth: true,
},
],
series: seriesData,
};
chart.setOption(option);
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("today-chart"));
resizeOb.observe(document.getElementById("history-chart"));
resizeOb.observe(document.getElementById("warning-chart"));
});
},
renderTodayChart() {
const chart = this.$echarts.init(this.$refs.todayChart);
......@@ -416,23 +367,30 @@ export default {
};
chart.setOption(option);
},
getAIdata() {
getAIdata().then((res) => {
if (res.status == 200) {
this.screenDetail = res.data;
}
});
getWarningList().then((res) => {
if (res.status == 200) {
this.warningList = res.data;
}
});
getMonthWarningStatis().then((res) => {
if (res.status == 200) {
this.warningChartData = res.data;
this.renderWarningChart();
}
});
},
},
mounted() {
this.renderWarningChart();
this.getAIdata();
this.renderTodayChart();
this.renderHistoryChart();
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("today-chart"));
resizeOb.observe(document.getElementById("history-chart"));
resizeOb.observe(document.getElementById("warning-chart"));
});
},
};
</script>
......
src/components/realname/Index.vue
View file @ f3b2627f
......@@ -2,18 +2,81 @@
<div id="realname">
<div class="lt-area">
<div class="status">
<div
class="status-count"
v-for="(status, index) in countStatus"
:key="index"
>
<img class="status-img" :src="status.img" alt="" />
<div class="status-count">
<img
class="status-img"
src="@/assets/realname/icon_b_yi@2x.png"
alt=""
/>
<div class="status-detail">
<div class="status-text">总人数</div>
<div class="status-number">
{{ screenDetail.personCount }}
</div>
</div>
</div>
<div class="status-count">
<img
class="status-img"
src="@/assets/realname/icon_b_er@2x.png"
alt=""
/>
<div class="status-detail">
<div class="status-text">
{{ status.text }}
<div class="status-text">普通工人人数</div>
<div class="status-number">
{{ screenDetail.normalPersonCount }}
</div>
</div>
</div>
<div class="status-count">
<img
class="status-img"
src="@/assets/realname/icon_b_san@2x.png"
alt=""
/>
<div class="status-detail">
<div class="status-text">管理人员人数</div>
<div class="status-number">
{{ screenDetail.managePersonCount }}
</div>
</div>
</div>
<div class="status-count">
<img
class="status-img"
src="@/assets/realname/icon_b_si@2x.png"
alt=""
/>
<div class="status-detail">
<div class="status-text">新入场人员人数</div>
<div class="status-number">
{{ screenDetail.newWorkPersonCount }}
</div>
</div>
</div>
<div class="status-count">
<img
class="status-img"
src="@/assets/realname/icon_b_wu@2x.png"
alt=""
/>
<div class="status-detail">
<div class="status-text">今日考勤人数</div>
<div class="status-number">
{{ screenDetail.todayAttendancePersonCount }}
</div>
</div>
</div>
<div class="status-count">
<img
class="status-img"
src="@/assets/realname/icon_b_liu@2x.png"
alt=""
/>
<div class="status-detail">
<div class="status-text">今日在场人数</div>
<div class="status-number">
{{ status.counts }}
{{ screenDetail.workPersonCount }}
</div>
</div>
</div>
......@@ -39,15 +102,22 @@
src="@/assets/realname/portrait-rect.png"
alt=""
/>
<img class="person-head" src="@/assets/realname/portrait.png" />
<img
class="person-head"
:src="
person.face_img_url
? person.face_img_url
: require('@/assets/realname/portrait.png')
"
/>
</div>
<div class="person-detail">
<div class="name">
<div class="name-text">姓名：{{ person.name }}</div>
<div class="work-no">工号：{{ person.workno }}</div>
<div class="work-no">工号：{{ person.job_number }}</div>
</div>
<div class="status">状态：{{ person.status }}</div>
<div class="time">时间：{{ person.time }}</div>
<div class="status">状态：{{ person.in_out_status_text }}</div>
<div class="time">时间：{{ person.latest_record_time }}</div>
</div>
</div>
</vue-seamless-scroll>
......@@ -78,22 +148,32 @@
<div>
<Title text="工种分布"></Title>
<ShadowContainer>
<div class="work-types">
<div
v-for="(iType, index) in industryTypes"
:key="index"
class="i-type"
>
<div class="i-type-name">
{{ iType.text }}
{{ iType.name }}
</div>
<div class="slider">
<el-slider :value="50"></el-slider>
<el-slider
:value="
Number(
Number(
(iType.total / industryTypesTotal) * 100
).toFixed(2)
)
"
></el-slider>
</div>
<div class="i-type-count">
<span>{{ iType.count }}</span>
<span>{{ iType.total }}</span>
人
</div>
</div>
</div>
</ShadowContainer>
</div>
</div>
......@@ -101,118 +181,55 @@
</div>
</template>
<script>
import {
getRealNameStatus,
getCurrentAttendance,
getPersonAreaStatus,
getLastWeekAttendance,
getLastWeekWorkType,
getInOutData,
getWorkTypeList,
} from "@/api/index";
export default {
name: "Realname",
data() {
return {
countStatus: [
{
img: require("@/assets/realname/icon_b_yi@2x.png"),
text: "总人数",
counts: 1713,
},
{
img: require("@/assets/realname/icon_b_er@2x.png"),
text: "普通工人人数",
counts: 1611,
},
{
img: require("@/assets/realname/icon_b_san@2x.png"),
text: "管理人员人数",
counts: 102,
},
{
img: require("@/assets/realname/icon_b_si@2x.png"),
text: "新入场人员人数",
counts: 0,
},
{
img: require("@/assets/realname/icon_b_wu@2x.png"),
text: "今日考勤人数",
counts: 234,
},
{
img: require("@/assets/realname/icon_b_liu@2x.png"),
text: "今日在场人数",
counts: 158,
},
],
checkList: [
{
name: "简爱",
workno: "1289463894",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
name: "简爱",
workno: "1289463894",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
name: "简爱",
workno: "1289463894",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
name: "简爱",
workno: "1289463894",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
name: "简爱",
workno: "1289463894",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
name: "简爱",
workno: "1289463894",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
name: "简爱",
workno: "1289463894",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
{
name: "简爱",
workno: "1289463894",
status: "已进场",
time: "2023年03月19日 12:23:25",
},
],
pieChartData: [
{ value: 30, name: "绍兴市" },
{ value: 10, name: "浙江省内绍兴市外" },
{ value: 1673, name: "浙江省外" },
],
industryTypes: [
{ text: "普通人员", count: 1593 },
{ text: "管理人员", count: 1593 },
{ text: "质量员", count: 1593 },
{ text: "安全员", count: 1593 },
{ text: "钢筋工", count: 1593 },
{ text: "其他工种", count: 1593 },
],
checkList: [],
industryTypes: [],
classOption: {
singleHeight: 118,
},
screenDetail: {},
inOutData: [],
personAreaDetail: {},
lastweekAttendanceData: [],
lastweekWorkTypeData: [],
industryTypesTotal: 0,
};
},
methods: {
renderAreaChart() {
const chart = this.$echarts.init(this.$refs.areaChart);
const areaData = [
{
value: this.personAreaDetail.city_person_num,
name: this.personAreaDetail.city_name,
},
{
value: this.personAreaDetail.province_in_city_out_person_num,
name: this.personAreaDetail.province_in_city_out_name,
},
{
value: this.personAreaDetail.province_out_person_num,
name: this.personAreaDetail.province_out_name,
},
];
const option = {
title: {
x: "27%", //X坐标
y: "40%",
text: "2073",
text: this.personAreaDetail.sum_person_num,
subtext: "总人数",
textAlign: "center",
textStyle: {
......@@ -254,7 +271,7 @@ export default {
},
},
formatter: (name) => {
let data = this.pieChartData;
let data = areaData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
......@@ -280,13 +297,28 @@ export default {
position: "center",
},
data: this.pieChartData,
data: areaData,
},
],
};
chart.setOption(option);
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("area-chart"));
});
},
renderWeekCheckChart() {
const xAxisData = this.lastweekAttendanceData.map((item) => {
return item.date;
});
const checkData = this.lastweekAttendanceData.map((item) => {
return item.num;
});
const chart = this.$echarts.init(this.$refs.weekcheckChart);
const option = {
color: "#00FFF0",
......@@ -298,7 +330,7 @@ export default {
},
xAxis: {
type: "category",
data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"],
data: xAxisData,
axisTick: { show: false },
axisLabel: {
fontSize: "12",
......@@ -320,7 +352,7 @@ export default {
},
series: [
{
data: [3, 4, 4, 5, 6, 7, 5],
data: checkData,
type: "line",
symbol: "circle",
symbolSize: 12,
......@@ -328,13 +360,44 @@ export default {
],
};
chart.setOption(option);
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("week-check-chart"));
});
},
renderWeekWorkChart() {
const xAxisData = this.lastweekWorkTypeData.map((item) => {
return item.date;
});
const workTypes = this.lastweekWorkTypeData[0].data.map((workType) => {
return workType.name;
});
const seriesData = workTypes.map((workType) => {
const dayDataArray = [];
this.lastweekWorkTypeData.map((item) => {
item.data.map((dayData) => {
if (dayData.name == workType) {
dayDataArray.push(dayData.total);
}
});
});
return {
name: workType,
data: dayDataArray,
type: "line",
smooth: true,
};
});
const chart = this.$echarts.init(this.$refs.weekworkChart);
const option = {
color: ["#17FDB7", "#1abcec", "#ffaf51"],
grid: {
top: 30,
top: 80,
bottom: 30,
left: 30,
right: 30,
......@@ -350,7 +413,7 @@ export default {
},
xAxis: {
type: "category",
data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"],
data: xAxisData,
axisTick: { show: false },
axisLabel: {
fontSize: "12",
......@@ -369,31 +432,31 @@ export default {
color: "rgba(95, 120, 144, 0.4)",
},
},
minInterval: 1,
},
series: [
{
name: "保安",
data: [2, 5, 4, 4, 7, 5, 6],
type: "line",
smooth: true,
},
{
name: "普工",
type: "line",
data: [5, 2, 3, 4, 2, 2, 4],
smooth: true,
},
{
name: "管理人员",
type: "line",
data: [0, 0, 0, 0, 0, 0, 0],
smooth: true,
},
],
series: seriesData,
};
chart.setOption(option);
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("week-work-chart"));
});
},
renderInOutChart() {
const xAxisData = this.inOutData.map((item) => {
return item.date;
});
const inData = this.inOutData.map((item) => {
return item.work_in;
});
const outData = this.inOutData.map((item) => {
return item.work_out;
});
const chart = this.$echarts.init(this.$refs.inoutChart);
const option = {
color: ["#FF4544", "#2980FF"],
......@@ -414,7 +477,7 @@ export default {
},
xAxis: {
type: "category",
data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"],
data: xAxisData,
axisTick: { show: false },
axisLabel: {
fontSize: "12",
......@@ -437,7 +500,7 @@ export default {
series: [
{
name: "进场",
data: [2, 5, 4, 4, 7, 5, 6],
data: inData,
type: "line",
smooth: true,
areaStyle: {
......@@ -456,7 +519,7 @@ export default {
{
name: "离场",
type: "line",
data: [5, 2, 3, 4, 2, 2, 4],
data: outData,
smooth: true,
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
......@@ -474,13 +537,6 @@ export default {
],
};
chart.setOption(option);
},
},
mounted() {
this.renderAreaChart();
this.renderWeekCheckChart();
this.renderWeekWorkChart();
this.renderInOutChart();
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
......@@ -488,12 +544,47 @@ export default {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("area-chart"));
resizeOb.observe(document.getElementById("week-check-chart"));
resizeOb.observe(document.getElementById("week-work-chart"));
resizeOb.observe(document.getElementById("in-out-chart"));
});
},
getRealNameStatus() {
getRealNameStatus().then((res) => {
this.screenDetail = res.data;
});
getCurrentAttendance().then((res) => {
this.checkList = res.data;
});
getPersonAreaStatus().then((res) => {
this.personAreaDetail = res.data;
this.renderAreaChart();
});
getLastWeekAttendance().then((res) => {
this.lastweekAttendanceData = res.data;
this.renderWeekCheckChart();
});
getLastWeekWorkType().then((res) => {
this.lastweekWorkTypeData = res.data;
this.renderWeekWorkChart();
});
getInOutData().then((res) => {
this.inOutData = res.data;
this.renderInOutChart();
});
getWorkTypeList().then((res) => {
this.industryTypes = res.data;
this.industryTypesTotal = eval(
res.data
.map((item) => {
return item.total;
})
.join("+")
);
});
},
},
mounted() {
this.getRealNameStatus();
},
};
</script>
<style lang="less" scoped>
......@@ -670,4 +761,8 @@ export default {
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
.work-types {
max-height: 300px;
overflow-y: scroll;
}
</style>
\ No newline at end of file
vue.config.js
View file @ f3b2627f
......@@ -23,7 +23,7 @@ module.exports = defineConfig({
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
target: 'http://zezcje.natappfree.cc/pweb/s',
ws: false,
changeOrigin: true,
pathRewrite: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment