chengdandan
/
qiuwang
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-03-28 10:53:02 +08:00
parent 262ec2866e
commit 30dfd2c45e
10 changed files with 1799 additions and 1463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/api/api.js
View File

@ -118,3 +118,39 @@ export const getCameraHistory = (params) => {
{params}, {params},
) )
}; };
//安全检查统计
export const getCheckTotalCensus = (params) => {
return axios.get('api/ems-third-party-service/project/checkTotalCensus',
{params},
)
};
//检查次数统计
export const getCheckTimesCensus = (params) => {
return axios.get('api/ems-third-party-service/project/checkTimesCensus',
{params},
)
};
//隐患检查统计
export const getResolveTroubleCensus = (params) => {
return axios.get('api/ems-third-party-service/project/resolveTroubleCensus',
{params},
)
};
// //高频问题项
export const getMostTroubleCensus = (params) => {
return axios.get('api/ems-third-party-service/project/mostTroubleCensus',
{params},
)
};
//安全告警统计
export const getWarnSurveillance = (params) => {
return axios.get('api/ems-third-party-service/project/warnSurveillance',
{params},
)
};
//隐患整改记录
// export const getMostTroubleCensus = (params) => {
// return axios.get('api/ems-third-party-service/project/mostTroubleCensus',
// {params},
// )
// };

34
src/components/common/LineChart.vue
View File

