Skip to content

Y
yishuju-ui
Commit 3b4c7c75 authored by 沈翠玲's avatar 沈翠玲
Browse files
Options

数据大屏

parent 86929560
Show whitespace changes
Inline Side-by-side
Showing with 1503 additions and 172 deletions
src/views/data-screen/components/AnnualUseChart.vue
View file @ 3b4c7c75
......@@ -19,7 +19,7 @@ const timer =ref(null);
const salvProValue =ref([]);
const dataZoom =ref({
startValue: 0,
endValue: 4
endValue: 3
});
const timer1 = ref();
onBeforeUnmount(() => {
......@@ -125,10 +125,15 @@ const option = computed(() => {
textStyle: {
color: '#fff', //百分比颜色
},
position: ['0', 5],
position: ['50%', 5],
align: 'center',
//百分比格式
formatter: function(data) {
if ((salvProValue.value[data.dataIndex].rate).toFixed(2) === '100.00') {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%';
} else {
return ''
}
},
}
},
......@@ -162,19 +167,37 @@ const option = computed(() => {
color: '#ffffff',
fontSize: 16,
}
},
green: {
color: '#70DDA7',
fontSize: 16,
formatter: function(data) {
//富文本固定格式{colorName|这里填你想要写的内容}
return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
},
}
},
data: salvProValue.value
},
{
show: true,
type: 'bar',
barGap: '-100%',
barWidth: '42%', //统计条宽度
itemStyle: {
normal: {
barBorderRadius: 30,
color: 'rgba(102, 102, 102,0.5)'
},
yellow: {
color: '#CCB877',
fontSize: 16,
},
red: {
color: '#BC3C47',
label: {
normal: {
show: true,
//label 的position位置可以是top bottom left,right,也可以是固定值
//在这里需要上下统一对齐,所以用固定值
position: ['100%', '-108%'],
align: 'right',
rich: { //富文本
white: { //自定义颜色
color: '#ffffff',
fontSize: 16,
},
......@@ -186,33 +209,41 @@ const option = computed(() => {
},
formatter: function(data) {
//富文本固定格式{colorName|这里填你想要写的内容}
if (data.dataIndex == 0) {
return '{start1|}{red|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}' + ' ' + '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}';
} else if (data.dataIndex == 1) {
return '{start1|}{yellow|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}' + ' ' + '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}';
} else if (data.dataIndex == 2) {
return '{start1|}{green|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}' + ' ' + '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}';
} else {
return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}' + ' ' + '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}';
}
return '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}'
},
}
},
data: salvProValue.value
z: 1,
data: salvProValue.value.map(v => 100)
},
{
show: true,
type: 'bar',
barGap: '-100%',
barWidth: '42%', //统计条宽度
barWidth: '0', //统计条宽度
itemStyle: {
normal: {
barBorderRadius: 30,
color: 'rgba(102, 102, 102,0.5)'
},
},
z: 1,
label: {
normal: {
fontSize: 14,
show: true,
textStyle: {
color: '#fff', //百分比颜色
},
position: ['50%', 5],
align: 'center',
//百分比格式
formatter: function(data) {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%';
},
}
},
z: 3,
data: salvProValue.value.map(v => 100)
},
]
......@@ -232,7 +263,7 @@ const query = () => {
salvProName.value = arr.map(v => v.name)
salvProValue.value = arr.map(v => ({name: v.name,value: v.totalReturn, tenantId: v.tenantId, rate: v.rate}))
load.value = false
if (salvProName.value.length > 5) {
if (salvProName.value.length > 4) {
if (timer.value) {
clearInterval(timer.value)
timer.value = null
......@@ -241,10 +272,10 @@ const query = () => {
dataZoom.value.startValue++;
if (dataZoom.value.endValue++ >= salvProName.value.length - 1) {
dataZoom.value.startValue = 0;
dataZoom.value.endValue = 4;
dataZoom.value.endValue = 3;
}
// chart?.setOption(option);
}, 3000);
}, 1000);
}
}
......@@ -255,7 +286,7 @@ timer1.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
</script>
<style lang="scss" scoped>
......
src/views/data-screen/components/ChinaMapChart.vue
View file @ 3b4c7c75
......@@ -121,6 +121,7 @@ const query = () => {
}
});
mapData.value.sort((a,b) => b.value - a.value)
}
EChartsRef.value.draw()
}).catch(() => {
......@@ -132,7 +133,7 @@ timer.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
let legend=['案件量', '案件总金额'];
let textColor = "#fff";
let lineColor="rgba(255,255,255,0.2)";
......@@ -178,7 +179,7 @@ const option = computed(() => {
width: '10%'
}, {
show: false,
left: '81%',
left: '80%',
top: '5%',
bottom: '48%',
width: '0%'
......@@ -239,7 +240,7 @@ const option = computed(() => {
yAxis: [{
type: 'category',
inverse: true,
position: 'right',
position: 'center',
interval: 1000,
axisLine: {
show: false,
......@@ -259,7 +260,7 @@ const option = computed(() => {
gridIndex: 1,
type: 'category',
inverse: true,
position: 'left',
position: 'center',
axisLine: {
show: false
},
......@@ -288,7 +289,7 @@ const option = computed(() => {
gridIndex: 2,
type: 'category',
inverse: true,
position: 'left',
position: 'center',
axisLine: {
show: false,
lineStyle:{
......@@ -353,9 +354,9 @@ const option = computed(() => {
show: false
}
},
top: 136,
zoom:1.3,
left: '9%',
top: 98,
zoom:1.4,
left: '10%',
regions: [
{
name: "南海诸岛",
......@@ -399,14 +400,14 @@ const option = computed(() => {
},
series: [
{
name: "确诊病例",
name: "案件总金额",
type: "map",
map: 'china',
aspectScale: 0.75,
selectedMode: false,
top: 135,
zoom:1.3,
left: '8%',
top: 99,
zoom:1.4,
left: '9%',
label: {
normal: {
show: false,
......@@ -467,7 +468,7 @@ const option = computed(() => {
label: {
normal: {
align: 'right',
show: true,
show: false,
fontSize: 14,
color: '#ffffff'
}
......@@ -511,7 +512,7 @@ const option = computed(() => {
label: {
normal: {
position: ['0', 1],
show: true,
show: false,
fontSize: 14,
color: '#ffffff'
}
......
src/views/data-screen/components/HotPlateChart.vue
View file @ 3b4c7c75
......@@ -17,7 +17,7 @@ const salvProName =ref([]);
const salvProValue =ref([]);
const dataZoom =ref({
startValue: 0,
endValue: 4
endValue: 3
});
const props = defineProps({
isAdmin: Boolean,
......@@ -112,10 +112,15 @@ const option = computed(() => {
textStyle: {
color: '#fff', //百分比颜色
},
position: ['0', 5],
position: ['50%', 5],
align: 'center',
//百分比格式
formatter: function(data) {
if ((salvProValue.value[data.dataIndex].rate).toFixed(2) === '100.00') {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%';
} else {
return ''
}
},
}
},
......@@ -149,19 +154,38 @@ const option = computed(() => {
color: '#ffffff',
fontSize: 16,
}
},
green: {
color: '#70DDA7',
fontSize: 16,
formatter: function(data) {
//富文本固定格式{colorName|这里填你想要写的内容}
return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
},
yellow: {
color: '#CCB877',
fontSize: 16,
}
},
data: salvProValue.value
},
red: {
color: '#BC3C47',
{
show: true,
type: 'bar',
barGap: '-100%',
barWidth: '42%', //统计条宽度
itemStyle: {
normal: {
barBorderRadius: 30,
color: 'rgba(102, 102, 102,0.5)'
},
},
label: {
normal: {
show: true,
//label 的position位置可以是top bottom left,right,也可以是固定值
//在这里需要上下统一对齐,所以用固定值
position: ['100%', '-108%'],
align: 'right',
rich: { //富文本
white: { //自定义颜色
color: '#ffffff',
fontSize: 16,
},
......@@ -173,33 +197,41 @@ const option = computed(() => {
},
formatter: function(data) {
//富文本固定格式{colorName|这里填你想要写的内容}
if (data.dataIndex == 0) {
return '{start1|}{red|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}' + ' ' + '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}';
} else if (data.dataIndex == 1) {
return '{start1|}{yellow|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}' + ' ' + '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}';
} else if (data.dataIndex == 2) {
return '{start1|}{green|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}' + ' ' + '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}';
} else {
return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}' + ' ' + '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}';
}
return '{white| 回款金额:}{gray|' + salvProValue.value[data.dataIndex].value + '}{white|元}'
},
}
},
data: salvProValue.value
z: 1,
data: salvProValue.value.map(v => 100)
},
{
show: true,
type: 'bar',
barGap: '-100%',
barWidth: '42%', //统计条宽度
barWidth: '0', //统计条宽度
itemStyle: {
normal: {
barBorderRadius: 30,
color: 'rgba(102, 102, 102,0.5)'
},
},
z: 1,
label: {
normal: {
fontSize: 14,
show: true,
textStyle: {
color: '#fff', //百分比颜色
},
position: ['50%', 5],
align: 'center',
//百分比格式
formatter: function(data) {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%';
},
}
},
z: 3,
data: salvProValue.value.map(v => 100)
},
]
......@@ -219,7 +251,7 @@ getReturnRateByPlatform(param).then(res => {
load.value = false
salvProName.value = arr.map(v => v.loanPlatform)
salvProValue.value = arr.map(v => ({name: v.loanPlatform,value: v.sumRepayAmount, rate: v.rate}))
if (salvProName.value.length > 5) {
if (salvProName.value.length > 4) {
if (timer.value) {
clearInterval(timer.value)
timer.value = null
......@@ -228,10 +260,10 @@ getReturnRateByPlatform(param).then(res => {
dataZoom.value.startValue++;
if (dataZoom.value.endValue++ >= salvProName.value.length - 1) {
dataZoom.value.startValue = 0;
dataZoom.value.endValue = 4;
dataZoom.value.endValue = 3;
}
// chart?.setOption(option);
}, 3000);
}, 1000);
}
}
})
......@@ -241,7 +273,7 @@ getReturnRateByPlatform(param).then(res => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
</script>
<style lang="scss" scoped>
.echarts {
......
src/views/data-screen/components/MaleFemaleRatioChart.vue
View file @ 3b4c7c75
......@@ -90,7 +90,7 @@ timer1.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
const option = computed(() => {
......
src/views/data-screen/components/OverNext30Chart.vue
View file @ 3b4c7c75
......@@ -71,7 +71,7 @@ timer1.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
watch(
() => props.dayActiveName,
(newValue, oldValue) => {
......@@ -113,9 +113,10 @@ const option = computed(() => {
},
grid: {
top: "15%",
left: "5%",
right: "5%",
bottom: "15%"
left: "1%",
right: "1%",
containLabel: true,
bottom: "1%"
},
xAxis: [
{
......@@ -123,23 +124,18 @@ const option = computed(() => {
boundaryGap: false,
axisLine: {
show: true,
symbol: ["none", "arrow"],
symbolOffset: [0, 30],
lineStyle: {
color: "#233653",
shadowOffsetX: 20,
shadowColor: "#233653"
color: "#f9f9f9"
}
},
axisLabel: {
color: "#fff",
color: "#d1e6eb",
padding: 0,
fontSize: 14,
formatter: function (data) {
return data;
}
},
splitLine: { show: false, lineStyle: { color: "#192a44" } },
axisTick: { show: false },
data: dates.value
}
......@@ -153,20 +149,17 @@ const option = computed(() => {
},
minInterval: 1,
splitLine: {
show: false,
show: true,
lineStyle: {
color: "#fff"
color: "#0a3256"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#fff"
}
show: false
},
axisLabel: {
show: true,
color: "#fff",
color: "#d1e6eb",
fontSize: 14,
padding: 0,
formatter: function (value) {
......
src/views/data-screen/components/computerRateChart.vue
View file @ 3b4c7c75
......@@ -25,18 +25,18 @@ import { getTenantPage } from '@/api/tenant';
{
value: 100,
children: [{
value: 20, // value字段的值，对应到面积大小。
value: 85, // value字段的值，对应到面积大小。
// 也可以是数组，如 [2323, 43, 55]，则数组第一项对应到面积大小。
// 数组其他项可以用于额外的视觉映射，详情参见 series-treemp.levels。
id: 'someid-1', // id 不是必须设置的。
// 但是如果想使用 API 来改变某个节点，需要用 id 来定位。
name: '测试调解中心2', // 显示在矩形中的描述文字。
children: [
{ value: 11,
{ value: 75,
id: 'someid-31',
name: '批次1',
}, {
value: 200,
value: 80,
id: 'someid-32',
name: '批次2',
}, {
......@@ -44,11 +44,11 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-33',
name: '批次3',
}, {
value: 30,
value: 95,
id: 'someid-34',
name: '批次4',
},{
value: 20,
value: 85,
id: 'someid-31',
name: '批次5',
},
......@@ -61,15 +61,15 @@ import { getTenantPage } from '@/api/tenant';
// ... // label的格式参见 series-treemap.itemStyle。
}
}, {
value: 30,
value: 80,
id: 'someid-2',
name: '西南调节中心',
children: [
{ value: 150,
{ value: 85,
id: 'someid-31',
name: '武汉',
}, {
value: 200,
value: 78,
id: 'someid-32',
name: '咸宁',
}, {
......@@ -77,11 +77,11 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-33',
name: '鄂州',
}, {
value: 30,
value: 86,
id: 'someid-34',
name: '荆州',
},{
value: 20,
value: 85,
id: 'someid-31',
name: '宜昌',
},
......@@ -90,15 +90,15 @@ import { getTenantPage } from '@/api/tenant';
],
}, {
value: 40,
value: 78,
id: 'someid-2',
name: '雄安调解中心',
children: [
{ value: 150,
{ value: 75,
id: 'someid-54',
name: '批次1',
}, {
value: 200,
value: 85,
id: 'someid-99',
name: '批次2',
}
......@@ -107,15 +107,15 @@ import { getTenantPage } from '@/api/tenant';
],
},{
value: 50,
value: 89,
id: 'someid-3',
name: '广元调解中心',
children: [
{ value: 150,
{ value: 94,
id: 'someid-31',
name: '批次1',
}, {
value: 200,
value: 85,
id: 'someid-32',
name: '批次2',
}, {
......@@ -123,11 +123,11 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-33',
name: '批次3',
}, {
value: 30,
value: 86,
id: 'someid-34',
name: '批次4',
},{
value: 20,
value: 79,
id: 'someid-31',
name: '批次5',
},
......@@ -135,15 +135,15 @@ import { getTenantPage } from '@/api/tenant';
],
}, {
value: 60,
value: 85,
id: 'someid-4',
name: '乐山调解中心',
children: [
{ value: 150,
{ value: 87,
id: 'someid-31',
name: '批次1',
}, {
value: 200,
value: 86,
id: 'someid-32',
name: '批次2',
}, {
......@@ -159,7 +159,7 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-2',
name: '合作商测试1',
children: [
{ value: 150,
{ value: 85,
id: 'someid-31',
name: '批次1',
}
......@@ -172,11 +172,11 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-2',
name: '测试调解中心',
children: [
{ value: 150,
{ value: 84,
id: 'someid-31',
name: '批次1',
}, {
value: 200,
value: 95,
id: 'someid-32',
name: '批次2',
}, {
......@@ -184,15 +184,15 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-33',
name: '批次3',
}, {
value: 30,
value: 85,
id: 'someid-34',
name: '批次4',
},{
value: 20,
value: 86,
id: 'someid-31',
name: '批次5',
},{
value: 20,
value: 79,
id: 'someid-31',
name: '批次6',
},
......@@ -205,11 +205,11 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-2',
name: '德阳调解中心',
children: [
{ value: 150,
{ value: 80,
id: 'someid-31',
name: '批次1',
}, {
value: 200,
value: 78,
id: 'someid-32',
name: '批次2',
}, {
......@@ -217,7 +217,7 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-33',
name: '批次3',
}, {
value: 30,
value: 88,
id: 'someid-34',
name: '批次4',
}
......@@ -230,23 +230,23 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-2',
name: '遂宁调解中心',
children: [
{ value: 150,
{ value: 85,
id: 'someid-31',
name: '批次1',
}, {
value: 200,
value: 85,
id: 'someid-32',
name: '批次2',
}, {
value: 90,
value: 77,
id: 'someid-33',
name: '批次3',
}, {
value: 30,
value: 86,
id: 'someid-34',
name: '批次4',
},{
value: 20,
value: 85,
id: 'someid-31',
name: '批次5',
},
......@@ -255,15 +255,15 @@ import { getTenantPage } from '@/api/tenant';
],
}, {
value: 11,
value: 70,
id: 'someid-2',
name: '雅安调解中心',
children: [
{ value: 150,
{ value: 87,
id: 'someid-31',
name: '批次A',
}, {
value: 200,
value: 85,
id: 'someid-32',
name: '批次B',
}, {
......@@ -276,27 +276,27 @@ import { getTenantPage } from '@/api/tenant';
],
}, {
value: 5,
value: 75,
id: 'someid-2',
name: '自贡调解中心',
children: [
{ value: 150,
{ value: 70,
id: 'someid-31',
name: '批次A1',
}, {
value: 200,
value: 90,
id: 'someid-32',
name: '批次A2',
}, {
value: 90,
value: 80,
id: 'someid-33',
name: '批次A3',
}, {
value: 30,
value: 75,
id: 'someid-34',
name: '批次A4',
},{
value: 20,
value: 85,
id: 'someid-31',
name: '批次A5',
},
......@@ -305,15 +305,15 @@ import { getTenantPage } from '@/api/tenant';
],
}, {
value: 5,
value: 74,
id: 'someid-2',
name: '绵阳调解中心',
children: [
{ value: 150,
{ value: 70,
id: 'someid-31',
name: '批次B1',
}, {
value: 200,
value: 70,
id: 'someid-32',
name: '批次B2',
}, {
......@@ -321,11 +321,11 @@ import { getTenantPage } from '@/api/tenant';
id: 'someid-33',
name: '批次B3',
}, {
value: 30,
value: 72,
id: 'someid-34',
name: '批次B4',
},{
value: 20,
value: 73,
id: 'someid-31',
name: '批次B5',
},
......@@ -344,6 +344,16 @@ import { getTenantPage } from '@/api/tenant';
// },
// ...
],
label: {
normal: {
formatter: (a) => {
console.log('sadsa4444', a)
let html = ''
html += a.name + '\n' + a.seriesName + ':' + a.data.value
return html
}
}
},
width: "100%",
height: "100%",
leafDepth: 2,
......@@ -359,7 +369,7 @@ import { getTenantPage } from '@/api/tenant';
colorSaturation: [0.3, 0.6],
itemStyle: {
normal: {
borderColorSaturation: 0.7,
borderColorSaturation: 0.0,
gapWidth: 5,
borderWidth: 2
}
......@@ -368,7 +378,7 @@ import { getTenantPage } from '@/api/tenant';
colorSaturation: [0.3, 0.5],
itemStyle: {
normal: {
borderColorSaturation: 0.6,
borderColorSaturation: 0.0,
gapWidth: 1
}
}
......
src/views/data-screen/images/animation.svg 0 → 100644
View file @ 3b4c7c75
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/data-screen/index.scss
View file @ 3b4c7c75
......@@ -11,15 +11,33 @@
height: 100%;
background: #0e1356;
.qiu {
width: 100%;
height: 100%;
width: 300%;
height: 313%;
position: absolute;
top: 50%;
z-index: -1;
padding-top: 250px;
transform: scale(1, 0.4) translate(-8%, -36%);
transform: scale(1, 0.5) translate(-36%, -86%);
background: url("./images/qiu.png") no-repeat;
background-size: 100% 100%;
}
.bg2 {
position: absolute;
width: 100%;
pointer-events: none;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: .05;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
img {
width: 800px;
}
}
.linebox {
position: absolute;
width: 100%;
......@@ -27,8 +45,8 @@
top: 50%;
z-index: -1;
padding-top: 250px;
transform: scale(1, 0.4) translate(-8%, -40%);
opacity: 0.5;
transform: scale(1, 0.3) translate(-9%, -64%);
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
......@@ -38,13 +56,13 @@
}
.lines1 {
animation: scales2 60s linear infinite;
width: 650px;
width: 950px;
margin-left: -3px;
margin-top: -7px;
}
.lines3 {
animation: scales2 20s linear infinite;
width: 450px;
width: 750px;
opacity: 1;
}
}
......@@ -80,7 +98,7 @@
left: 0;
width: 100%;
height: 82px;
font-family: YouSheBiaoTiHei;
font-weight: 600;
font-size: 32px;
line-height: 78px;
color: #fff;
......@@ -94,7 +112,6 @@
left: 50%;
width: 622px;
height: 40px;
font-family: YouSheBiaoTiHei;
font-size: 14px;
line-height: 40px;
color: #ffffff;
......@@ -113,7 +130,6 @@
box-sizing: border-box;
width: 136px;
height: 42px;
font-family: YouSheBiaoTiHei;
font-size: 18px;
font-weight: 400;
line-height: 42px;
......@@ -137,7 +153,6 @@
top: 0;
right: 14px;
width: 310px;
font-family: YouSheBiaoTiHei;
font-size: 17px;
font-weight: 400;
line-height: 38px;
......@@ -168,12 +183,12 @@
display: block;
}
&:first-child,&:last-child {
flex: 0.5;
// flex: 0.5;
padding-top: 8px;
height: 100px;
}
&:first-child::after, &:nth-child(4)::after {
height: 90px;
height: 110px;
}
&:last-child::after {
display: none;
......@@ -273,7 +288,6 @@
}
span {
margin-bottom: 12px;
font-family: YouSheBiaoTiHei;
font-size: 18px;
line-height: 16px;
color: #ffffff;
......@@ -285,14 +299,14 @@
display: flex;
flex: 1;
width: 100%;
padding: 12px 0 20px;
padding: 30px 50px 20px 50px;
.dataScreen-lf {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 500px;
width: 400px;
height: 100%;
margin-right: 40px;
margin-right: 30px;
.dataScreen-top,
.dataScreen-center,
.dataScreen-bottom {
......@@ -318,7 +332,7 @@
flex-direction: column;
justify-content: space-between;
height: 100%;
margin-right: 40px;
margin-right: 30px;
.dataScreen-map {
position: relative;
box-sizing: border-box;
......@@ -331,7 +345,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
width: 500px;
width: 400px;
height: 100%;
.dataScreen-top,
.dataScreen-center,
......
src/views/data-screen/index.vue
View file @ 3b4c7c75
......@@ -70,18 +70,20 @@
<ChinaMapChart />
<div class="linebox">
<img src="./images/lines1.png" alt="" class="lines1">
<img src="./images/lines3.png" alt="" class="lines3">
<img src="./images/xuan.png" alt="" class="lines3">
</div>
<div class="qiu">
</div>
<div class="bg2">
<img src="./images/animation.svg" alt="" srcset="">
</div>
<div class="qiu"></div>
</div>
<div class="dataScreen-map" v-else>
<div class="dataScreen-map-title">当日跟进分析</div>
<MaleFemaleRatioChart :tenantId="tenantId"/>
</div>
<div class="dataScreen-cb">
<div class="dataScreen-main-title" style="width: auto;">
作业量趋势分析
</div>
<div class=" absolute top-1 right-40 flex my-select items-center" v-if="isAdmin">
<div style="width: 95px;margin-right: 5px;">
调解中心
......@@ -259,7 +261,7 @@ timer1.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
// 获取当前时间
let timer = null;
let time = ref(dayjs().format("YYYY年MM月DD HH:mm:ss"));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment