Merge branch 'dev-xiaole' into shenzhen-dev

This commit is contained in:
骆乐 2022-08-05 18:55:27 +08:00
commit 67edebe1fa
4 changed files with 169 additions and 195 deletions

View File

@ -1,58 +1,45 @@
<template> <template>
<!-- 质量问题 --> <!-- 质量问题 -->
<div class="containerBox"> <Card :title="title">
<div class="titleTxt">{{ title }}</div> <JNestedRingChart :title="{ text: 654, subTitle: '本周总任务' ,y:'35%' }" :series="series" />
<div class="myChart"> </Card>
<problemChart
:title="{ text: 654, subTitle: '本周总任务' ,y:'35%'}"
:color="['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']"
:data="[
{ value: 45, name: '未开始' },
{ value: 5, name: '未开始延期' },
{ value: 15, name: '进行中' },
{ value: 10, name: '执行中延期' },
{ value: 45, name: '完成' }
]" />
</div>
</div>
</template> </template>
<script> <script>
import problemChart from '../jChart/pie/JProblemChart' import Card from "../components/Card.vue";
import JNestedRingChart from "../jChart/pie/JNestedRingChart.vue";
export default { export default {
components:{problemChart}, components: { Card, JNestedRingChart },
props: { props: {
title: { title: {
type: String, type: String,
default: "default title" default: ""
} }
}, },
data() { data() {
return { return {
series: [
}; {
color: ["#3cabfd", "#57ec72", "#f294c6", "#f43a8d", "#6ee4f0"],
data: [
{ value: 45, name: "未开始" },
{ value: 5, name: "未开始延期" },
{ value: 15, name: "进行中" },
{ value: 10, name: "执行中延期" },
{ value: 45, name: "完成" }
]
}, },
{
roseType: "area",
} radius: ["58%", "54%"],
color: ["#0B1B35", "#244D8F"],
data: [30, 40, 30, 40]
}
]
};
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped></style>
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
.myChart{
width: 100%;
height: 90%;
}
}
</style>

View File

@ -1,126 +1,44 @@
<template> <template>
<!-- 安全隐患 --> <!-- 质量问题 -->
<div class="hiddenDanger"> <Card :title="title">
<div class="titleTxt">{{ title }}</div> <JNestedRingChart :title="{ y:'30%' , subTitle: '隐患类别' }" :series="series" />
<div class="myChart" ref="myChart" /> </Card>
</div>
</template> </template>
<script> <script>
import echarts from "echarts4"; import Card from '../components/Card.vue'
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
export default { export default {
data() { components: { Card, JNestedRingChart },
return {
};
},
props: { props: {
title: { title: {
type: String, type: String,
default: "default title" default: ''
} }
}, },
mounted(){ data() {
this.initMyChart(); return {
},
methods:{
initMyChart(){
const myChart = echarts.init(this.$refs.myChart);
const option = {
title: {
subtext: "隐患类别",
textAlign: 'center',
x: '29%',
y: '43%',
textStyle: {
fontSize: 20,
fontWeight: 'normal',
color: '#fff',
},
subtextStyle: {
fontSize: 16,
fontWeight: 'normal',
color: '#fff'
},
},
tooltip: {
trigger: "item",
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 90,
top: 'center',
itemWidth: 10, //
itemHeight: 10, //
selectedMode: true,
icon: 'circle',
textStyle: {
color: '#ffffff',
fontSize: 14,
}
},
color: ['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0',],
series: [ series: [
{ {
type: "pie", color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
radius: ["50%", "65%"],
center: ['30%', '50%'],
avoidLabelOverlap: true,
// itemStyle: {
// borderRadius: 8,
// borderColor: '#11316c',
// borderWidth: 6,
// },
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: false,
fontSize: "20",
color: '#fff',
fontWeight: "bold",
},
scaleSize: 12,
},
labelLine: {
show: false,
},
data: [ data: [
{ value: 15, name: "文明施工" }, { value: 45, name: '文明施工' },
{ value: 2, name: "未分类" }, { value: 5, name: '未分类' },
{ value: 5, name: "安全管理" }, { value: 15, name: '安全管理' },
{ value: 6, name: "施工安全" }, { value: 10, name: '施工安全' },
{ value: 20, name: "基础工程" }, { value: 45, name: '基础工程' },
], ]
}, },
], {
}; roseType: 'area',
radius: ['58%', '54%'],
myChart.setOption(option); color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40]
}
]
} }
} }
} }
</script> </script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.hiddenDanger {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
.myChart{
width: 100%;
height: 100%;
}
}
</style>