@ -7,7 +7,7 @@
width="100%" width="100%"
height="100%" height="100%"
></Chart> ></Chart>
<div class="lineBox"></div> <!-- <div class="lineBox"></div> -->
</div> </div>
</template> </template>
<script> <script>
@ -20,10 +20,10 @@ export default {
default: '' default: ''
}, },
// 父组件传递过来的图表数据 // 父组件传递过来的图表数据
chartData: { // chartData: {
type: Array, // type: Array,
required: true // required: true
}, // },
colorArray: { colorArray: {
type: Array, type: Array,
default: () => { default: () => {
@ -52,6 +52,10 @@ export default {
yAxisPadding: { yAxisPadding: {
type: Array, type: Array,
default: null default: null
},
checkCountList:{
type:Array,
default:null
} }
}, },
@ -68,9 +72,15 @@ export default {
watch: { watch: {
// 监听父组件中的数据变化，重新触发Echarts // 监听父组件中的数据变化，重新触发Echarts
chartData: { // chartData: {
// deep: true,
// handler () {
// this.resetOption()
// }
// },
checkCountList:{
deep: true, deep: true,
handler () { handler (newVal) {
this.resetOption() this.resetOption()
} }
} }
@ -99,6 +109,12 @@ export default {
} }
}, },
option () { option () {
let dataX = [] //X轴
let dataY = [] //Y轴
this.checkCountList.forEach((item,index) => {
dataX.push(item.time)
dataY.push(item.count)
});
const self = this const self = this
return { return {
tooltip: { tooltip: {
@ -145,7 +161,7 @@ export default {
}, },
triggerEvent: true, triggerEvent: true,
type: 'category', type: 'category',
data: this.xAxisData data: dataX
}, },
yAxis: { yAxis: {
name: '次数', name: '次数',
@ -183,7 +199,7 @@ export default {
series: [ series: [
{ {
name:'检查次数', name:'检查次数',
data: this.chartData, data: dataY,
type: 'line', type: 'line',
color:'#76E679' color:'#76E679'
}, },

29
src/components/common/RankBarChart.vue
View File

@ -11,10 +11,14 @@ const MAX_LABEL = 8
export default { export default {
props: { props: {
// 父组件传递过来的图表数据 // 父组件传递过来的图表数据
chartData: { // chartData: {
// type: Array,
// required: true
// },
highIssues:{
type:Array, type:Array,
required: true default:null
}, }
}, },
components: { components: {
Chart Chart
@ -45,7 +49,13 @@ export default {
watch: { watch: {
// 监听父组件中的数据变化，重新触发Echarts // 监听父组件中的数据变化，重新触发Echarts
chartData: { // chartData: {
// deep: true,
// handler() {
// this.resetOption()
// }
// },
highIssues:{
deep: true, deep: true,
handler() { handler() {
this.resetOption() this.resetOption()
@ -55,6 +65,12 @@ export default {
computed: { computed: {
option() { option() {
let dataX= [] //名称
let dataY = [] //数量
this.highIssues.forEach((item,index) => {
dataX.push(item.name)
dataY.push(item.count)
});
const self = this const self = this
return { return {
tooltip: { tooltip: {
@ -131,14 +147,13 @@ export default {
padding: [-20, 0, 14, 0], padding: [-20, 0, 14, 0],
}, },
}, },
data:['焊接：','现场作业准备及布置：','保护接地或接零：','建筑用电：','电缆沟挖方：',], data:dataX,
triggerEvent: true, triggerEvent: true,
} }
], ],
series: [ series: [
{ {
data: this.list, data: dataY,
type: 'bar', type: 'bar',
barWidth: 16, barWidth: 16,
barGap: '-30%', barGap: '-30%',

143
src/components/common/mdScreenPie.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div style="width:100%;height:100%;"> <div style="width: 100%; height: 100%">
<div ref="chart" style="width:100%;height:100%;"></div> <div ref="chart" style="width: 100%; height: 100%"></div>
<!-- <div class="boxPeople aa"> <!-- <div class="boxPeople aa">
<div class="name" style="color: #F2DA8D;">施工工作组</div> <div class="name" style="color: #F2DA8D;">施工工作组</div>
<div class="nucm" style="color: #F9EBBD;font-weight: bold;font-size: 24px; ">33<span style=" font-size: 14px; color: #F2DA8D;">人</span></div> <div class="nucm" style="color: #F9EBBD;font-weight: bold;font-size: 24px; ">33<span style=" font-size: 14px; color: #F2DA8D;">人</span></div>
@ -20,135 +20,143 @@
</div> </div>
</template> </template>
<script> <script>
import { List } from 'echarts/lib/export' import { List } from "echarts/lib/export";
import giftImageUrl from '../../assets/pic/circle.png' import giftImageUrl from "../../assets/pic/circle.png";
export default { export default {
props: { props: {
picIsShow: { picIsShow: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
colorList: { colorList: {
type: Array, type: Array,
default() { default() {
return ['#00A572', '#008AA4', '#7968D9', '#C7A73E'] return ["#00A572", "#008AA4", "#7968D9", "#C7A73E", "rgb(28,241,235)"];
} },
}, },
projectUser: { projectUser: {
type: Array, type: Array,
default: [] default: [],
} },
}, },
components: { components: {},
},
data() { data() {
return {} return {};
},
mounted() {
}, },
mounted() {},
watch: { watch: {
// 监听父组件中的数据变化，重新触发Echarts // 监听父组件中的数据变化，重新触发Echarts
chartData: { chartData: {
deep: true, deep: true,
handler() { handler() {
this.resetOption() this.resetOption();
} },
}, },
projectUser: { projectUser: {
deep: true, deep: true,
handler(newVal) { handler(newVal) {
this.initCharts(newVal) this.initCharts(newVal);
} },
} },
}, },
methods: { methods: {
initCharts(value) { initCharts(value) {
let myChart = this.$echarts.init(this.$refs.chart) let myChart = this.$echarts.init(this.$refs.chart);
var val1data2 = [{ var val1data2 = [
{
value: 33, value: 33,
name: '电工', name: "电工",
}, },
{ {
value: 13, value: 13,
name: '项目监理组', name: "项目监理组",
}, },
{ {
value: 14, value: 14,
name: '土建专工', name: "土建专工",
}, },
{ {
value: 43, value: 43,
name: '架子工', name: "架子工",
} },
] ];
val1data2 = Object.keys(value).map((item, index) => { val1data2 = Object.keys(value).map((item, index) => {
return {name:value[item].groupName,value:value[item].number} return { name: value[item].groupName, value: value[item].number };
}) });
var arr = ['middleLost', 0.6, val1data2, '今日完成进度'] var arr = ["middleLost", 0.6, val1data2, "今日完成进度"];
// 绘制图表 // 绘制图表
myChart.setOption({ myChart.setOption({
backgroundColor: "rgba(255,255,255,0)",
tooltip: { tooltip: {
trigger:'item', trigger: "item",
formatter: '{b}：{c}', formatter: "{b}：{c}",
}, },
graphic: { graphic: {
elements: [{ elements: [
type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, {
type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
style: { style: {
image: this.picIsShow ? giftImageUrl : '', //这里添加图片地址 image: this.picIsShow ? giftImageUrl : "", //这里添加图片地址
width: 120, width: 120,
height: 120 height: 120,
}, },
left: '161',// left: "161", //
top: '97' //配置图片居中 top: "97", //配置图片居中
}] },
],
}, },
series: [ series: [
{ {
type: 'pie', type: "pie",
radius: this.picIsShow ? ['53%', '65%'] : ['60%', '60%'], radius: this.picIsShow ? ["53%", "65%"] : ["60%", "60%"],
center: ['50%', '157'], center: ["50%", "157"],
color: this.colorList, color: this.colorList,
hoverAnimation: true, /// /设置饼图默认的展开样式 hoverAnimation: true, /// /设置饼图默认的展开样式
label: { label: {
show: true, show: true,
formatter: '{b}：{c}', formatter: "{b|{b}}{c|{c}}人",
rich: { rich: {
d: { b: {
color: '#fff', fontSize: 15,
fontSize: 25, lineHeight: 33,
// lineHeight: 24,
height: 24,
}, },
c: { c: {
color: "red",
fontSize: 25, fontSize: 25,
// lineHeight: 20, lineHeight: 22,
align: 'left', align: "center",
} opacity: 0.1
}, },
position: '', },
textStyle: {
fontSize: 15,
},
position: "",
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
}
}, },
itemStyle: { // 此配置 },
normal: { // itemStyle: { // 此配置
// normal: {
// borderWidth: 2,
// borderColor: 'rgba(255,255,255,0.7)'
// }
// },
itemStyle: {
borderRadius: 2,
borderColor: "rgb(255,255,255)",
borderWidth: 2, borderWidth: 2,
borderColor: '#fff'
}
}, },
data: arr[2] data: arr[2],
} },
] ],
}) });
} },
} },
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -177,13 +185,10 @@
.nucm { .nucm {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }
.name { .name {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
} }
</style> </style>

22
src/components/common/pieChart.vue
View File

@ -105,8 +105,8 @@ export default {
hoverAnimation: true, /// /设置饼图默认的展开样式 hoverAnimation: true, /// /设置饼图默认的展开样式
label: { label: {
show: true, show: true,
formatter: '{b}：{c}%', formatter: '{b|{b}}:{c|{c}}%',
padding:[0,10,0,50], padding:[0,0,0,0],
itemStyle: { // 此配置 itemStyle: { // 此配置
normal: { normal: {
borderWidth: 2, borderWidth: 2,
@ -114,18 +114,16 @@ export default {
} }
}, },
rich: { rich: {
d: { b: {
color: '#fff', fontSize: 15,
fontSize: 20, lineHeight: 33,
lineHeight: 24,
height: 24
}, },
c: { c: {
color: "red", fontSize: 18,
fontSize: 20, lineHeight: 22,
lineHeight: 20, align: "center",
align: 'left', opacity: 0.1
} },
}, },
position: '', position: '',
}, },

18
src/components/common/pieChartUnImg.vue
View File

@ -92,19 +92,17 @@ export default {
borderColor: "#52FFC1", borderColor: "#52FFC1",
}, },
}, },
formatter: "{b}{c}%", formatter: "{b|{b}}{c|{c}}%",
rich: { rich: {
d: { b: {
color: "#fff", fontSize: 15,
fontSize: 20, lineHeight: 33,
lineHeight: 24,
height: 24,
}, },
c: { c: {
color: "red", fontSize: 18,
fontSize: 20, lineHeight: 22,
lineHeight: 20, align: "center",
align: "left", opacity: 0.1
}, },
}, },
position: "", position: "",

300
src/components/common/threeBarChart.vue
View File

@ -1,260 +1,348 @@
<template> <template>
<div style="position: relative"> <div style="position: relative">
<Chart ref="chart" :chartOption="option" :className="className" width="100%" height="100%" <Chart
ref="chart"
:chartOption="option"
:className="className"
width="100%"
height="100%"
></Chart> ></Chart>
<div class="lineBox"></div> <!-- <div class="lineBox"></div> -->
</div> </div>
</template> </template>
<script> <script>
import Chart from '../chart.vue' import Chart from "../chart.vue";
const MAX_LABEL = 8 const MAX_LABEL = 8;
export default { export default {
props: { props: {
className: { className: {
type: String, type: String,
default: '' default: "",
}, },
// 父组件传递过来的图表数据 // 父组件传递过来的图表数据
chartData: { chartData: {
type: Array, type: Array,
required: true required: true,
}, },
chartData2: { chartData2: {
type: Array, type: Array,
required: true required: true,
}, },
chartData3: { chartData3: {
type: Array, type: Array,
required: true required: true,
}, },
colorArray: { colorArray: {
type: Array, type: Array,
default: () => { default: () => {
return ['#84F5DE', '#56E8F2', '#4CC5F8'] return ["#84F5DE", "#56E8F2", "#4CC5F8"];
} },
}, },
yAxisName: { yAxisName: {
type: String, type: String,
default: '' default: "",
}, },
// x轴数据 // x轴数据
xAxisData: { xAxisData: {
type: Array, type: Array,
default: () => { default: () => {
return [] return [];
} },
}, },
tooltipFormatter: { tooltipFormatter: {
type: Function | String, type: Function | String,
default: null default: null,
}, },
yAxisPosition: { yAxisPosition: {
type: String, type: String,
default: 'left' default: "left",
}, },
yAxisPadding: { yAxisPadding: {
type: Array, type: Array,
default: null default: null,
} },
safeList: {
type: Array,
default: null,
},
}, },
components: { components: {
Chart Chart,
}, },
data() { data() {
return { return {
tipStyle: { visibility: 'hidden', position: 'absolute', top: 0, left: 0 }, tipStyle: { visibility: "hidden", position: "absolute", top: 0, left: 0 },
tipContent: '' tipContent: "",
} };
}, },
watch: { watch: {
// 监听父组件中的数据变化，重新触发Echarts // 监听父组件中的数据变化，重新触发Echarts
chartData: { // chartData: {
// deep: true,
// handler() {
// this.resetOption()
// }
// },
safeList: {
deep: true, deep: true,
handler() { handler() {
this.resetOption() this.resetOption();
} },
} },
}, },
computed: { computed: {
option() { option() {
const self = this let dataX = [];
let equipment = []; //设备告警
let fire = []; //消防告警
let gas = []; //耗气告警
let power = []; // 用电告警
let water = []; //给水告警
this.safeList.forEach((item, index) => {
dataX.push(item.time);
equipment.push(item.equipment);
fire.push(item.fire);
gas.push(item.gas);
power.push(item.power);
water.push(item.water);
});
const self = this;
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
type: "shadow", type: "shadow",
label: { label: {
show: false show: false,
} },
} },
}, },
title: { title: {
textStyle: { textStyle: {
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: "bold",
color: '#1EBBFC' color: "#1EBBFC",
}
}, },
legend: { //对图形的解释部分 },
left: '97', legend: {
//对图形的解释部分
left: "97",
y: 63, y: 63,
itemHeight: 12, itemHeight: 12,
data: ['人员安全', '环境安全','设备安全'], data: ["用电告警", "消防告警", "给水告警", "设备告警", "耗气告警"],
textStyle: { textStyle: {
fontSize: 12, //字体大小 fontSize: 12, //字体大小
color: ['#66D19B','#ECBF00','#00C1F0'], //字体颜色 color: [
} "#66D19B",
"#ECBF00",
"#00C1F0",
"rgb(236,218,75)",
"rgb(190,109,254)",
], //字体颜色
},
}, },
grid: { grid: {
left: '26', left: "26",
right: '26', right: "26",
bottom: '33', bottom: "33",
top:'103', top: "103",
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
axisLine: { axisLine: {
// x轴线的颜色以及宽度 // x轴线的颜色以及宽度
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff', color: "#fff",
height: 0 height: 0,
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
interval: 0, // 横轴信息全部显示 interval: 0, // 横轴信息全部显示
margin: 6, // 刻度标签与轴线之间的距离 margin: 10, // 刻度标签与轴线之间的距离
align: 'center', align: "center",
fontSize: 13, // 横轴字体大小 fontSize: 13, // 横轴字体大小
color: '#bde9e4', // 颜色 color: "#bde9e4", // 颜色
}, },
triggerEvent: true, // triggerEvent: true,
type: 'category', type: "category",
data: this.xAxisData data: dataX,
}, },
yAxis: { yAxis: {
name: ['次数'], name: ["次数"],
type: 'value', type: "value",
position: this.yAxisPosition || null, position: this.yAxisPosition || null,
nameTextStyle: { nameTextStyle: {
color: '#64D5CD', color: "#64D5CD",
padding: this.yAxisPadding || [0, 28, 2, 0], padding: this.yAxisPadding || [0, 28, 2, 0],
fontSize: 12, fontSize: 12,
opacity: 0.5 opacity: 0.5,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'white' color: "white",
} },
}, },
splitLine: { splitLine: {
// 分割线配置 // 分割线配置
show: false, show: false,
lineStyle: { lineStyle: {
color: '#078DF0', color: "#078DF0",
opacity: 0.3 opacity: 0.3,
} },
}, },
axisLabel: { axisLabel: {
color: '#bde9e4', color: "#bde9e4",
fontSize: 14, fontSize: 14,
opacity: 0.5 opacity: 0.5,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
}, },
series: [ series: [
{ {
name: '人员安全', name: "用电告警",
data: this.chartData, data: power,
type: 'bar', type: "bar",
barWidth: 12, barWidth: 12,
itemStyle: { itemStyle: {
normal: { normal: {
color: { color: {
type: 'bar', type: "bar",
colorStops: [{ colorStops: [
{
offset: 0, offset: 0,
color: '#6FD8A5' // 0% 处的颜色 color: "#6FD8A5", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#3CB06C' // 100% 处的颜色 color: "#3CB06C", // 100% 处的颜色
}], },
],
globalCoord: false, // 缺省为 false globalCoord: false, // 缺省为 false
},
}
}, },
}, },
}, },
{ {
name: '环境安全', name: "消防告警",
data: this.chartData2, data: fire,
type: 'bar', type: "bar",
barWidth: 12, barWidth: 12,
itemStyle: { itemStyle: {
normal: { normal: {
color: { color: {
type: 'bar', type: "bar",
colorStops: [{ colorStops: [
{
offset: 0, offset: 0,
color: '#EFC500' // 0% 处的颜色 color: "#EFC500", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#DA9300' // 100% 处的颜色 color: "#DA9300", // 100% 处的颜色
}], },
],
globalCoord: false, // 缺省为 false globalCoord: false, // 缺省为 false
},
}
}, },
}, },
}, },
{ {
name: '设备安全', name: "给水告警",
data: this.chartData3, data: water,
type: 'bar', type: "bar",
barWidth: 12, barWidth: 12,
itemStyle: { itemStyle: {
normal: { normal: {
color: { color: {
type: 'bar', type: "bar",
colorStops: [{ colorStops: [
{
offset: 0, offset: 0,
color: '#00C4F1' // 0% 处的颜色 color: "#00C4F1", // 0% 处的颜色
}, { },
{
offset: 1, offset: 1,
color: '#0091DF' // 100% 处的颜色 color: "#0091DF", // 100% 处的颜色
}], },
],
globalCoord: false, // 缺省为 false globalCoord: false, // 缺省为 false
}
}, },
}, },
} },
] },
} {
} name: "设备告警",
data: equipment,
type: "bar",
barWidth: 12,
itemStyle: {
normal: {
color: {
type: "bar",
colorStops: [
{
offset: 0,
color: "rgb(236,218,75)", // 0% 处的颜色
},
{
offset: 1,
color: "rgb(236,218,75)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
},
{
name: "耗气告警",
data: gas,
type: "bar",
barWidth: 12,
itemStyle: {
normal: {
color: {
type: "bar",
colorStops: [
{
offset: 0,
color: "rgb(190,109,254)", // 0% 处的颜色
},
{
offset: 1,
color: "rgb(190,109,254)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
},
],
};
},
}, },
methods: { methods: {
resetOption() { resetOption() {
this.$refs.chart.setOption(this.option) this.$refs.chart.setOption(this.option);
}, },
},
} };
}
</script> </script>
<style scoped> <style scoped>
.lineBox { .lineBox {
height: 14px; height: 14px;
position: absolute; position: absolute;

2
src/utils/mqttConfig.js
View File

@ -34,7 +34,7 @@ class mqttHandle {
//配置链接 //配置链接
const { host, port, endpoint, ...options } = this.connect; const { host, port, endpoint, ...options } = this.connect;
console.log("this.connect.host",this.connect.host) console.log("this.connect.host",this.connect.host)
const connectUrl = 'ws://172.16.1.51:7788/'; const connectUrl = 'ws://175.27.191.156:10083/mgtt';
// const connectUrl = `ws://${this.connect.host}:${this.connect.port}`; // const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
// if (!client.connected) { // if (!client.connected) {
// client.on('connect', function () { // client.on('connect', function () {

458
src/views/managementComponents.vue
View File

@ -17,9 +17,16 @@
</div> </div>
</div> </div>
</div> --> </div> -->
<div @click="disBox" class="screenBox" <div
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}"> @click="disBox"
</div> class="screenBox"
:style="{
'background-image': !boxNone
? `url(${require(`../assets/pic/exitFull.png`)}`
: `url(${require(`../assets/pic/fullScreen.png`)}`,
right: boxNone ? '483px' : '10px',
}"
></div>
<!-- 左侧模块1 --> <!-- 左侧模块1 -->
<div class="leftOneBox" :style="{ left: boxNone ? '27px' : '-444px' }"> <div class="leftOneBox" :style="{ left: boxNone ? '27px' : '-444px' }">
<div class="titName"> <div class="titName">
@ -30,27 +37,36 @@
<div class="concet"> <div class="concet">
<div class="ftahBox"> <div class="ftahBox">
<span class="iconBox1"></span> <span class="iconBox1"></span>
<span>检查项</span> <div class="ftahBox1">
<span style="color:#1cd1ff">100</span> <div>检查项</div>
<span>项</span> <div style="color: #1cd1ff">{{ checkNum }}</div>
<div>项</div>
</div> </div>
<div class="ftahBox" style="margin-left: 25px;"> </div>
<div class="ftahBox" style="margin-left: 25px">
<span class="iconBox2"></span> <span class="iconBox2"></span>
<span>问题项</span> <div class="ftahBox1">
<span style="color:#ffb54f">50</span> <div>问题项</div>
<span>项</span> <div style="color: #ffb54f">{{ questionNum }}</div>
<div>项</div>
</div> </div>
<div class="ftahBox" style="margin-left: 17px;"> </div>
<div class="ftahBox" style="margin-left: 17px">
<span class="iconBox3"></span> <span class="iconBox3"></span>
<span>已处理</span>
<span style="color:#00d896">13</span> <div class="ftahBox1">
<span>项</span> <div>已处理</div>
<div style="color: #00d896">{{ resolvedNum }}</div>
<div>项</div>
</div> </div>
<div class="ftahBox" style="margin-left: 4px;"> </div>
<div class="ftahBox" style="margin-left: 4px">
<span class="iconBox4"></span> <span class="iconBox4"></span>
<span>待处理</span> <div class="ftahBox1">
<span style="color:#ecda4b">32</span> <div>待处理</div>
<span>项</span> <div style="color: #ecda4b">{{ unresolvedNum }}</div>
<div>项</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -62,14 +78,35 @@
<span></span> <span></span>
</div> </div>
<div class="seleChange"> <div class="seleChange">
<div :class="[timeType === 1 ? 'timeBoxType2' : 'timeBoxType1']" @click="chooseType(1)">年</div> <div
<div :class="[timeType === 2 ? 'timeBoxType2' : 'timeBoxType1']" @click="chooseType(2)">月</div> :class="[timeType === 1 ? 'timeBoxType2' : 'timeBoxType1']"
<div :class="[timeType === 3 ? 'timeBoxType2' : 'timeBoxType1']" @click="chooseType(3)">日</div> @click="chooseType(0)"
>
年
</div>
<div
:class="[timeType === 2 ? 'timeBoxType2' : 'timeBoxType1']"
@click="chooseType(1)"
>
月
</div>
<div
:class="[timeType === 3 ? 'timeBoxType2' : 'timeBoxType1']"
@click="chooseType(2)"
>
日
</div>
</div> </div>
<div class="pie2Box"> <div class="pie2Box">
<lineChart ref="lineRef" style="width: 100%; height: 100%" grid-bottom="1%" <lineChart
:color-array="['#021C9F', '#01B1FF']" :chart-data="qyList" ref="lineRef"
:x-axis-data="qyList.map(item => item.name)" /> style="width: 100%; height: 100%"
grid-bottom="1%"
:color-array="['#021C9F', '#01B1FF']"
:chart-data="qyList"
:x-axis-data="qyList.map((item) => item.name)"
:checkCountList="checkCountList"
/>
</div> </div>
</div> </div>
<!-- 左侧模块3 --> <!-- 左侧模块3 -->
@ -80,15 +117,36 @@
<span></span> <span></span>
</div> </div>
<div class="seleChange"> <div class="seleChange">
<div :class="[time2Type === 1 ? 'timeBoxType2' : 'timeBoxType1']" @click="choose2Type(1)">年</div> <div
<div :class="[time2Type === 2 ? 'timeBoxType2' : 'timeBoxType1']" @click="choose2Type(2)">月</div> :class="[time2Type === 1 ? 'timeBoxType2' : 'timeBoxType1']"
<div :class="[time2Type === 3 ? 'timeBoxType2' : 'timeBoxType1']" @click="choose2Type(3)">日</div> @click="choose2Type(0)"
</div>2 >
年
</div>
<div
:class="[time2Type === 2 ? 'timeBoxType2' : 'timeBoxType1']"
@click="choose2Type(1)"
>
月
</div>
<div
:class="[time2Type === 3 ? 'timeBoxType2' : 'timeBoxType1']"
@click="choose2Type(2)"
>
日
</div>
</div>
<div class="pieBox"> <div class="pieBox">
<threeBarChart style="width: 100%; height: 100%" grid-bottom="1%" :color-array="['#021C9F', '#01B1FF']" <threeBarChart
:chart-data3="aq3List" :chart-data2="aq2List" :chart-data="aqList" style="width: 100%; height: 100%"
:x-axis-data="aqList.map(item => item.name)" /> grid-bottom="1%"
:color-array="['#021C9F', '#01B1FF']"
:chart-data3="aq3List"
:chart-data2="aq2List"
:chart-data="aqList"
:x-axis-data="aqList.map((item) => item.name)"
:safeList="safeList"
/>
</div> </div>
</div> </div>
<!-- 右侧模块1 --> <!-- 右侧模块1 -->
@ -98,26 +156,31 @@
<span>隐患检查统计</span> <span>隐患检查统计</span>
<span></span> <span></span>
</div> </div>
<div class="concet" style="left: 48px;"> <div class="concet" style="left: 48px">
<div class="ftahBox"> <div class="ftahBox">
<span class="iconBox1"></span> <span class="iconBox1"></span>
<span>整改项</span> <div class="ftahBox1">
<span style="color:#1cd1ff">100</span> <div>整改项</div>
<span>项</span> <div style="color: #1cd1ff">{{ total }}</div>
<div>项</div>
</div> </div>
<div class="ftahBox" style="margin-left: 53px;"> </div>
<div class="ftahBox" style="margin-left: 53px">
<span class="iconBox2"></span> <span class="iconBox2"></span>
<span>已处理 </span> <div class="ftahBox1">
<span style="color:#00D896">35</span> <div>已处理</div>
<span>项</span> <div style="color: #00d896">{{ resolve }}</div>
<div>项</div>
</div> </div>
<div class="ftahBox" style="margin-left: 43px;"> </div>
<div class="ftahBox" style="margin-left: 43px">
<span class="iconBox3"></span> <span class="iconBox3"></span>
<span>待处理</span> <div class="ftahBox1">
<span style="color:#FDE54A">15</span> <div>待处理</div>
<span>项</span> <div style="color: #fde54a">{{ unresolve }}</div>
<div>项</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 右侧模块2 --> <!-- 右侧模块2 -->
@ -128,7 +191,11 @@
<span></span> <span></span>
</div> </div>
<div class="pie3Box"> <div class="pie3Box">
<RankBarChart style="width: 100%; height: 100%" :color-array="['#021C9F', '#01B1FF']" /> <RankBarChart
style="width: 100%; height: 100%"
:color-array="['#021C9F', '#01B1FF']"
:highIssues="highIssues"
/>
</div> </div>
</div> </div>
<!-- 右侧模块3 --> <!-- 右侧模块3 -->
@ -180,10 +247,17 @@ import threeBarChart from "@/components/common/threeBarChart";
import lineChart from "@/components/common/lineChart"; import lineChart from "@/components/common/lineChart";
import pieChart from "@/components/common/pieChart"; import pieChart from "@/components/common/pieChart";
import pieDateChart from "@/components/common/pieDateChart"; import pieDateChart from "@/components/common/pieDateChart";
import Resize from '../utils/Resize.vue' import Resize from "../utils/Resize.vue";
import tabGtt from '@/components/common/tableGantt' import tabGtt from "@/components/common/tableGantt";
import RankBarChart from '@/components/common/RankBarChart' import RankBarChart from "@/components/common/RankBarChart";
import swiper from './swiper.vue' import swiper from "./swiper.vue";
import {
getCheckTotalCensus,
getCheckTimesCensus,
getResolveTroubleCensus,
getWarnSurveillance,
getMostTroubleCensus
} from "../api/api";
export default { export default {
name: "report", name: "report",
components: { components: {
@ -194,240 +268,255 @@ export default {
threeBarChart, threeBarChart,
RankBarChart, RankBarChart,
tabGtt, tabGtt,
swiper swiper,
}, },
data() { data() {
return { return {
highIssues:[], //高频问题项
safeList:[], //安全告警
resolve:0,//已处理
total: 0, //整改项
unresolve:0, //待处理
checkCountList: [], //检查次数统计
checkNum: 0, //检查项
questionNum: 0, //问题项
resolvedNum: 0, //已处理
unresolvedNum: 0, //待处理
dialogShow: false, dialogShow: false,
timeType: 1, timeType: 1,
time2Type: 1, time2Type: 1,
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'], colorList: ["#00A572", "#007EC1", "#DA9300", "#878787"],
iconPicList: [ iconPicList: [
{ {
icon: "wendu", icon: "wendu",
name: "温度", name: "温度",
val: "19.8", val: "19.8",
tem: "℃" tem: "℃",
}, },
{ {
icon: "shidu", icon: "shidu",
name: "湿度", name: "湿度",
val: "19.8", val: "19.8",
tem: "%" tem: "%",
}, },
{ {
icon: "yangqi", icon: "yangqi",
name: "氧气值", name: "氧气值",
val: "19.8", val: "19.8",
tem: "%VOL" tem: "%VOL",
}, },
{ {
icon: "co2", icon: "co2",
name: "二氧化碳", name: "二氧化碳",
val: "19.8", val: "19.8",
tem: "%VOL" tem: "%VOL",
}, },
{ {
icon: "ch4", icon: "ch4",
name: "甲烷", name: "甲烷",
val: "19.8", val: "19.8",
tem: "ppm" tem: "ppm",
}, },
{ {
icon: "h2s", icon: "h2s",
name: "硫化氢", name: "硫化氢",
val: "19.8", val: "19.8",
tem: "ppm" tem: "ppm",
} },
], ],
tableData: [ tableData: [
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
} },
], ],
aq3List: [ aq3List: [
{ {
name: "2月", name: "2月",
value: 1 value: 1,
}, },
{ {
name: "3月", name: "3月",
value: 2 value: 2,
}, },
{ {
name: "4月", name: "4月",
value: 13 value: 13,
}, },
{ {
name: "5月", name: "5月",
value: 24 value: 24,
}, },
{ {
name: "6月", name: "6月",
value: 24 value: 24,
}, },
{ {
name: "7月", name: "7月",
value: 31 value: 31,
}, },
], ],
aq2List: [ aq2List: [
{ {
name: "2月", name: "2月",
value: 10 value: 10,
}, },
{ {
name: "3月", name: "3月",
value: 6 value: 6,
}, },
{ {
name: "4月", name: "4月",
value: 3 value: 3,
}, },
{ {
name: "5月", name: "5月",
value: 14 value: 14,
}, },
{ {
name: "6月", name: "6月",
value: 4 value: 4,
}, },
{ {
name: "7月", name: "7月",
value: 3 value: 3,
}, },
], ],
aqList: [ aqList: [
{ {
name: "2月", name: "2月",
value: 12, value: 12,
value2: 10 value2: 10,
}, },
{ {
name: "3月", name: "3月",
value: 13, value: 13,
value2: 6 value2: 6,
}, },
{ {
name: "4月", name: "4月",
value: 12, value: 12,
value2: 3 value2: 3,
}, },
{ {
name: "5月", name: "5月",
value: 10, value: 10,
value2: 14 value2: 14,
}, },
{ {
name: "6月", name: "6月",
value: 7, value: 7,
value2: 4 value2: 4,
}, },
{ {
name: "7月", name: "7月",
value: 11, value: 11,
value2: 3 value2: 3,
}, },
], ],
qyList: [ qyList: [
{ {
name: "1月", name: "1月",
value: 12 value: 12,
}, },
{ {
name: "2月", name: "2月",
value: 112 value: 112,
}, },
{ {
name: "3月", name: "3月",
value: 132 value: 132,
}, },
{ {
name: "4月", name: "4月",
value: 12 value: 12,
}, },
{ {
name: "5月", name: "5月",
value: 132 value: 132,
}, },
{ {
name: "6月", name: "6月",
value: 132 value: 132,
}, },
{ {
name: "7月", name: "7月",
value: 132 value: 132,
}, { },
{
name: "8月", name: "8月",
value: 32 value: 32,
}, { },
{
name: "9月", name: "9月",
value: 22 value: 22,
}, { },
{
name: "10月", name: "10月",
value: 152 value: 152,
}, { },
{
name: "11月", name: "11月",
value: 132 value: 132,
}, { },
{
name: "12月", name: "12月",
value: 132 value: 132,
} },
], ],
xArry: [], xArry: [],
chartData: [], chartData: [],
peopleList: [ peopleList: [
{ {
name: "姓名", name: "姓名",
value: "：王刚" value: "：王刚",
}, },
{ {
name: "岗位", name: "岗位",
value: "：项目经理" value: "：项目经理",
}, },
{ {
name: "体温", name: "体温",
value: "：36.5℃" value: "：36.5℃",
}, },
{ {
name: "入场时间", name: "入场时间",
value: "：2022-11-26" value: "：2022-11-26",
}, },
{ {
name: "考勤类型", name: "考勤类型",
value: "：进场" value: "：进场",
}, },
{ {
name: "打卡设备", name: "打卡设备",
value: "：1号打卡机" value: "：1号打卡机",
}, },
], ],
vdaH: 0, vdaH: 0,
type: false, type: false,
menuType: 4, menuType: 4,
numberList: [5, 5], numberList: [5, 5],
boxNone: true boxNone: true,
}; };
}, },
created() { created() {
@ -435,30 +524,71 @@ export default {
this.vdaH = h - 0 + "px"; this.vdaH = h - 0 + "px";
}, },
methods: { methods: {
//获取数据
getData() {
let projectId = sessionStorage.getItem("projectId");
//获取安全检查统计
getCheckTotalCensus({
projectId: projectId,
}).then((res) => {
this.checkNum = res.data.data.checkNum; //检查项
this.questionNum = res.data.data.questionNum; //问题项
this.resolvedNum = res.data.data.resolvedNum; //已处理
this.unresolvedNum = res.data.data.unresolvedNum; //待处理
});
//隐患检查统计
getResolveTroubleCensus({
projectId: projectId,
}).then((res) => {
this.resolve = res.data.data.resolve;
this.total = res.data.data.total;
this.unresolve = res.data.data.unresolve;
});
//高频问题项
getMostTroubleCensus({
projectId: projectId,
}).then((res)=>{
this.highIssues = res.data.data
}).catch((err)=>{
console.log(err);
})
},
disBox() { disBox() {
this.boxNone = !this.boxNone this.boxNone = !this.boxNone;
this.$refs.screenBox.style.animationPlayState='running' this.$refs.screenBox.style.animationPlayState = "running";
}, },
goBack(val) { goBack(val) {
if (val === 1) { if (val === 1) {
this.$router.push('/') this.$router.push("/");
} else { } else {
this.$router.go(0) this.$router.go(0);
} }
}, },
chooseType(val) { chooseType(val) {
this.timeType = val this.timeType = val + 1;
this.$refs.lineRef.resetOption() //检查次数统计
getCheckTimesCensus({
projectId: sessionStorage.getItem("projectId"),
type: val,
}).then((res) => {
this.checkCountList = res.data.data;
this.$refs.lineRef.resetOption();
});
}, },
choose2Type(val) { choose2Type(val) {
this.time2Type = val this.time2Type = val + 1;
this.$refs.lineRef.resetOption() getWarnSurveillance({
projectId: sessionStorage.getItem("projectId"),
type: val,
}).then((res)=>{
// this.$refs.lineRef.resetOption();
this.safeList = res.data.data
})
}, },
//查看甘特图 //查看甘特图
gantDialog() { gantDialog() {
this.dialogShow = true this.dialogShow = true;
}, },
tableRowClassName({ row, rowIndex }) { tableRowClassName({ row, rowIndex }) {
if (rowIndex === 1) { if (rowIndex === 1) {
@ -472,37 +602,42 @@ export default {
childBoxClick(val) { childBoxClick(val) {
this.menuType = val; this.menuType = val;
if (val === 3) { if (val === 3) {
this.$router.push('/progress') this.$router.push("/progress");
} else if (val === 2) { } else if (val === 2) {
this.$router.push('/videoSurveillance') this.$router.push("/videoSurveillance");
} else if (val === 1) { } else if (val === 1) {
this.$router.push('/personnel') this.$router.push("/personnel");
} }
}, },
switchDiv() { switchDiv() {
if (this.type) { if (this.type) {
this.type = false; this.type = false;
this.$refs.switchBtn.style.display = "none"; this.$refs.switchBtn.style.display = "none";
} else { } else {
this.type = true; this.type = true;
setTimeout(() => { setTimeout(() => {
// 俩秒之后让模块消失 // 俩秒之后让模块消失
this.$refs.switchBtn.style.display = "block"; this.$refs.switchBtn.style.display = "block";
}, 800) }, 800);
}
} }
}, },
},
mounted() { mounted() {
//获取数据
this.getData();
//获取年的检查次数
this.chooseType(0);
//默认获取年的安全告警统计
this.choose2Type(0);
this.switchDiv(); this.switchDiv();
window.onresize = () => { window.onresize = () => {
return (() => { return (() => {
let h = document.documentElement.clientHeight || document.body.clientHeight; let h =
document.documentElement.clientHeight || document.body.clientHeight;
this.vdaH = h - 0 + "px"; this.vdaH = h - 0 + "px";
})() })();
} };
},
}
}; };
</script> </script>
@ -551,11 +686,10 @@ export default {
font-size: 12px; font-size: 12px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
line-height: 21px; line-height: 21px;
} }
} }
.tabGtBox { .tabGtBox {
@ -692,7 +826,6 @@ export default {
.dh2 { .dh2 {
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation: myt2est 0.5s linear; animation: myt2est 0.5s linear;
} }
.screenBox { .screenBox {
@ -728,7 +861,8 @@ export default {
.meeting { .meeting {
width: 76px; width: 76px;
height: 29px; height: 29px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
text-align: center; text-align: center;
line-height: 29px; line-height: 29px;
@ -738,7 +872,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
padding-right: 6px; padding-right: 6px;
} }
@ -750,7 +884,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
padding: 0 22px 0 33px; padding: 0 22px 0 33px;
height: 260px; height: 260px;
} }
@ -794,7 +928,6 @@ export default {
margin: 10px auto 0; margin: 10px auto 0;
width: 90%; width: 90%;
border-bottom: 1px solid rgba(96, 213, 205, 0.4); border-bottom: 1px solid rgba(96, 213, 205, 0.4);
;
} }
.pie3Box { .pie3Box {
@ -802,7 +935,6 @@ export default {
height: 90%; height: 90%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
.pie2Box { .pie2Box {
@ -812,7 +944,7 @@ export default {
bottom: 0; bottom: 0;
@media only screen and (max-height: 1000px) { @media only screen and (max-height: 1000px) {
top: 50px top: 50px;
} }
} }
@ -824,7 +956,7 @@ export default {
@media only screen and (max-height: 1000px) { @media only screen and (max-height: 1000px) {
height: 262px; height: 262px;
top: 38px top: 38px;
} }
} }
@ -839,7 +971,7 @@ export default {
width: 135px; width: 135px;
height: 140px; height: 140px;
padding: 5px; padding: 5px;
border: 1px solid #00EBEB; border: 1px solid #00ebeb;
margin-top: 52px; margin-top: 52px;
margin-left: 13px; margin-left: 13px;
margin-right: 14px; margin-right: 14px;
@ -902,7 +1034,7 @@ export default {
font-size: 18px; font-size: 18px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #E2E2E2; color: #e2e2e2;
margin-top: 8px; margin-top: 8px;
} }
@ -919,7 +1051,38 @@ export default {
color: #fff; color: #fff;
} }
} }
.ftahBox1 {
// text-align: center;
padding-top: 27px;
width: 89px;
height: 100px;
display: flex;
flex-direction: column;
@media only screen and (max-height: 1000px) {
padding-top: 7px;
}
div:nth-child(1) {
display: inline-block;
font-size: 18px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #e2e2e2;
margin-top: 8px;
}
div:nth-child(2) {
display: inline-block;
font-size: 30px;
font-weight: 500;
margin-top: 5px;
}
div:nth-child(3) {
font-size: 17px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
color: #fff;
}
}
.bgPicture { .bgPicture {
width: 100%; width: 100%;
background: url("~@/assets/pic/BG.jpg") no-repeat; background: url("~@/assets/pic/BG.jpg") no-repeat;
@ -944,14 +1107,14 @@ export default {
.titLeft { .titLeft {
width: 138px; width: 138px;
height: 40px; height: 40px;
background: #025A5F; background: #025a5f;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
span:nth-child(1), span:nth-child(1),
span:nth-child(2) { span:nth-child(2) {
font-size: 14px; font-size: 14px;
color: #3CFFF9; color: #3cfff9;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
@ -971,7 +1134,7 @@ export default {
padding-right: 25px; padding-right: 25px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #D1FFFE; color: #d1fffe;
span:nth-child(2) { span:nth-child(2) {
display: inline-block; display: inline-block;
@ -983,7 +1146,6 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
} }
.titName { .titName {

26
src/views/swiper.vue
View File

@ -71,6 +71,9 @@
</template> </template>
<script> <script>
import {
getMostTroubleCensus
} from "../api/api";
export default { export default {
components: {}, components: {},
props: {}, props: {},
@ -114,7 +117,15 @@ export default {
}, },
}, },
methods: { methods: {
getData(){
getMostTroubleCensus({
projectId: sessionStorage.getItem("projectId"),
// size:10,
// current:1
}).then((res) => {
console.log(res.data,'==================');
});
},
changePage(index) { changePage(index) {
if (index == 1) { if (index == 1) {
this.$refs.carousel.prev() this.$refs.carousel.prev()
@ -145,16 +156,18 @@ export default {
//定时器 //定时器
this.setTimer(); this.setTimer();
}, },
mounted() { }, mounted() {
this.getData()
},
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@marginLeft:50px;
.home { .home {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 49px; margin-left: @marginLeft;
.boxChild { .boxChild {
display: flex; display: flex;
@ -247,11 +260,16 @@ export default {
// } // }
// } // }
// } // }
} }
</style> </style>
<style> <style>
.el-carousel__arrow--left, .el-carousel__arrow--left,
.el-carousel__arrow--right { .el-carousel__arrow--right {
display: none; display: none;
}
.el-carousel__container {
position: relative;
height: 180px !important;
} }
</style> </style>