Merge branch 'dev-xiaole' into shenzhen-dev
This commit is contained in:
骆乐
commit
67edebe1fa
@ -1,58 +1,45 @@
|
||||
<template>
|
||||
<!-- 质量问题 -->
|
||||
<div class="containerBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<div class="myChart">
|
||||
<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>
|
||||
<Card :title="title">
|
||||
<JNestedRingChart :title="{ text: 654, subTitle: '本周总任务' ,y:'35%' }" :series="series" />
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import problemChart from '../jChart/pie/JProblemChart'
|
||||
import Card from "../components/Card.vue";
|
||||
import JNestedRingChart from "../jChart/pie/JNestedRingChart.vue";
|
||||
export default {
|
||||
components:{problemChart},
|
||||
components: { Card, JNestedRingChart },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "default title"
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.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>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
|
||||
@ -1,126 +1,44 @@
|
||||
<template>
|
||||
<!-- 安全隐患 -->
|
||||
<div class="hiddenDanger">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<div class="myChart" ref="myChart" />
|
||||
</div>
|
||||
<!-- 质量问题 -->
|
||||
<Card :title="title">
|
||||
<JNestedRingChart :title="{ y:'30%' , subTitle: '隐患类别' }" :series="series" />
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts4";
|
||||
import Card from '../components/Card.vue'
|
||||
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
components: { Card, JNestedRingChart },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "default title"
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initMyChart();
|
||||
},
|
||||
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',],
|
||||
data() {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
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,
|
||||
},
|
||||
color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
|
||||
data: [
|
||||
{ value: 15, name: "文明施工" },
|
||||
{ value: 2, name: "未分类" },
|
||||
{ value: 5, name: "安全管理" },
|
||||
{ value: 6, name: "施工安全" },
|
||||
{ value: 20, name: "基础工程" },
|
||||
],
|
||||
{ value: 45, name: '文明施工' },
|
||||
{ value: 5, name: '未分类' },
|
||||
{ value: 15, name: '安全管理' },
|
||||
{ value: 10, name: '施工安全' },
|
||||
{ value: 45, name: '基础工程' },
|
||||
]
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
{
|
||||
roseType: 'area',
|
||||
radius: ['58%', '54%'],
|
||||
color: ['#0B1B35', '#244D8F'],
|
||||
data: [30, 40, 30, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<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>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
@ -1,50 +1,44 @@
|
||||
<template>
|
||||
<!-- 质量问题 -->
|
||||
<div class="containerBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<div class="myChart">
|
||||
<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>
|
||||
<Card :title="title">
|
||||
<JNestedRingChart :title="{ y:'30%' , subTitle: '隐患类别' }" :series="series" />
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import problemChart from '../jChart/pie/JProblemChart'
|
||||
import Card from '../components/Card.vue'
|
||||
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
|
||||
export default {
|
||||
components:{problemChart},
|
||||
components: { Card, JNestedRingChart },
|
||||
props: {
|
||||
title: {
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.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>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
@ -1,16 +1,49 @@
|
||||
<template>
|
||||
<!-- 视频宣传 -->
|
||||
<div class="videoPhoto">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<img style="height:85%;width:90%; margin-left:5%; margin-top:2%;" src="@/assets/images/projectImg/videoPic.png" alt="" />
|
||||
<div class="titleTxt">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
show: false,
|
||||
projectData: {
|
||||
videoUrl: ""
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@ -18,8 +51,35 @@ export default {
|
||||
type: String,
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -27,12 +87,27 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0081c3;
|
||||
|
||||
.titleTxt {
|
||||
.video,
|
||||
.image {
|
||||
font-size: 18px;
|
||||
color: #6ee4f0;
|
||||
margin-top: 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>
|
||||
Loading…
x
Reference in New Issue
Block a user