View File

@ -1,50 +1,44 @@
<template> <template>
<!-- 质量问题 --> <!-- 质量问题 -->
<div class="containerBox"> <Card :title="title">
<div class="titleTxt">{{ title }}</div> <JNestedRingChart :title="{ y:'30%' , subTitle: '隐患类别' }" :series="series" />
<div class="myChart"> </Card>
<problemChart
:title="{ subTitle: '隐患类别', y: '30%'}"
:color="['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0']"
:data="[
{ value: 15, name: '文明施工' },
{ value: 2, name: '未分类' },
{ value: 5, name: '安全管理' },
{ value: 6, name: '施工安全' },
{ value: 20, name: '基础工程' },
]" />
</div>
</div>
</template> </template>
<script> <script>
import problemChart from '../jChart/pie/JProblemChart' import Card from '../components/Card.vue'
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
export default { export default {
components:{problemChart}, components: { Card, JNestedRingChart },
props: { props: {
title: { title: {
type: String, type: String,
default: "default title" default: ''
} }
}, },
data() {
return {
series: [
{
color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
data: [
{ value: 45, name: '文明施工' },
{ value: 5, name: '未分类' },
{ value: 15, name: '安全管理' },
{ value: 10, name: '施工安全' },
{ value: 45, name: '基础工程' },
]
},
{
roseType: 'area',
radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40]
}
]
}
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped></style>
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
.myChart {
width: 100%;
height: 100%;
}
}
</style>

View File

@ -1,16 +1,49 @@
<template> <template>
<!-- 视频宣传 --> <!-- 视频宣传 -->
<div class="videoPhoto"> <div class="videoPhoto">
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">
<img style="height:85%;width:90%; margin-left:5%; margin-top:2%;" src="@/assets/images/projectImg/videoPic.png" alt="" /> <el-button type="text" class="video" @click="toVideo()">宣传视频</el-button>
<el-button type="text" class="image" @click="toImage()">效果图</el-button>
</div>
<video v-if="!show" class="topInner videos" autoplay controls loop></video>
<img
v-else
style="height:85%;width:90%; margin-left:5%; margin-top:2%;"
src="@/assets/images/projectImg/videoPic.png"
alt
/>
<!-- 替换视频 -->
<!-- v-if="projectData.videoUrl && optionListIndex == 1" -->
<el-upload
class="changeVideoBox"
:src="$store.state.FILEURL + projectData.videoUrl"
:action="$store.state.UPLOADURL"
:on-success="(file) => handleSuccess(file, 1)"
:on-error="(file) => handleError(file, 1)"
:beforeUpload="(file) => handleBeforeUpload(file, 1)"
name="files"
:show-file-list="false"
>
<!-- 更换视频 -->
<span class="changeVideoBtn">
{{
$t('message.companyDiagram.changeVideo')
}}
</span>
</el-upload>
</div> </div>
</template> </template>
<script> <script>
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
export default { export default {
data() { data() {
return { return {
show: false,
projectData: {
videoUrl: ""
}
}; };
}, },
props: { props: {
@ -18,8 +51,35 @@ export default {
type: String, type: String,
default: "default title" default: "default title"
} }
},
created() {
this.getDataDateils();
},
methods: {
toVideo() {
this.show = false;
},
toImage() {
this.show = true;
},
//
getDataDateils() {
let data = {
projectSn: this.$store.state.projectSn
};
console.log("当前的参数", data);
getProjectDetail(data).then(res => {
if (res.code == 200) {
this.projectData = res.result;
console.log("projectData", this.projectData);
} }
} });
},
handleSuccess() {},
handleError() {},
handleBeforeUpload() {}
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -27,12 +87,27 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
.video,
.titleTxt { .image {
font-size: 18px; font-size: 18px;
color: #6ee4f0; color: #6ee4f0;
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
} }
.changeVideoBtn {
border: 1px solid rgba(255, 255, 255, 0.5);
padding: 3px 5px;
font-size: 14px;
cursor: pointer;
position: absolute;
left: 50%;
top: 45%;
display: none;
transform: translate(-50%, -50%);
}
.videos:hover + .changeVideoBox .changeVideoBtn,
.changeVideoBox:hover .changeVideoBtn {
display: block;
}
} }
</style> </style>