Skip to content

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

数据大屏

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