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" import request from "@/utils/request"
export function postAction() { export function getBaseData() {
return request({ 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', method: 'get',
}) })
} }
src/components/construction/Index.vue
View file @ f3b2627f
...@@ -8,21 +8,29 @@ ...@@ -8,21 +8,29 @@
<div class="divider-text">·工程名称·</div> <div class="divider-text">·工程名称·</div>
<div class="divider-line"></div> <div class="divider-line"></div>
</div> </div>
<div class="construction-name">绍兴二院兰亭院区(康复医院)工程</div> <div class="construction-name">{{ screenDetail.project_name }}</div>
<div class="construction-details"> <div class="construction-details">
<div class="construction-detail"> <div class="construction-detail">
<div class="data">288520.69</div> <div class="data">{{ screenDetail.project_cost }}</div>
<div class="text">工程造价(万元)</div> <div class="text">工程造价(万元)</div>
</div> </div>
<div class="construction-detail"> <div class="construction-detail">
<div class="data unrecord">未录入</div> <div class="data">{{ screenDetail.build_area }}</div>
<div class="text">建筑面积(㎡)</div> <div class="text">建筑面积(㎡)</div>
</div> </div>
<div class="construction-detail"> <div class="construction-detail">
<div class="data small"> <div class="data small">
金吉祥 {{
screenDetail.manageList &&
screenDetail.manageList[0] &&
screenDetail.manageList[0].person_name
}}
<br /> <br />
15567789235 {{
screenDetail.manageList &&
screenDetail.manageList[0] &&
screenDetail.manageList[0].person_mobile
}}
</div> </div>
<div class="text">项目经理</div> <div class="text">项目经理</div>
</div> </div>
...@@ -32,18 +40,78 @@ ...@@ -32,18 +40,78 @@
<div class="divider-text">·建造单位·</div> <div class="divider-text">·建造单位·</div>
<div class="divider-line"></div> <div class="divider-line"></div>
</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 <div
v-for="(unit, index) in constructionUnits" v-for="(unit, index) in screenDetail.unitList.jlList"
:key="index" :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>
<div class="dot"></div> <div class="dot"></div>
<span class="unit-text">{{ unit.unitText }}</span> <span class="unit-text">设计单位：</span>
</div> </div>
<div> <div>
<div class="unit-name">{{ unit.unitName }}</div> <div
<div class="unit-contact">{{ unit.contact }}</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>
</div> </div>
</ShadowContainer> </ShadowContainer>
...@@ -63,7 +131,14 @@ ...@@ -63,7 +131,14 @@
<img class="rt" src="@/assets/rt.png" alt="" /> <img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" /> <img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.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> </div>
</ShadowContainer> </ShadowContainer>
<Title text="工程进度" type="long"></Title> <Title text="工程进度" type="long"></Title>
...@@ -177,6 +252,7 @@ ...@@ -177,6 +252,7 @@
</div> </div>
</template> </template>
<script> <script>
import { getBaseData } from "@/api/index";
export default { export default {
name: "Construction", name: "Construction",
data() { data() {
...@@ -188,17 +264,17 @@ export default { ...@@ -188,17 +264,17 @@ export default {
contact: "金吉祥(1556783245)", contact: "金吉祥(1556783245)",
}, },
{ {
unitText: "建设单位：", unitText: "施工单位：",
unitName: "绍兴第二医院", unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)", contact: "金吉祥(1556783245)",
}, },
{ {
unitText: "建设单位：", unitText: "监理单位：",
unitName: "绍兴第二医院", unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)", contact: "金吉祥(1556783245)",
}, },
{ {
unitText: "建设单位：", unitText: "设计单位：",
unitName: "绍兴第二医院", unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)", contact: "金吉祥(1556783245)",
}, },
...@@ -256,6 +332,16 @@ export default { ...@@ -256,6 +332,16 @@ export default {
counts: 1, counts: 1,
}, },
], ],
screenDetail: {
unitList: {
sgList: [],
jsList: [],
jlList: [],
sjList: [],
},
manageList: [],
plane_image_arr: [],
},
}; };
}, },
methods: { methods: {
...@@ -423,11 +509,19 @@ export default { ...@@ -423,11 +509,19 @@ export default {
}; };
chart.setOption(option); chart.setOption(option);
}, },
getBaseData() {
getBaseData().then((res) => {
console.log(res);
if (res.status == 200) {
this.screenDetail = res.data;
}
});
},
}, },
mounted() { mounted() {
this.renderSecurityChart(); this.renderSecurityChart();
this.renderQualityChart(); this.renderQualityChart();
this.getBaseData();
this.$nextTick(() => { this.$nextTick(() => {
// 解决echarts图表放大溢出父容器 // 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => { const resizeOb = new ResizeObserver((entries) => {
...@@ -517,7 +611,6 @@ export default { ...@@ -517,7 +611,6 @@ export default {
line-height: 15px; line-height: 15px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
margin-bottom: 16px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -706,4 +799,8 @@ export default { ...@@ -706,4 +799,8 @@ export default {
} }
} }
} }
.unit-scroll {
max-height: 200px;
overflow: scroll;
}
</style> </style>
\ No newline at end of file
src/components/earlywarning/Index.vue
View file @ f3b2627f
...@@ -5,18 +5,36 @@ ...@@ -5,18 +5,36 @@
<img src="@/assets/AIwarning/icon_d_qi@2x.png" alt="" /> <img src="@/assets/AIwarning/icon_d_qi@2x.png" alt="" />
</div> </div>
<div class="status-container"> <div class="status-container">
<div <div class="status-count">
class="status-count" <img class="status-img" src="@/assets/AIwarning/icon_d_jiu@2x.png" />
v-for="(status, index) in countStatus" <div class="status-detail">
:key="index" <div class="status-text">AI设备总数</div>
> <div class="status-number">
<img class="status-img" :src="status.img" /> {{ 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-detail">
<div class="status-text"> <div class="status-text">总人数</div>
{{ status.text }} <div class="status-number">
{{ screenDetail.personCount }}
</div> </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"> <div class="status-number">
{{ status.counts }} {{ screenDetail.todayDeviceWarningCount }}
</div> </div>
</div> </div>
</div> </div>
...@@ -46,25 +64,23 @@ ...@@ -46,25 +64,23 @@
src="@/assets/AIwarning/icon_d_san@2x.png" src="@/assets/AIwarning/icon_d_san@2x.png"
alt="" alt=""
/> />
<img <img class="person-head" :src="warns.alarm_big_img_url" />
class="person-head"
src="@/assets/AIwarning/icon_d_si@2x.png"
/>
</div> </div>
<div class="person-detail"> <div class="person-detail">
<div class="name"> <div class="name">
<div class="name-text">{{ warns.title }}</div> <div class="name-text">{{ warns.alarm_type_text }}</div>
<div class="work-no"> <div class="work-no">
<img <img
class="warn-icon" class="warn-icon"
src="@/assets/AIwarning/icon_d_er@2x.png" src="@/assets/AIwarning/icon_d_er@2x.png"
alt="" alt=""
/> />
{{ warns.warnno }} {{ warns.area_name }}
({{ warns.serial_no }})
</div> </div>
</div> </div>
<div class="status">状态：{{ warns.status }}</div> <div class="status">状态：{{ warns.status_text }}</div>
<div class="time">时间：{{ warns.time }}</div> <div class="time">时间：{{ warns.log_time }}</div>
</div> </div>
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
...@@ -93,83 +109,12 @@ ...@@ -93,83 +109,12 @@
</div> </div>
</template> </template>
<script> <script>
import { getAIdata, getWarningList, getMonthWarningStatis } from "@/api/index";
export default { export default {
name: "EarlyWarning", name: "EarlyWarning",
data() { data() {
return { return {
countStatus: [ warningList: [],
{
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",
},
],
classOption: { classOption: {
singleHeight: 152, singleHeight: 152,
}, },
...@@ -177,31 +122,56 @@ export default { ...@@ -177,31 +122,56 @@ export default {
{ value: 30, name: "已处理" }, { value: 30, name: "已处理" },
{ value: 10, name: "未处理" }, { value: 10, name: "未处理" },
], ],
screenDetail: {},
}; };
}, },
methods: { methods: {
renderWarningChart() { renderWarningChart() {
const xAxisData = this.warningChartData.map((item) => {
return item.date;
});
const chart = this.$echarts.init(this.$refs.warningChart); 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 = { const option = {
color: ["#17FDB7", "#1abcec", "#ffaf51"],
grid: { grid: {
top: 30, top: 100,
bottom: 30, bottom: 30,
left: 30, left: 30,
right: 30, right: 30,
}, },
legend: { legend: {
orient: "horizontal", orient: "horizontal",
x: "center", left: "0px",
y: "top", right: "100px",
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "rgba(225, 239, 255, 0.7)", color: "rgba(225, 239, 255, 0.7)",
}, },
itemGap: 12,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"], data: xAxisData,
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -220,41 +190,22 @@ export default { ...@@ -220,41 +190,22 @@ export default {
color: "rgba(95, 120, 144, 0.4)", color: "rgba(95, 120, 144, 0.4)",
}, },
}, },
minInterval: 1,
}, },
series: [ series: seriesData,
{
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,
},
],
}; };
chart.setOption(option); 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() { renderTodayChart() {
const chart = this.$echarts.init(this.$refs.todayChart); const chart = this.$echarts.init(this.$refs.todayChart);
...@@ -416,23 +367,30 @@ export default { ...@@ -416,23 +367,30 @@ export default {
}; };
chart.setOption(option); 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() { mounted() {
this.renderWarningChart(); this.getAIdata();
this.renderTodayChart(); this.renderTodayChart();
this.renderHistoryChart(); 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> </script>
......
src/components/realname/Index.vue
View file @ f3b2627f
...@@ -2,18 +2,81 @@ ...@@ -2,18 +2,81 @@
<div id="realname"> <div id="realname">
<div class="lt-area"> <div class="lt-area">
<div class="status"> <div class="status">
<div <div class="status-count">
class="status-count" <img
v-for="(status, index) in countStatus" class="status-img"
:key="index" src="@/assets/realname/icon_b_yi@2x.png"
> alt=""
<img class="status-img" :src="status.img" 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-detail">
<div class="status-text"> <div class="status-text">普通工人人数</div>
{{ status.text }} <div class="status-number">
{{ screenDetail.normalPersonCount }}
</div>
</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"> <div class="status-number">
{{ status.counts }} {{ screenDetail.workPersonCount }}
</div> </div>
</div> </div>
</div> </div>
...@@ -39,15 +102,22 @@ ...@@ -39,15 +102,22 @@
src="@/assets/realname/portrait-rect.png" src="@/assets/realname/portrait-rect.png"
alt="" 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>
<div class="person-detail"> <div class="person-detail">
<div class="name"> <div class="name">
<div class="name-text">姓名：{{ person.name }}</div> <div class="name-text">姓名：{{ person.name }}</div>
<div class="work-no">工号：{{ person.workno }}</div> <div class="work-no">工号：{{ person.job_number }}</div>
</div> </div>
<div class="status">状态：{{ person.status }}</div> <div class="status">状态：{{ person.in_out_status_text }}</div>
<div class="time">时间：{{ person.time }}</div> <div class="time">时间：{{ person.latest_record_time }}</div>
</div> </div>
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
...@@ -78,22 +148,32 @@ ...@@ -78,22 +148,32 @@
<div> <div>
<Title text="工种分布"></Title> <Title text="工种分布"></Title>
<ShadowContainer> <ShadowContainer>
<div class="work-types">
<div <div
v-for="(iType, index) in industryTypes" v-for="(iType, index) in industryTypes"
:key="index" :key="index"
class="i-type" class="i-type"
> >
<div class="i-type-name"> <div class="i-type-name">
{{ iType.text }} {{ iType.name }}
</div> </div>
<div class="slider"> <div class="slider">
<el-slider :value="50"></el-slider> <el-slider
:value="
Number(
Number(
(iType.total / industryTypesTotal) * 100
).toFixed(2)
)
"
></el-slider>
</div> </div>
<div class="i-type-count"> <div class="i-type-count">
<span>{{ iType.count }}</span> <span>{{ iType.total }}</span>
人 人
</div> </div>
</div> </div>
</div>
</ShadowContainer> </ShadowContainer>
</div> </div>
</div> </div>
...@@ -101,118 +181,55 @@ ...@@ -101,118 +181,55 @@
</div> </div>
</template> </template>
<script> <script>
import {
getRealNameStatus,
getCurrentAttendance,
getPersonAreaStatus,
getLastWeekAttendance,
getLastWeekWorkType,
getInOutData,
getWorkTypeList,
} from "@/api/index";
export default { export default {
name: "Realname", name: "Realname",
data() { data() {
return { return {
countStatus: [ checkList: [],
{ industryTypes: [],
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 },
],
classOption: { classOption: {
singleHeight: 118, singleHeight: 118,
}, },
screenDetail: {},
inOutData: [],
personAreaDetail: {},
lastweekAttendanceData: [],
lastweekWorkTypeData: [],
industryTypesTotal: 0,
}; };
}, },
methods: { methods: {
renderAreaChart() { renderAreaChart() {
const chart = this.$echarts.init(this.$refs.areaChart); 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 = { const option = {
title: { title: {
x: "27%", //X坐标 x: "27%", //X坐标
y: "40%", y: "40%",
text: "2073", text: this.personAreaDetail.sum_person_num,
subtext: "总人数", subtext: "总人数",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
...@@ -254,7 +271,7 @@ export default { ...@@ -254,7 +271,7 @@ export default {
}, },
}, },
formatter: (name) => { formatter: (name) => {
let data = this.pieChartData; let data = areaData;
let target; let target;
for (let i = 0, l = data.length; i < l; i++) { for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) { if (data[i].name == name) {
...@@ -280,13 +297,28 @@ export default { ...@@ -280,13 +297,28 @@ export default {
position: "center", position: "center",
}, },
data: this.pieChartData, data: areaData,
}, },
], ],
}; };
chart.setOption(option); 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() { 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 chart = this.$echarts.init(this.$refs.weekcheckChart);
const option = { const option = {
color: "#00FFF0", color: "#00FFF0",
...@@ -298,7 +330,7 @@ export default { ...@@ -298,7 +330,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"], data: xAxisData,
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -320,7 +352,7 @@ export default { ...@@ -320,7 +352,7 @@ export default {
}, },
series: [ series: [
{ {
data: [3, 4, 4, 5, 6, 7, 5], data: checkData,
type: "line", type: "line",
symbol: "circle", symbol: "circle",
symbolSize: 12, symbolSize: 12,
...@@ -328,13 +360,44 @@ export default { ...@@ -328,13 +360,44 @@ export default {
], ],
}; };
chart.setOption(option); 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() { 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 chart = this.$echarts.init(this.$refs.weekworkChart);
const option = { const option = {
color: ["#17FDB7", "#1abcec", "#ffaf51"],
grid: { grid: {
top: 30, top: 80,
bottom: 30, bottom: 30,
left: 30, left: 30,
right: 30, right: 30,
...@@ -350,7 +413,7 @@ export default { ...@@ -350,7 +413,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"], data: xAxisData,
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -369,31 +432,31 @@ export default { ...@@ -369,31 +432,31 @@ export default {
color: "rgba(95, 120, 144, 0.4)", color: "rgba(95, 120, 144, 0.4)",
}, },
}, },
minInterval: 1,
}, },
series: [ series: seriesData,
{
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,
},
],
}; };
chart.setOption(option); 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() { 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 chart = this.$echarts.init(this.$refs.inoutChart);
const option = { const option = {
color: ["#FF4544", "#2980FF"], color: ["#FF4544", "#2980FF"],
...@@ -414,7 +477,7 @@ export default { ...@@ -414,7 +477,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"], data: xAxisData,
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -437,7 +500,7 @@ export default { ...@@ -437,7 +500,7 @@ export default {
series: [ series: [
{ {
name: "进场", name: "进场",
data: [2, 5, 4, 4, 7, 5, 6], data: inData,
type: "line", type: "line",
smooth: true, smooth: true,
areaStyle: { areaStyle: {
...@@ -456,7 +519,7 @@ export default { ...@@ -456,7 +519,7 @@ export default {
{ {
name: "离场", name: "离场",
type: "line", type: "line",
data: [5, 2, 3, 4, 2, 2, 4], data: outData,
smooth: true, smooth: true,
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
...@@ -474,13 +537,6 @@ export default { ...@@ -474,13 +537,6 @@ export default {
], ],
}; };
chart.setOption(option); chart.setOption(option);
},
},
mounted() {
this.renderAreaChart();
this.renderWeekCheckChart();
this.renderWeekWorkChart();
this.renderInOutChart();
this.$nextTick(() => { this.$nextTick(() => {
// 解决echarts图表放大溢出父容器 // 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => { const resizeOb = new ResizeObserver((entries) => {
...@@ -488,12 +544,47 @@ export default { ...@@ -488,12 +544,47 @@ export default {
this.$echarts.getInstanceByDom(entry.target).resize(); 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")); 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -670,4 +761,8 @@ export default { ...@@ -670,4 +761,8 @@ export default {
top: 50%; top: 50%;
transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
} }
.work-types {
max-height: 300px;
overflow-y: scroll;
}
</style> </style>
\ No newline at end of file
vue.config.js
View file @ f3b2627f
...@@ -23,7 +23,7 @@ module.exports = defineConfig({ ...@@ -23,7 +23,7 @@ module.exports = defineConfig({
port: 3000, port: 3000,
proxy: { proxy: {
'/api': { '/api': {
target: 'http://localhost:8080', target: 'http://zezcje.natappfree.cc/pweb/s',
ws: false, ws: false,
changeOrigin: true, changeOrigin: true,
pathRewrite: { 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