Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
a45161ca by xiaomiao
Options

不动产监管大屏

1 parent dae4de37
Inline Side-by-side
Showing 24 changed files with 520 additions and 1926 deletions
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="480px"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data() {
return {
options: {},
// 定义颜色
colorList: {
linearYtoG: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#f5b44d'
},
{
offset: 1,
color: '#28f8de'
}
]
},
linearGtoB: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#43dfa2'
},
{
offset: 1,
color: '#28f8de'
}
]
},
linearBtoG: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#1c98e8'
},
{
offset: 1,
color: '#28f8de'
}
]
},
areaBtoG: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(35,184,210,.2)'
},
{
offset: 1,
color: 'rgba(35,184,210,0)'
}
]
}
}
}
},
components: {
Echart
},
props: {
cdata: {
type: Object,
default: () => ({})
}
},
watch: {
cdata: {
handler(newData) {
this.options = {
title: {
text: '',
textStyle: {
color: '#D3D6DD',
fontSize: 24,
fontWeight: 'normal'
},
subtext: newData.year + '/' + newData.weekCategory[6],
subtextStyle: {
color: '#fff',
fontSize: 16
},
top: 50,
left: 80
},
legend: {
top: 120,
left: 80,
orient: 'vertical',
itemGap: 15,
itemWidth: 12,
itemHeight: 12,
data: ['平均指标', '我的指标'],
textStyle: {
color: '#fff',
fontSize: 14
}
},
tooltip: {
trigger: 'item'
},
radar: {
center: ['68%', '27%'],
radius: '40%',
name: {
color: '#fff'
},
splitNumber: 8,
axisLine: {
lineStyle: {
color: this.colorList.linearYtoG,
opacity: 0.6
}
},
splitLine: {
lineStyle: {
color: this.colorList.linearYtoG,
opacity: 0.6
}
},
splitArea: {
areaStyle: {
color: '#fff',
opacity: 0.1,
shadowBlur: 25,
shadowColor: '#000',
shadowOffsetX: 0,
shadowOffsetY: 5
}
},
indicator: [
{
name: '服务态度',
max: newData.maxData
},
{
name: '产品质量',
max: 10
},
{
name: '任务效率',
max: 12
},
{
name: '售后保障',
max: 3.5
}
]
},
grid: {
left: 90,
right: 80,
bottom: 40,
top: '60%'
},
xAxis: {
type: 'category',
position: 'bottom',
axisLine: true,
axisLabel: {
color: 'rgba(255,255,255,.8)',
fontSize: 12
},
data: newData.weekCategory
},
// 下方Y轴
yAxis: {
name: '工单',
nameLocation: 'end',
nameGap: 24,
nameTextStyle: {
color: 'rgba(255,255,255,.5)',
fontSize: 14
},
max: newData.maxData,
splitNumber: 4,
axisLine: {
lineStyle: {
opacity: 0
}
},
splitLine: {
show: true,
lineStyle: {
color: '#fff',
opacity: 0.1
}
},
axisLabel: {
color: 'rgba(255,255,255,.8)',
fontSize: 12
}
},
series: [
{
name: '',
type: 'radar',
symbolSize: 0,
data: [
{
value: newData.radarDataAvg[6],
name: '平均指标',
itemStyle: {
normal: {
color: '#f8d351'
}
},
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: '#f8d351',
shadowBlur: 25,
shadowColor: 'rgba(248,211,81,.3)',
shadowOffsetX: 0,
shadowOffsetY: -10,
opacity: 1
}
}
},
{
value: newData.radarData[6],
name: '我的指标',
itemStyle: {
normal: {
color: '#43dfa2'
}
},
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: this.colorList.linearGtoB,
shadowBlur: 15,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 5,
opacity: 0.8
}
}
}
]
},
{
name: '',
type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 8,
itemStyle: {
normal: {
color: '#fff'
}
},
lineStyle: {
normal: {
color: this.colorList.linearBtoG,
width: 3
}
},
areaStyle: {
normal: {
color: this.colorList.areaBtoG
}
},
data: newData.weekLineData,
lineSmooth: true,
markLine: {
silent: true,
data: [
{
type: 'average',
name: '平均值'
}
],
precision: 0,
label: {
normal: {
formatter: '平均值: \n {c}'
}
},
lineStyle: {
normal: {
color: 'rgba(248,211,81,.7)'
}
}
},
tooltip: {
position: 'top',
formatter: '{c} m',
backgroundColor: 'rgba(28,152,232,.2)',
padding: 6
}
},
{
name: '占位背景',
type: 'bar',
itemStyle: {
normal: {
show: true,
color: '#000',
opacity: 0
}
},
silent: true,
barWidth: '50%',
data: newData.weekMaxData,
animation: false
}
]
}
},
immediate: true,
deep: true
}
}
}
</script>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue'
export default {
data () {
return {
drawTiming: null,
cdata: {
year: null,
weekCategory: [],
radarData: [],
radarDataAvg: [],
maxData: 12000,
weekMaxData: [],
weekLineData: []
}
}
},
components: {
Chart,
},
mounted () {
this.drawTimingFn();
},
beforeDestroy () {
clearInterval(this.drawTiming);
},
methods: {
drawTimingFn () {
this.setData();
this.drawTiming = setInterval(() => {
this.setData();
}, 6000);
},
setData () {
// 清空轮询数据
this.cdata.weekCategory = [];
this.cdata.weekMaxData = [];
this.cdata.weekLineData = [];
this.cdata.radarData = [];
this.cdata.radarDataAvg = [];
let dateBase = new Date();
this.cdata.year = dateBase.getFullYear();
// 周数据
for (let i = 0; i < 7; i++) {
// 日期
let date = new Date();
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
// 折线图数据
this.cdata.weekMaxData.push(this.cdata.maxData);
let distance = Math.round(Math.random() * 11000 + 500);
this.cdata.weekLineData.push(distance);
// 雷达图数据
// 我的指标
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
this.cdata.radarData.unshift(radarDayData);
// 平均指标
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
let radarDayDataAvg = [
distanceAvg,
averageSpeedAvg,
maxSpeedAvg,
hourAvg
];
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
}
}
}
};
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<template>
<div>
<!-- 通过率/达标率 -->
<Echart
:options="options"
:id="id"
height="100px"
width="100px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
id: {
type: String,
required: true,
default: "chartRate"
},
tips: {
type: Number,
required: true,
default: 50
},
colorObj: {
type: Object,
default: function () {
return {
textStyle: "#3fc0fb",
series: {
color: ["#00bcd44a", "transparent"],
dataColor: {
normal: "#03a9f4",
shadowColor: "#97e2f5"
}
}
};
}
}
},
watch: {
// tips 是会变更的数据，所以进行监听
tips: {
handler (newData) {
this.options = {
title:{
text: newData * 1 + "%",
x: "center",
y: "center",
textStyle: {
color: this.colorObj.textStyle,
fontSize: 16
}
},
series: [
{
type: "pie",
radius: ["75%", "80%"],
center: ["50%", "50%"],
hoverAnimation: false,
color: this.colorObj.series.color,
label: {
normal: {
show: false
}
},
data: [
{
value: newData,
itemStyle: {
normal: {
color: this.colorObj.series.dataColor.normal,
shadowBlur: 10,
shadowColor: this.colorObj.series.dataColor.shadowColor
}
}
},
{
value: 100 - newData
}
]
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="220px"
width="260px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 50],
roseType: "area",
center: ["50%", "40%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue';
export default {
data () {
return {
cdata: {
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
seriesData: [
{ value: 10, name: "data1" },
{ value: 5, name: "data2" },
{ value: 15, name: "data3" },
{ value: 25, name: "data4" },
{ value: 20, name: "data5" },
{ value: 35, name: "data6" }
]
}
}
},
components: {
Chart,
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<template>
<div>
<Echart
:options="options"
id="centreRight2Chart1"
height="200px"
width="260px"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
// 固定样式数据
let lineStyle = {
normal: {
width: 1,
opacity: 0.5
}
};
this.options = {
radar: {
indicator: newData.indicatorData,
shape: "circle",
splitNumber: 5,
radius: ["0%", "65%"],
name: {
textStyle: {
color: "rgb(238, 197, 102)"
}
},
splitLine: {
lineStyle: {
color: [
"rgba(238, 197, 102, 0.1)",
"rgba(238, 197, 102, 0.2)",
"rgba(238, 197, 102, 0.4)",
"rgba(238, 197, 102, 0.6)",
"rgba(238, 197, 102, 0.8)",
"rgba(238, 197, 102, 1)"
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(238, 197, 102, 0.5)"
}
}
},
series: [
{
name: "北京",
type: "radar",
lineStyle: lineStyle,
data: newData.dataBJ,
symbol: "none",
itemStyle: {
normal: {
color: "#F9713C"
}
},
areaStyle: {
normal: {
opacity: 0.1
}
}
},
{
name: "上海",
type: "radar",
lineStyle: lineStyle,
data: newData.dataSH,
symbol: "none",
itemStyle: {
normal: {
color: "#B3E4A1"
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
},
{
name: "广州",
type: "radar",
lineStyle: lineStyle,
data: newData.dataGZ,
symbol: "none",
itemStyle: {
normal: {
color: "rgb(238, 197, 102)"
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
} //end
]
}
},
immediate: true,
deep: true
}
}
};
</script>
\ No newline at end of file
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue';
export default {
data () {
return {
cdata: {
indicatorData: [
{ name: "data1", max: 300 },
{ name: "data2", max: 250 },
{ name: "data3", max: 300 },
{ name: "data4", max: 5},
{ name: "data5", max: 200 },
{ name: "data6", max: 100 }
],
dataBJ: [
[94, 69, 114, 2.08, 73, 39, 22],
[99, 73, 110, 2.43, 76, 48, 23],
[31, 12, 30, 0.5, 32, 16, 24],
[42, 27, 43, 1, 53, 22, 25],
[154, 117, 157, 3.05, 92, 58, 26],
[234, 185, 230, 4.09, 123, 69, 27],
[160, 120, 186, 2.77, 91, 50, 28]
],
dataGZ: [
[84, 94, 140, 2.238, 68, 18, 22],
[93, 77, 104, 1.165, 53, 7, 23],
[99, 130, 227, 3.97, 55, 15, 24],
[146, 84, 139, 1.094, 40, 17, 25],
[113, 108, 137, 1.481, 48, 15, 26],
[81, 48, 62, 1.619, 26, 3, 27],
[56, 48, 68, 1.336, 37, 9, 28]
],
dataSH: [
[91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3],
[109, 81, 121, 1.28, 68, 51, 4],
[106, 77, 114, 1.07, 55, 51, 5],
[109, 81, 121, 1.28, 68, 51, 6],
[106, 77, 114, 1.07, 55, 51, 7]
]
}
}
},
components: {
Chart,
}
}
</script>
\ No newline at end of file
......@@ -31,114 +31,93 @@ export default {
cdata: {
handler (newData) {
this.options = {
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.1)",
axisPointer: {
type: "shadow",
label: {
show: true,
backgroundColor: "#7B7DDC"
}
}
},
legend: {
data: ["已贯通", "计划贯通", "贯通率"],
data: ['资产原值', '累计折旧'],
textStyle: {
color: "#B4B4B4"
},
top: "0%"
},
grid: {
x: "8%",
width: "88%",
y: "4%"
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
data: newData.category,
type: 'value',
splitLine: {show: false},
axisTick: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisTick: {
show: false
}
show: true,
lineStyle:{
color:'#01F3F5'
},
yAxis: [
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
show:true,
textStyle:{
color:'#01F3F5',
fontSize:12,
},
rotate:30
}
},
{
splitLine: { show: false },
yAxis: {
type: 'category',
data: ['房屋','建筑物','机械设备','运输工具'],
splitLine: {show: false},
axisTick: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
show: true,
lineStyle:{
color:'#01F3F5'
}
},
axisLabel: {
formatter: "{value} "
}
}
],
},
series: [
{
name: "贯通率",
type: "line",
smooth: true,
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 8,
yAxisIndex: 1,
itemStyle: {
name: '资产原值',
type: 'bar',
stack: '总量',
barWidth: 30,
itemStyle:{
normal: {
color: "#F02FC2"
color: '#6601FF',
}
},
data: newData.rateData
},
{
name: "已贯通",
type: "bar",
barWidth: 10,
itemStyle: {
label: {
normal: {
barBorderRadius: 5,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#956FD4" },
{ offset: 1, color: "#3EACE5" }
])
show: true,
position: 'insideRight'
}
},
data: newData.barData
z: 10,
data: [320, 302, 301, 543]
},
{
name: "计划贯通",
type: "bar",
barGap: "-100%",
barWidth: 10,
itemStyle: {
name: '累计折旧',
type: 'bar',
stack: '总量',
itemStyle:{
normal: {
barBorderRadius: 5,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(156,107,211,0.8)" },
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
{ offset: 1, color: "rgba(156,107,211,0.2)" }
])
color: '#00F0FF'
}
},
z: -12,
data: newData.lineData
label: {
normal: {
show: true,
position: 'insideRight',
textStyle:{
color:'#6601FF'
}
}
},
z: 5,
data: [90, 230, 210, 432]
},
]
}
},
......
......@@ -11,13 +11,13 @@ export default {
return {
cdata: {
category: [
"市区",
"万州",
"江北",
"南岸",
"北碚",
"綦南",
"长寿",
"汉台区",
"南郑区",
"城固县",
"洋县",
"西乡县",
"勉县",
"宁强县",
"永川",
"璧山",
"江津",
......@@ -123,16 +123,9 @@ export default {
Chart,
},
mounted () {
this.setData();
},
methods: {
// 根据自己的业务情况修改
setData () {
for (let i = 0; i < this.cdata.barData.length -1; i++) {
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
this.cdata.rateData.push(rate.toFixed(2));
}
},
}
};
</script>
......
<template>
<div id="bottomLeft">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span>
<icon name="chart-bar" class="text-icon"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">数据统计图</span>
</div>
</div>
<div>
<BottomLeftChart />
</div>
</div>
</div>
</template>
<script>
import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
export default {
components: {
BottomLeftChart
}
}
</script>
<style lang="scss" scoped>
$box-height: 520px;
$box-width: 100%;
#bottomLeft {
padding: 20px 16px;
height: $box-height;
width: $box-width;
border-radius: 5px;
.bg-color-black {
height: $box-height - 35px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
.chart-box {
margin-top: 16px;
width: 170px;
height: 170px;
.active-ring-name {
padding-top: 10px;
}
}
}
</style>
<template>
<div id="bottomRight">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span>
<icon name="chart-area" class="text-icon"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
<div class="decoration2">
<dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
</div>
</div>
</div>
<div>
<BottomRightChart />
</div>
</div>
</div>
</template>
<script>
import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
export default {
components: {
BottomRightChart
}
};
</script>
<style lang="scss" class>
$box-height: 520px;
$box-width: 100%;
#bottomRight {
padding: 14px 16px;
height: $box-height;
width: $box-width;
border-radius: 5px;
.bg-color-black {
height: $box-height - 30px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
//下滑线动态
.decoration2 {
position: absolute;
right: 0.125rem;
}
.chart-box {
margin-top: 16px;
width: 170px;
height: 170px;
.active-ring-name {
padding-top: 10px;
}
}
}
</style>
\ No newline at end of file
<template>
<div id="center">
<div class="up">
<div
class="bg-color-black item"
v-for="item in titleItem"
:key="item.title"
>
<p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
<div>
<dv-digital-flop
class="dv-dig-flop ml-1 mt-2 pl-3"
:config="item.number"
/>
</div>
</div>
</div>
<div class="down">
<div class="ranking bg-color-black">
<span>
<icon name="chart-pie" class="text-icon"></icon>
</span>
<span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
</div>
<div class="percent">
<div class="item bg-color-black">
<span>今日任务通过率</span>
<CenterChart
:id="rate[0].id"
:tips="rate[0].tips"
:colorObj="rate[0].colorData"
/>
</div>
<div class="item bg-color-black">
<span>今日任务达标率</span>
<CenterChart
:id="rate[1].id"
:tips="rate[1].tips"
:colorObj="rate[1].colorData"
/>
</div>
<div class="water">
<dv-water-level-pond class="dv-wa-le-po" :config="water" />
</div>
</div>
</div>
</div>
</template>
<script>
import CenterChart from '@/components/echart/center/centerChartRate'
export default {
data() {
return {
titleItem: [
{
title: '今年累计任务建次数',
number: {
number: [120],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
}
},
{
title: '本月累计任务次数',
number: {
number: [18],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
}
},
{
title: '今日累计任务次数',
number: {
number: [2],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
}
},
{
title: '今年失败任务次数',
number: {
number: [14],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
}
},
{
title: '今年成功任务次数',
number: {
number: [106],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
}
},
{
title: '今年达标任务个数',
number: {
number: [100],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 26
}
}
}
],
ranking: {
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 78
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
},
{
name: '新乡2',
value: 80
},
{
name: '新乡3',
value: 80
},
{
name: '新乡4',
value: 80
},
{
name: '新乡5',
value: 80
},
{
name: '新乡6',
value: 80
}
],
carousel: 'single',
unit: '人'
},
water: {
data: [24, 45],
shape: 'roundRect',
formatter: '{value}%',
waveNum: 3
},
// 通过率和达标率的组件复用数据
rate: [
{
id: 'centerRate1',
tips: 60,
colorData: {
textStyle: '#3fc0fb',
series: {
color: ['#00bcd44a', 'transparent'],
dataColor: {
normal: '#03a9f4',
shadowColor: '#97e2f5'
}
}
}
},
{
id: 'centerRate2',
tips: 40,
colorData: {
textStyle: '#67e0e3',
series: {
color: ['#faf3a378', 'transparent'],
dataColor: {
normal: '#ff9800',
shadowColor: '#fcebad'
}
}
}
}
]
}
},
components: {
CenterChart
}
}
</script>
<style lang="scss" scoped>
#center {
display: flex;
flex-direction: column;
.up {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.item {
border-radius: 6px;
padding-top: 8px;
margin-top: 8px;
width: 32%;
height: 70px;
.dv-dig-flop {
width: 150px;
height: 30px;
}
}
}
.down {
padding: 6px 4px;
padding-bottom: 0;
width: 100%;
display: flex;
height: 255px;
justify-content: space-between;
.bg-color-black {
border-radius: 5px;
}
.ranking {
padding: 10px;
width: 59%;
.dv-scr-rank-board {
height: 225px;
}
}
.percent {
width: 40%;
display: flex;
flex-wrap: wrap;
.item {
width: 50%;
height: 120px;
span {
margin-top: 8px;
font-size: 14px;
display: flex;
justify-content: center;
}
}
.water {
width: 100%;
.dv-wa-le-po {
height: 120px;
}
}
}
}
}
</style>
<template>
<div id="centerLeft1">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span>
<icon name="chart-bar" class="text-icon"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">任务通过率</span>
<dv-decoration-3 class="dv-dec-3" />
</div>
</div>
<div class="d-flex jc-center">
<CenterLeft1Chart />
</div>
<!-- 4个主要的数据 -->
<div class="bottom-data">
<div
class="item-box mt-2"
v-for="(item, index) in numberData"
:key="index"
>
<div class="d-flex">
<span class="coin">￥</span>
<dv-digital-flop class="dv-digital-flop" :config="item.number" />
</div>
<p class="text" style="text-align: center;">
{{ item.text }}
<span class="colorYellow">(件)</span>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
export default {
data() {
return {
numberData: [
{
number: {
number: [15],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 24
}
},
text: '今日构建总量'
},
{
number: {
number: [1144],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 24
}
},
text: '总共完成数量'
},
{
number: {
number: [361],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 24
}
},
text: '正在编译数量'
},
{
number: {
number: [157],
toFixed: 1,
textAlign: 'left',
content: '{nt}',
style: {
fontSize: 24
}
},
text: '未通过数量'
}
]
}
},
components: {
CenterLeft1Chart
},
mounted() {
this.changeTiming()
},
methods: {
changeTiming() {
setInterval(() => {
this.changeNumber()
}, 3000)
},
changeNumber() {
this.numberData.forEach((item, index) => {
item.number.number[0] += ++index
item.number = { ...item.number }
})
}
}
}
</script>
<style lang="scss" scoped>
$box-width: 300px;
$box-height: 410px;
#centerLeft1 {
padding: 16px;
height: $box-height;
width: $box-width;
border-radius: 10px;
.bg-color-black {
height: $box-height - 30px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
.dv-dec-3 {
position: relative;
width: 100px;
height: 20px;
top: -3px;
}
.bottom-data {
.item-box {
& > div {
padding-right: 5px;
}
font-size: 14px;
float: right;
position: relative;
width: 50%;
color: #d3d6dd;
.dv-digital-flop {
width: 120px;
height: 30px;
}
// 金币
.coin {
position: relative;
top: 6px;
font-size: 20px;
color: #ffc107;
}
.colorYellow {
color: yellowgreen;
}
p {
text-align: center;
}
}
}
}
</style>
<template>
<div id="centerLeft1">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span>
<icon name="chart-pie" class="text-icon"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">地图数据</span>
<dv-decoration-1 class="dv-dec-1" />
</div>
</div>
<div class="d-flex jc-center">
<CenterLeft2Chart />
</div>
</div>
</div>
</template>
<script>
import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
export default {
components: {
CenterLeft2Chart
},
};
</script>
<style lang="scss" scoped>
#centerLeft1 {
$box-width: 300px;
$box-height: 410px;
padding: 16px;
height: $box-height;
min-width: $box-width;
border-radius: 5px;
.bg-color-black {
height: $box-height - 30px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
.dv-dec-1 {
position: relative;
width: 100px;
height: 20px;
top: -3px;
}
.chart-box {
margin-top: 16px;
width: 170px;
height: 170px;
.active-ring-name {
padding-top: 10px;
}
}
}
</style>
\ No newline at end of file
<template>
<div id="centerRight1">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span>
<icon name="chart-line" class="text-icon"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">任务完成排行榜</span>
</div>
</div>
<div class="d-flex jc-center body-box">
<dv-scroll-board class="dv-scr-board" :config="config" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
config: {
header: ['组件', '分支', '覆盖率'],
data: [
['组件1', 'dev-1', "<span class='colorGrass'>↑75%</span>"],
['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
['组件10', 'dev-9', "<span class='colorGrass'>↑76%</span>"]
],
rowNum: 7, //表格行数
headerHeight: 35,
headerBGC: '#0f1325', //表头
oddRowBGC: '#0f1325', //奇数行
evenRowBGC: '#171c33', //偶数行
index: true,
columnWidth: [50],
align: ['center']
}
}
}
}
</script>
<style lang="scss" scoped>
$box-height: 410px;
$box-width: 300px;
#centerRight1 {
padding: 16px;
padding-top: 20px;
height: $box-height;
width: $box-width;
border-radius: 5px;
.bg-color-black {
height: $box-height - 30px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
.body-box {
border-radius: 10px;
overflow: hidden;
.dv-scr-board {
width: 270px;
height: 340px;
}
}
}
</style>
<template>
<div id="centerRight2">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span>
<icon name="align-left" class="text-icon"></icon>
</span>
<span class="fs-xl text mx-2">产品销售渠道分析</span>
</div>
<div class="d-flex ai-center flex-column body-box">
<dv-capsule-chart class="dv-cap-chart" :config="config" />
<centerRight2Chart1 />
</div>
</div>
</div>
</template>
<script>
import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
export default {
data() {
return {
config: {
data: [
{
name: '南阳',
value: 167
},
{
name: '周口',
value: 67
},
{
name: '漯河',
value: 123
},
{
name: '郑州',
value: 55
},
{
name: '西峡',
value: 98
}
]
}
}
},
components: { centerRight2Chart1 }
}
</script>
<style lang="scss" scoped>
#centerRight2 {
$box-height: 410px;
$box-width: 340px;
padding: 5px;
height: $box-height;
width: $box-width;
border-radius: 5px;
.bg-color-black {
padding: 5px;
height: $box-height;
width: $box-width;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
.body-box {
border-radius: 10px;
overflow: hidden;
.dv-cap-chart {
width: 100%;
height: 160px;
}
}
}
</style>
<template>
<div class="centercard">
<div class="card1">
<CenterLeft2Chart class="map" />
</div>
<div class="card2"></div>
</div>
</template>
<script>
import CenterLeft2Chart from "@/components/echart/map";
export default {
data() {
return {};
},
components: { CenterLeft2Chart },
mounted() {},
beforeDestroy() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.centercard{
width: 50%;
height: 100%;
.card1{
width: 100%;
height: 600px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
}
</style>
.bigScreen {
width: 100vw;
height: 100vh;
background-color: #020308;
background-color: #031754;
overflow: hidden;
}
#index {
color: #d3d6dd;
width: 1920px;
width:2150px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left top;
overflow: hidden;
.bg {
width: 100%;
height: 100%;
padding: 16px 16px 0 16px;
background-image: url("../../image/pageBg.png");
background-size: cover;
background-position: center center;
}
.host-body {
.host-body{
.header{
width: 100%;
height: 100px;
.head{
margin-top: 50px;
}
.dv-dec-10,
.dv-dec-10-s {
width: 33.3%;
height: 5px;
width: 50.3%;
height: 10px;
}
.dv-dec-10-s {
......@@ -47,11 +50,19 @@
text-align: center;
background-size: cover;
background-repeat: no-repeat;
.dv-dec-5{
position: absolute;
width: 500px;
height: 40px;
left: 0;
top: 38.5px;
}
.title-text {
font-size: 24px;
font-size: 37px;
position: absolute;
bottom: 0;
font-weight: 600;
width: 500px;
bottom: 20px;
left: 50%;
transform: translate(-50%);
}
......@@ -65,93 +76,57 @@
transform: translate(-50%);
}
}
// 第二行
.aside-width {
width: 40%;
}
.react-r-s,
.react-l-s {
background-color: #0f1325;
}
// 平行四边形
.react-right {
&.react-l-s {
text-align: right;
width: 500px;
}
font-size: 18px;
width: 300px;
line-height: 50px;
text-align: center;
transform: skewX(-45deg);
.react-after {
position: absolute;
right: -25px;
top: 0;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(45deg);
}
.content{
width: 98%;
height: 900px;
margin: auto;
display: flex;
.text {
display: inline-block;
transform: skewX(45deg);
}
.centercard{
width: 50%;
height: 100%;
.card1{
width: 100%;
height: 600px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.react-left {
&.react-l-s {
width: 500px;
text-align: left;
.card2{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
font-size: 18px;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(45deg);
background-color: #0f1325;
.react-left {
position: absolute;
left: -25px;
top: 0;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(-45deg);
}
.text {
display: inline-block;
transform: skewX(-45deg);
.rightcard{
width: 25%;
height: 100%;
.card1{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.body-box {
margin-top: 16px;
display: flex;
flex-direction: column;
//下方区域的布局
.content-box {
display: grid;
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
.card3{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
// 底部数据
.bottom-box {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 50%);
}
}
}
}
......
......@@ -4,143 +4,78 @@
<div class="bg">
<dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="host-body">
<div class="d-flex jc-center">
<div class="header">
<div class="d-flex head">
<dv-decoration-10 class="dv-dec-10" />
<div class="d-flex jc-center">
<div class="d-flex">
<dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
<div class="title">
<span class="title-text">大数据可视化平台</span>
<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
</div>
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
<span class="title-text">汉中市不动产监管大屏</span>
<dv-decoration-5
:dur="1"
class="dv-dec-5"
:color="decorationColor"
/>
</div>
<dv-decoration-8
class="dv-dec-8"
:reverse="true"
:color="decorationColor"
/>
</div>
<dv-decoration-10 class="dv-dec-10-s" />
</div>
<!-- 第二行 -->
<div class="d-flex jc-between px-2">
<div class="d-flex aside-width">
<div class="react-left ml-4 react-l-s">
<span class="react-left"></span>
<span class="text">数据分析1</span>
</div>
<div class="react-left ml-3">
<span class="text">数据分析2</span>
</div>
</div>
<div class="d-flex aside-width">
<div class="react-right bg-color-blue mr-3">
<span class="text fw-b">vue-big-screen</span>
</div>
<div class="react-right mr-4 react-l-s">
<span class="react-after"></span>
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
</div>
</div>
</div>
<div class="body-box">
<!-- 第三行数据 -->
<div class="content-box">
<div>
<dv-border-box-12>
<centerLeft1 />
</dv-border-box-12>
</div>
<div>
<dv-border-box-12>
<centerLeft2 />
</dv-border-box-12>
</div>
<!-- 中间 -->
<div>
<center />
</div>
<!-- 中间 -->
<div>
<centerRight2 />
</div>
<div>
<dv-border-box-13>
<centerRight1 />
</dv-border-box-13>
</div>
</div>
<!-- 第四行数据 -->
<div class="bottom-box">
<dv-border-box-13>
<bottomLeft />
</dv-border-box-13>
<dv-border-box-12>
<bottomRight />
</dv-border-box-12>
</div>
<div class="content">
<leftcard/>
<centercard/>
<rightcard/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import drawMixin from "../../utils/drawMixin";
import { formatTime } from '../../utils/index.js'
import centerLeft1 from './centerLeft1'
import centerLeft2 from './centerLeft2'
import centerRight1 from './centerRight1'
import centerRight2 from './centerRight2'
import center from './center'
import bottomLeft from './bottomLeft'
import bottomRight from './bottomRight'
import leftcard from './leftcard'
import centercard from './centercard'
import rightcard from './rightcard'
export default {
mixins: [drawMixin],
data () {
data() {
return {
timing: null,
loading: true,
dateDay: null,
dateYear: null,
dateWeek: null,
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
decorationColor: ['#568aea', '#000000']
}
decorationColor: ["#568aea", "#568aea"],
};
},
components: {
centerLeft1,
centerLeft2,
centerRight1,
centerRight2,
center,
bottomLeft,
bottomRight
leftcard,centercard,rightcard
},
mounted () {
this.timeFn()
this.cancelLoading()
mounted() {
// this.timeFn();
this.cancelLoading();
},
beforeDestroy () {
clearInterval(this.timing)
beforeDestroy() {
clearInterval(this.timing);
},
methods: {
timeFn () {
this.timing = setInterval(() => {
this.dateDay = formatTime(new Date(), 'HH: mm: ss')
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
this.dateWeek = this.weekday[new Date().getDay()]
}, 1000)
},
cancelLoading () {
// timeFn() {
// this.timing = setInterval(() => {
// this.dateDay = formatTime(new Date(), "HH: mm: ss");
// this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
// this.dateWeek = this.weekday[new Date().getDay()];
// }, 1000);
// },
cancelLoading() {
setTimeout(() => {
this.loading = false
}, 500)
}
}
}
this.loading = false;
}, 500);
},
},
};
</script>
<style lang="scss" scoped>
@import './index.scss';
<style scoped lang="scss">
@import "./index.scss";
</style>
......
<template>
<div class="leftcard">
<div class="card1">
<div class="cardhead">区县接入</div>
<div class="cardcontent">
<div class="text1">
<p>52343</p>
<p>总量</p>
</div>
<div class="text2">
<p>666</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card2">
<div class="cardhead">省厅汇交</div>
<div class="cardcontent">
<div class="text1">
<p>9168</p>
<p>总量</p>
</div>
<div class="text2">
<p>45</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card3">
<div class="cardhead">各区县数据上报统计</div>
<columnar />
</div>
</div>
</template>
<script>
import columnar from "@/components/echart/columnar";
export default {
data() {
return {
};
},
components: { columnar },
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.leftcard{
width: 25%;
height: 100%;
.cardhead{
width: 100%;
height: 40px;
margin-left: 10px;
line-height: 40px;
color: rgb(27, 185, 206);
font-size: 26px;
}
.cardcontent{
width: 100%;
height: 160px;
display: flex;
.text1{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 40px;
text-align: center;;
};
p:nth-child(2){
color: rgb(180, 178, 178);
};
}
.text2{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;;
color: rgb(180, 178, 178);
};
}
.text3{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;;
color: rgb(180, 178, 178);
};
}
}
.card1{
width: 100%;
height: 200px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2{
width: 100%;
height: 200px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card3{
width: 100%;
height: 500px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
.mainCss{
width: 500px;
height:445px;
background-color: saddlebrown;
}
}
}
</style>
<template>
<div class="leftcard">
<div class="card1">
<div class="cardhead">区县接入</div>
<div class="cardcontent">
<div class="text1">
<p>52343</p>
<p>总量</p>
</div>
<div class="text2">
<p>666</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card2">
<div class="cardhead">省厅汇交</div>
<div class="cardcontent">
<div class="text1">
<p>9168</p>
<p>总量</p>
</div>
<div class="text2">
<p>45</p>
<p>失败</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card3">
<div class="cardhead">各区县数据上报统计</div>
<div class="mainCss" ref="myRef"></div>
</div>
</div>
</template>
<script>
import CenterLeft2Chart from "@/components/echart/map";
export default {
data() {
return {
};
},
components: { CenterLeft2Chart },
mounted() {
},
beforeDestroy() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.leftcard{
width: 25%;
height: 100%;
.cardhead{
width: 100%;
height: 40px;
margin-left: 10px;
line-height: 40px;
color: rgb(27, 185, 206);
font-size: 26px;
}
.cardcontent{
width: 100%;
height: 160px;
display: flex;
.text1{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 40px;
text-align: center;;
};
p:nth-child(2){
color: rgb(180, 178, 178);
};
}
.text2{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;;
color: rgb(180, 178, 178);
};
p:nth-child(2){
color: rgb(180, 178, 178);
};
}
.text3{
width: 33%;
height: 100%;
p{
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;;
color: rgb(180, 178, 178);
};
p:nth-child(2){
};
}
}
.card1{
width: 100%;
height: 200px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2{
width: 100%;
height: 200px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card3{
width: 100%;
height: 500px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
.mainCss{
width: 500px;
height:445px;
background-color: saddlebrown;
}
}
}
</style>
......@@ -95,7 +95,7 @@
<script>
// 上报首页
import wgsl from "./wgsl.vue";
import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
import CenterLeft2Chart from "@/components/echart/map";
// 引入表格数据
import data from "./data"
export default {
......