Skip to content

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

修复审批

parent c87abbd8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 29628 additions and 4 deletions
src/components/ECharts/config/index.ts 0 → 100644
View file @ 551afb22
import * as echarts from "echarts/core";
import { BarChart, LineChart, LinesChart, PieChart, ScatterChart, RadarChart, GaugeChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent,
PolarComponent,
GeoComponent,
ToolboxComponent,
DataZoomComponent
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import type {
BarSeriesOption,
LineSeriesOption,
LinesSeriesOption,
PieSeriesOption,
ScatterSeriesOption,
RadarSeriesOption,
GaugeSeriesOption
} from "echarts/charts";
import {
EffectScatterChart,
} from "echarts/charts";
import type {
TitleComponentOption,
TooltipComponentOption,
GridComponentOption,
DatasetComponentOption
} from "echarts/components";
import type { ComposeOption } from "echarts/core";
import "echarts-liquidfill";
export type ECOption = ComposeOption<
| BarSeriesOption
| LineSeriesOption
| LinesSeriesOption
| PieSeriesOption
| RadarSeriesOption
| GaugeSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
| ScatterSeriesOption
>;
echarts.use([
EffectScatterChart,
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent,
PolarComponent,
GeoComponent,
ToolboxComponent,
DataZoomComponent,
BarChart,
LineChart,
LinesChart,
PieChart,
ScatterChart,
RadarChart,
GaugeChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
export default echarts;
src/components/ECharts/index.vue 0 → 100644
View file @ 551afb22
<template>
<div id="echarts" ref="chartRef" :style="echartsStyle" />
</template>
<script setup lang="ts" name="ECharts">
import { ref, onMounted, onBeforeUnmount, watch, computed, markRaw, nextTick, onActivated } from "vue";
import { EChartsType, ECElementEvent } from "echarts/core";
import echarts, { ECOption } from "./config";
import { useDebounceFn } from "@vueuse/core";
import { useGlobalStore } from "@/stores/modules/global";
import { storeToRefs } from "pinia";
interface Props {
option: ECOption;
renderer?: "canvas" | "svg";
resize?: boolean;
theme?: Object | string;
width?: number | string;
height?: number | string;
onClick?: (event: ECElementEvent) => any;
}
const props = withDefaults(defineProps<Props>(), {
renderer: "canvas",
resize: true
});
const echartsStyle = computed(() => {
return props.width || props.height
? { height: props.height + "px", width: props.width + "px" }
: { height: "100%", width: "100%" };
});
const chartRef = ref<HTMLDivElement | HTMLCanvasElement>();
const chartInstance = ref<EChartsType>();
const draw = () => {
if (chartInstance.value) {
console.log('props.option', props.option)
chartInstance.value.setOption(props.option);
}
};
watch(props, () => {
draw();
});
const handleClick = (event: ECElementEvent) => props.onClick && props.onClick(event);
const init = () => {
if (!chartRef.value) return;
chartInstance.value = echarts.getInstanceByDom(chartRef.value);
if (!chartInstance.value) {
chartInstance.value = markRaw(
echarts.init(chartRef.value, props.theme, {
renderer: props.renderer
})
);
chartInstance.value.on("click", handleClick);
draw();
}
};
const resize = () => {
if (chartInstance.value && props.resize) {
chartInstance.value.resize({ animation: { duration: 300 } });
}
};
const debouncedResize = useDebounceFn(resize, 300, { maxWait: 800 });
const globalStore = useGlobalStore();
const { maximize, isCollapse, tabs, footer } = storeToRefs(globalStore);
watch(
() => [maximize, isCollapse, tabs, footer],
() => {
debouncedResize();
},
{ deep: true }
);
onMounted(() => {
nextTick(() => init());
window.addEventListener("resize", debouncedResize);
});
onActivated(() => {
if (chartInstance.value) {
chartInstance.value.resize();
}
});
onBeforeUnmount(() => {
chartInstance.value?.dispose();
window.removeEventListener("resize", debouncedResize);
});
defineExpose({
getInstance: () => chartInstance.value,
resize,
draw
});
</script>
src/views/business-approval/repair-approve/index.vue
View file @ 551afb22
......@@ -52,8 +52,10 @@
import citydata from '../../../assets/citydata';
import { getPlatformPage } from '@/api/platform';
import { VxeTextEllipsis, VxeTooltip } from 'vxe-pc-ui';
import { useAuthStore } from '@/stores/modules/auth';
const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, CaseStatus } = useDict("PhoneResultStatus","ReduceType", "FlowStatus", "FollowStatus", "CaseStatus");
const downloadfile = inject('download');
const { authButtonListGet } = useAuthStore(); // 获取用户权限列表
const tabledata = ref([]);
const showModal = ref(false);
......@@ -231,7 +233,7 @@
width: 120,
slots: {
default: ({ row, rowIndex }) => {
if (activeName.value === 'pending') {
if (activeName.value === 'pending' && authButtonListGet.includes('allcation_for_tenant')) {
return (
<>
<ElButton type="primary" onClick={() => changeStatus(row)}>
......
src/views/data-screen/assets/alarmList.Json 0 → 100644
View file @ 551afb22
[
{
"id": 1,
"warnMsg": "2022-04-25 14:09-23:09 预约人数 1,006 人次，已达到最大承载量的 99 %",
"label": "峨眉山"
},
{
"id": 2,
"warnMsg": "2022-04-12 19:30-20:30 预约人数 66,666 人次，已达到最大承载量的 25 %",
"label": "稻城亚丁"
},
{
"id": 3,
"warnMsg": "2022-04-09 14:09-23:09 预约人数 5,813 人次，已达到最大承载量的 3 %",
"label": "九寨沟"
},
{
"id": 4,
"warnMsg": "2022-04-07 22:39-23:39 预约人数 999 人次，已达到最大承载量的 13 %",
"label": "万里长城"
},
{
"id": 5,
"warnMsg": "2022-03-29 09:00-12:00 预约人数 123,368 人次，已达到最大承载量的 46 %",
"label": "北京故宫"
},
{
"id": 6,
"warnMsg": "2022-03-29 09:00-12:00 预约人数 869 人次，已达到最大承载量的 95 %",
"label": "阆中古城"
},
{
"id": 7,
"warnMsg": "2022-03-29 09:00-12:00 预约人数 6,985 人次，已达到最大承载量的 80 %",
"label": "乐山大佛"
},
{
"id": 8,
"warnMsg": "2022-03-29 09:00-12:00 预约人数 25,696 人次，已达到最大承载量的 70 %",
"label": "阿坝州黄龙"
},
{
"id": 9,
"warnMsg": "2022-03-29 09:00-12:00 预约人数 45,987 人次，已达到最大承载量的 55 %",
"label": "青城山"
}
]
src/views/data-screen/assets/china.json 0 → 100644
View file @ 551afb22
This diff is collapsed.
src/views/data-screen/assets/ranking-icon.ts 0 → 100644
View file @ 551afb22
This diff is collapsed.
src/views/data-screen/components/AgeRatioChart.vue 0 → 100644
View file @ 551afb22
<template>
<!-- 年龄比例 -->
<div class="echarts">
<ECharts :option="option" :resize="false" />
</div>
</template>
<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
interface ChartProp {
value: number;
name: string;
percentage: string;
}
let data: ChartProp[] = [
{ value: 200, name: "10岁以下", percentage: "16%" },
{ value: 110, name: "10 - 18岁", percentage: "8%" },
{ value: 150, name: "18 - 30岁", percentage: "12%" },
{ value: 310, name: "30 - 40岁", percentage: "24%" },
{ value: 250, name: "40 - 60岁", percentage: "20%" },
{ value: 260, name: "60岁以上", percentage: "20%" }
];
const colors = ["#F6C95C", "#EF7D33", "#1F9393", "#184EA1", "#81C8EF", "#9270CA"];
const option: ECOption = {
color: colors,
tooltip: {
show: true,
trigger: "item",
formatter: "{b} <br/>占比：{d}%"
},
legend: {
orient: "vertical",
right: "20px",
top: "15px",
itemGap: 15,
itemWidth: 14,
formatter: function (name: string) {
let text = "";
data.forEach((val: ChartProp) => {
if (val.name === name) text = " " + name + "　 " + val.percentage;
});
return text;
},
textStyle: { color: "#fff" }
},
grid: { top: "bottom", left: 10, bottom: 10 },
series: [
{
zlevel: 1,
name: "年龄比例",
type: "pie",
selectedMode: "single",
radius: [50, 90],
center: ["35%", "50%"],
startAngle: 60,
label: {
position: "inside",
show: true,
color: "#fff",
formatter: function (params) {
return (params.data as ChartProp).percentage;
},
rich: {
b: {
fontSize: 16,
lineHeight: 30,
color: "#fff"
}
}
},
itemStyle: {
shadowColor: "rgba(0, 0, 0, 0.2)",
shadowBlur: 10
},
data: data.map((val: ChartProp, index: number) => {
return {
value: val.value,
name: val.name,
percentage: val.percentage,
itemStyle: {
borderWidth: 10,
shadowBlur: 20,
borderColor: colors[index],
borderRadius: 10
}
};
})
},
{
name: "",
type: "pie",
selectedMode: "single",
radius: [50, 90],
center: ["35%", "50%"],
startAngle: 60,
data: [
{
value: 1000,
name: "",
label: {
show: true,
formatter: "{a|本日总数}",
rich: {
a: {
align: "center",
color: "rgb(98,137,169)",
fontSize: 14
}
},
position: "center"
}
}
]
}
]
};
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
src/views/data-screen/components/AnnualUseChart.vue 0 → 100644
View file @ 551afb22
<template>
<!-- 年度使用 -->
<div class="echarts">
<ECharts :option="option" :resize="false" />
</div>
</template>
<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
interface ChartProp {
label: string;
value: string[];
}
const gradientColors = ["rgba(254, 219, 101,0.1)", "rgba(0, 122, 254,0.1)", "rgba(255, 75, 122, 0.1)"];
const annualData = [
{
label: new Date().getFullYear() - 2 + "年",
value: ["184", "90", "120", "0", "30", "100", "80", "40", "20", "510", "350", "180"]
},
{
label: new Date().getFullYear() - 1 + "年",
value: ["118", "509", "366", "162", "380", "123", "321", "158", "352", "474", "154", "22"]
},
{
label: new Date().getFullYear() + "年",
value: ["548", "259", "113", "90", "69", "512", "23", "49", "28", "420", "313", "156"]
}
];
const data = {
data: annualData,
unit: annualData.map(val => val.label),
columns: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
colors: ["#FFA600", "#007AFE", "#FF4B7A"]
};
const option: ECOption = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
},
borderWidth: 0,
padding: 0,
backgroundColor: "transparent",
formatter: (params: any) => {
let str = "";
params.forEach((val: { color: string; seriesName: string; data: number }) => {
str += `
<div class="year-item">
<span class="year-dot" style="background-color: ${val.color};"></span>
<span class="year-name">${val.seriesName}</span>
<span class="year-value">${val.data >= 10000 ? (val.data / 10000).toFixed(2) + "w" : val.data}</span>
</div>
`;
});
const dom = `
<div class="annual-tooltip">
<span class="annual-month">${params[0].dataIndex + 1}月</span>
<div class="annual-list">
${str}
</div>
</div>
`;
return dom;
}
},
legend: {
right: "2%",
top: "0%",
itemWidth: 15,
itemHeight: 6,
align: "auto",
icon: "rect",
itemGap: 15,
textStyle: {
color: "#ebebf0"
}
},
grid: {
top: "20%",
left: "40",
right: "4%",
bottom: "15%"
},
xAxis: [
{
name: "(月份)",
type: "category",
boundaryGap: false,
axisLine: {
show: true,
lineStyle: {
color: "#233653"
}
},
axisLabel: {
color: "#7ec7ff",
padding: 0,
fontSize: 12,
formatter: function (data) {
return data;
}
},
splitLine: {
show: false,
lineStyle: {
color: "#192a44"
}
},
axisTick: {
show: false
},
data: data.columns
}
],
yAxis: {
name: "(人数)",
nameTextStyle: {
color: "#D6DFEA",
fontSize: 12,
padding: [0, 30, 0, 0]
},
minInterval: 1,
splitNumber: 5,
splitLine: {
show: false,
lineStyle: {
color: "#192a44"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#233653"
}
},
axisLabel: {
show: true,
color: "#B9D6D6",
padding: 0
},
axisTick: {
show: false
}
},
series: data.data.map((val: ChartProp, index: number) => {
return {
name: val.label,
type: "line",
symbol: "circle",
showSymbol: false,
smooth: true,
lineStyle: {
width: 1,
color: data.colors[index],
borderColor: data.colors[index]
},
itemStyle: {
color: data.colors[index],
borderColor: "#646ace",
borderWidth: 2
},
tooltip: {
show: true
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: data.colors[index]
},
{
offset: 1,
color: gradientColors[index]
}
],
global: false
},
shadowColor: "rgba(25,163,223, 0.3)",
shadowBlur: 20
},
data: val.value
};
})
};
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
:deep(.annual-tooltip) {
box-sizing: border-box;
width: 206px;
height: 103px;
padding: 5px 20px;
background: url("../images/contrast-bg.png") no-repeat;
background-size: 100% 100%;
.annual-month {
display: inline-block;
margin-bottom: 2px;
font-size: 10px;
color: #03b8e2;
transform: scale(0.9);
}
.annual-list {
display: flex;
flex-direction: column;
width: 100%;
.year-item {
display: flex;
align-items: center;
width: 100%;
height: 22px;
.year-dot {
width: 5px;
height: 5px;
margin: 0 2px;
border-radius: 50%;
}
.year-name,
.year-value {
font-size: 10px;
color: #03b8e2;
transform: scale(0.8);
}
.year-name {
margin: 0 2px;
}
.year-value {
display: inline-block;
width: 25%;
}
}
}
}
</style>
src/views/data-screen/components/ChinaMapChart.vue 0 → 100644
View file @ 551afb22
<template>
<!-- 中国地图 -->
<div class="map-ball"></div>
<div id="mapChart" class="echarts">
<ECharts :option="option" :resize="false" />
</div>
</template>
<script setup lang="ts">
import echarts, { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import mapJson from "../assets/china.json";
echarts.registerMap("china", mapJson as Parameters<typeof echarts.registerMap>[1]);
var geoCoordMap = {
台湾: [121.5135, 25.0308],
哈尔滨: [127.9688, 45.368],
内蒙古: [110.3467, 41.4899],
吉林: [125.8154, 44.2584],
北京市: [116.4551, 40.2539],
沈阳: [123.1238, 42.1216],
石家庄: [114.4995, 38.1006],
天津: [117.4219, 39.4189],
山西: [112.3352, 37.9413],
西安: [109.1162, 34.2004],
甘肃: [103.5901, 36.3043],
宁夏: [106.3586, 38.1775],
青海: [101.4038, 36.8207],
新疆: [87.9236, 43.5883],
西藏: [91.11, 29.97],
成都: [103.9526, 30.7617],
重庆: [108.384366, 30.439702],
青岛: [117.1582, 36.8701],
河南: [113.4668, 34.6234],
江苏: [118.8062, 31.9208],
安徽: [117.29, 32.0581],
武汉: [114.3896, 30.6628],
浙江: [119.5313, 29.8773],
福州: [119.4543, 25.9222],
江西: [116.0046, 28.6633],
湖南: [113.0823, 28.2568],
贵州: [106.6992, 26.7682],
云南: [102.9199, 25.4663],
广州: [113.12244, 23.009505],
广西: [108.479, 23.1152],
海南: [110.3893, 19.8516],
上海: [121.4648, 31.2891],
};
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
var data = [
{name:"北京市",value:300},
{name:"石家庄",value:300},
{name:"沈阳",value:300},
{name:"哈尔滨",value:300},
{name:"青岛",value:100},
{name:"成都",value:200},
{name:"武汉",value:250},
{name:"西安",value:270},
{name:"广州",value:300},
{name:"福州",value:300}
];
const option: ECOption = {
tooltip: {
trigger: "item",
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
console.log('params', params)
return params.data.name + "："
+ params.data.name + '调解中心' + '<br />'
+ '案件总数：' + params.data.value[2] + '<br />'
+ '案件总金额：' + params.data.value[2];
} else {
return params.name;
}
}
},
grid: {
left: "0px",
right: "80px",
top: "10px",
bottom: "10px"
},
geo: {
map: "china",
label: {
emphasis: {
show: false,
color: "#fff"
},
normal: {
show: false,
color: "#fff"
},
},
roam: true,
// 放大我们的地图
zoom: 1.5,
itemStyle: {
normal: {
areaColor: "rgba(43, 196, 243, 0.42)",
borderColor: "rgba(43, 196, 243, 1)",
borderWidth: 1
},
emphasis: {
areaColor: "#2B91B7"
}
}
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
fontSize: 16,
color: '#fff'
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
})),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: false
}
},
itemStyle: {
normal: {
color: '#fff',
shadowBlur: 10,
shadowColor: '#fff'
}
},
zlevel: 1
}
]
};
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
.map-ball {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 900px;
transform: translate(-50%, -50%);
img {
width: 500px;
height: 500px;
}
}
</style>
src/views/data-screen/components/HotPlateChart.vue 0 → 100644
View file @ 551afb22
<template>
<!-- 热门板块 -->
<div class="echarts-header">
<span>排名</span>
<span>景区</span>
<span>预约数量</span>
</div>
<div class="echarts">
<ECharts :option="option" :resize="false" />
</div>
</template>
<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon";
interface ChartProp {
name: string;
value: number;
percentage: string;
maxValue: number;
}
const data = [
{
value: 79999,
name: "峨眉山",
percentage: "80%",
maxValue: 100000
},
{
value: 59999,
name: "稻城亚丁",
percentage: "60%",
maxValue: 100000
},
{
value: 49999,
name: "九寨沟",
percentage: "50%",
maxValue: 100000
},
{
value: 39999,
name: "万里长城",
percentage: "40%",
maxValue: 100000
},
{
value: 29999,
name: "北京故宫",
percentage: "30%",
maxValue: 100000
}
];
const colors = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
const option: ECOption = {
grid: {
top: "5%",
left: "7%",
right: "4%",
bottom: "1%",
containLabel: true
},
xAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "white"
}
},
nameGap: 1,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
fontSize: 16
},
triggerEvent: false
},
yAxis: [
{
show: true,
data: data.map((val: ChartProp) => val.name),
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#fff",
formatter: (value: string) => {
let str = value.length > 6 ? value.slice(0, 6) + "..." : value;
let index = data.map((item: ChartProp) => item.name).indexOf(value) + 1;
return ["{" + (index > 3 ? "lg" : "lg" + index) + "|NO." + index + "}", "{title|" + str + "}"].join(" ");
},
rich: {
lg1: {
width: 60,
backgroundColor: {
image: ranking1
},
color: "#fff",
align: "center",
height: 20,
fontSize: 13
},
lg2: {
width: 60,
backgroundColor: {
image: ranking2
},
color: "#fff",
align: "center",
height: 20,
fontSize: 13
},
lg3: {
width: 60,
backgroundColor: {
image: ranking3
},
color: "#fff",
align: "center",
height: 20,
fontSize: 13
},
lg: {
width: 60,
backgroundColor: {
image: ranking4
},
color: "#fff",
align: "center",
height: 20,
fontSize: 13
},
title: {
width: 60,
fontSize: 13,
align: "center",
padding: [0, 10, 0, 15]
}
}
},
triggerEvent: false
},
{
show: true,
inverse: true,
data,
axisLabel: {
fontSize: 14,
color: "#fff",
margin: 20,
formatter: (value: number) => {
return value >= 10000 ? (value / 10000).toFixed(2) + "w" : value + "";
}
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
triggerEvent: false
}
],
series: [
{
name: "条",
type: "bar",
yAxisIndex: 0,
data,
barWidth: 12,
itemStyle: {
borderRadius: 30,
color: function (params) {
let num = colors.length;
return colors[params.dataIndex % num];
}
},
label: {
show: true,
position: [12, 0],
lineHeight: 14,
color: "#fff",
formatter: params => {
return (params.data as ChartProp).percentage;
}
}
},
{
name: "框",
type: "bar",
yAxisIndex: 1,
data: data.map((val: ChartProp) => {
if (!val.maxValue) return 5;
return val.maxValue;
}),
barWidth: 18,
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 1,
borderRadius: 15
},
silent: true
}
]
};
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: calc(100% - 56px);
}
.echarts-header {
box-sizing: border-box;
display: flex;
height: 36px;
margin: 10px 10px 0;
line-height: 36px;
background: url("../images/rankingChart-bg.png") no-repeat;
background-size: 100% 100%;
span {
width: 18%;
margin-left: 4px;
font-size: 14px;
font-weight: bold;
color: #fdbc52;
text-align: center;
&:nth-child(2) {
margin-left: 4px;
}
&:last-child {
width: 20%;
margin-left: 60px;
}
}
}
</style>
src/views/data-screen/components/MaleFemaleRatioChart.vue 0 → 100644
View file @ 551afb22
<template>
<!-- 男女比例 -->
<div class="ratio-main">
<div class="ratio-header">
<div class="man">
<span>男士</span>
<img src="../images/man.png" alt="" />
</div>
<div class="woman">
<span>女士</span>
<img src="../images/woman.png" alt="" />
</div>
</div>
<!-- echarts -->
<div class="echarts">
<ECharts :option="option" :resize="false" />
</div>
</div>
</template>
<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
interface ChartProp {
man: number;
woman: number;
}
let data: ChartProp = {
man: 0.6,
woman: 0.4
};
const option: ECOption = {
xAxis: {
type: "value",
show: false
},
grid: {
left: 0,
top: "30px",
bottom: 0,
right: 0
},
yAxis: [
{
type: "category",
position: "left",
data: ["男生"],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
{
type: "category",
position: "right",
data: ["女士"],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false,
padding: [0, 0, 40, -60],
fontSize: 12,
lineHeight: 60,
color: "rgba(255, 255, 255, 0.9)",
formatter: "{value}" + data.woman * 100 + "%",
rich: {
a: {
color: "transparent",
lineHeight: 30,
fontFamily: "digital",
fontSize: 12
}
}
}
}
],
series: [
{
type: "bar",
barWidth: 20,
data: [data.man],
z: 20,
itemStyle: {
borderRadius: 10,
color: "#007AFE"
},
label: {
show: true,
color: "#E7E8ED",
position: "insideLeft",
offset: [0, -20],
fontSize: 12,
formatter: () => {
return `男士 ${data.man * 100}%`;
}
}
},
{
type: "bar",
barWidth: 20,
data: [1],
barGap: "-100%",
itemStyle: {
borderRadius: 10,
color: "#FF4B7A"
},
label: {
show: true,
color: "#E7E8ED",
position: "insideRight",
offset: [0, -20],
fontSize: 12,
formatter: () => {
return `女士 ${data.woman * 100}%`;
}
}
}
]
};
</script>
<style lang="scss" scoped>
.ratio-main {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 40px 65px;
.ratio-header {
display: flex;
justify-content: space-between;
width: 100%;
height: 115px;
.man,
.woman {
display: flex;
flex-direction: column;
align-items: center;
width: 110px;
height: 115px;
background: url("../images/man-bg.png") no-repeat;
background-size: 100% 100%;
img {
width: 60px;
height: 60px;
margin-top: 20px;
}
span {
margin-top: 2px;
font-size: 13px;
color: #ffffff;
}
}
.woman {
background: url("../images/woman-bg.png") no-repeat;
}
}
.echarts {
width: 100%;
height: calc(100% - 115px);
}
}
</style>
src/views/data-screen/components/OverNext30Chart.vue 0 → 100644
View file @ 551afb22
<template>
<!-- 未来30天访问量趋势预测图 -->
<div class="echarts">
<ECharts :option="option" :resize="false" />
</div>
</template>
<script setup lang="ts">
import dayjs from "dayjs";
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
const initDate = (): string[] => {
const dateList: string[] = [];
let startDate = dayjs();
const endDate = startDate.add(30, "day");
while (startDate.isBefore(endDate)) {
const month = startDate.format("MM");
const day = startDate.format("DD");
dateList.push(`${month}/${day}`);
startDate = startDate.add(1, "day");
}
return dateList;
};
const data = {
unit: ["访问量"],
data: new Array(31).fill("").map(val => {
val = 77777;
return val;
})
};
const option: ECOption = {
tooltip: {
trigger: "axis",
confine: true,
formatter: params => {
let tipData = (params as { name: string; value: string }[])[0];
let html = `<div class="line-chart-bg">
<span style="">${tipData.name} <i >${tipData.value}</i> 人次访问</span>
</div>`;
return html;
},
backgroundColor: "transparent",
borderColor: "transparent",
axisPointer: { lineStyle: { type: "dashed" }, snap: true },
extraCssText: "box-shadow: none;padding:0"
},
grid: {
top: "15%",
left: "5%",
right: "5%",
bottom: "15%"
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
show: true,
symbol: ["none", "arrow"],
symbolOffset: [0, 30],
lineStyle: {
color: "#233653",
shadowOffsetX: 20,
shadowColor: "#233653"
}
},
axisLabel: {
color: "#7ec7ff",
padding: 0,
fontSize: 12,
formatter: function (data) {
return data;
}
},
splitLine: { show: false, lineStyle: { color: "#192a44" } },
axisTick: { show: false },
data: initDate()
}
],
yAxis: data.unit.map((_val: string, index: number) => {
return {
name: "(访问量)",
nameTextStyle: {
color: "#7ec7ff",
fontSize: 12,
padding: [0, 30, -4, 0]
},
minInterval: 1,
splitLine: {
show: false,
lineStyle: {
color: "#192a44"
}
},
axisLine: {
show: index === 0 ? true : false,
lineStyle: {
color: "#233653"
}
},
axisLabel: {
show: true,
color: "#7ec7ff",
padding: 0,
formatter: function (value: string) {
if (Number(value) >= 10000) {
value = Number(value) / 10000 + "w";
}
return value;
}
},
axisTick: {
show: false
}
};
}),
series: data.data.map(() => {
return {
name: "",
type: "line",
symbol: "circle",
showSymbol: false,
smooth: true,
lineStyle: {
width: 1,
color: "#707070",
borderColor: "#707070"
},
itemStyle: {
color: "#F5B348",
shadowColor: "rgba(245, 179, 72, 0.3)",
shadowBlur: 3
},
emphasis: {
scale: true
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "#846B38" },
{ offset: 0.5, color: "#403E47" },
{ offset: 1, color: "#11144E" }
],
global: false
},
shadowColor: "rgba(255, 199, 37, 0)",
shadowBlur: 20
},
data: data.data
};
})
};
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
:deep(.line-chart-bg) {
box-sizing: border-box;
display: flex;
align-items: center;
width: 180px;
height: 60px;
padding-left: 20px;
background: url("../images/line-bg.png") no-repeat;
background-size: 100% 100%;
span {
font-size: 12px;
color: rgb(255 255 255 / 80%);
i {
font-style: normal;
color: #f5b348;
}
}
}
}
</style>
src/views/data-screen/components/PlatformSourceChart.vue 0 → 100644
View file @ 551afb22
<template>
<!-- 平台来源 -->
<div class="echarts">
<ECharts :option="option" :resize="false" />
</div>
</template>
<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
interface ChartProp {
name: string;
value: number;
percentage: string;
}
const data = [
{ value: 40, name: "智慧文旅平台", percentage: "40%" },
{ value: 10, name: "携程", percentage: "10%" },
{ value: 20, name: "飞猪", percentage: "20%" },
{ value: 30, name: "其他渠道", percentage: "30%" }
];
const option: ECOption = {
grid: {
top: "0%",
left: "2%",
right: "2%",
bottom: "0%"
},
tooltip: {
trigger: "item",
formatter: "{b} : {c}人"
},
legend: {
show: true,
top: "middle",
left: "20px",
icon: "circle",
orient: "vertical",
align: "auto",
itemWidth: 10,
textStyle: {
color: "#fff"
},
itemGap: 20,
formatter: function (name: string) {
let text = "";
data.forEach((val: ChartProp) => {
if (val.name === name) {
text = name + " --- " + val.percentage;
}
});
return text;
},
data: data.map((val: ChartProp) => val.name)
},
series: [
{
type: "pie",
radius: ["60%", "85%"],
center: ["68%", "45%"],
color: ["#0E7CE2", "#FF8352", "#E271DE", "#F8456B", "#00FFFF", "#4AEAB0"],
itemStyle: {
borderColor: "#031845",
borderWidth: 10
},
data: data,
labelLine: {
show: false
},
label: {
show: false
}
},
{
type: "pie",
radius: ["20%", "28%"],
center: ["68%", "45%"],
color: ["#ffffff", "red"],
startAngle: 105,
data: [
{
value: 30,
name: "",
itemStyle: {
color: "transparent"
}
},
{
value: 5,
name: "",
itemStyle: {
color: "transparent"
}
},
{
value: 65,
name: "ddd",
itemStyle: {
color: "#ffffff"
}
}
],
silent: true,
labelLine: {
show: false
},
label: {
show: false
}
},
{
type: "pie",
radius: [0, "30%"],
center: ["68%", "45%"],
startAngle: 90,
data: [
{
value: 25,
name: "1",
itemStyle: {
color: "transparent",
borderWidth: 4,
borderColor: "#ffffff"
}
},
{
value: 75,
name: "2",
itemStyle: {
color: "transparent"
}
}
],
selectedOffset: 10,
silent: true,
labelLine: {
show: false
},
label: {
show: false
}
},
{
type: "pie",
radius: ["96%", "97%"],
center: ["68%", "45%"],
color: ["#007afe", "transparent", "#007afe", "transparent", "#007afe", "transparent"],
data: [
{ value: 17, name: "11" },
{ value: 17, name: "22" },
{ value: 17, name: "33" },
{ value: 17, name: "44" },
{ value: 17, name: "55" },
{ value: 17, name: "66" }
],
silent: true,
labelLine: { show: false },
label: { show: false }
},
{
type: "pie",
zlevel: 0,
silent: true,
radius: ["45%", "46%"],
center: ["68%", "45%"],
z: 10,
label: { show: false },
labelLine: { show: false },
data: new Array(150).fill("").map((_val: string, index: number) => {
if (index % 3 === 0) {
return {
name: (index + 1).toString(),
value: 10,
itemStyle: {
color: "#fff",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
};
} else {
return {
name: (index + 1).toString(),
value: 25,
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
};
}
})
},
{
type: "pie",
zlevel: 0,
silent: true,
radius: ["58%", "60%"],
center: ["68%", "45%"],
z: 10,
startAngle: 90,
label: { show: false },
color: ["red", "blue", "red", "blue"],
labelLine: { show: false },
data: [
{
name: "r1",
value: 25,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "rgba(51,149,191,0.5)" },
{ offset: 1, color: "rgba(51,149,191,0)" }
],
global: false
}
}
},
{
name: "r2",
value: 25,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "rgba(0,0,0,0)" },
{ offset: 1, color: "rgba(51,149,191,0.5)" }
],
global: false
}
}
},
{
name: "r3",
value: 25,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "rgba(51,149,191,0)" },
{ offset: 1, color: "rgba(51,149,191,0.5)" }
],
global: false
}
}
},
{
name: "r4",
value: 25,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "rgba(51,149,191,0.5)" },
{ offset: 1, color: "rgba(0,0,0,0)" }
],
global: false
}
}
}
]
}
]
};
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
src/views/data-screen/components/RealTimeAccessChart.vue 0 → 100644
View file @ 551afb22
<template>
<!-- 实时访问 -->
<div class="actual-total">
<div class="expect-total">可预约总量<i>999999</i>人</div>
<div class="actual-total">
<div v-for="(item, index) in actualTotal.split('')" :key="index" class="actual-item">
{{ item }}
</div>
<div class="actual-item">人</div>
</div>
</div>
<div class="echarts">
<ECharts :option="option" :resize="false" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
const actualTotal = ref("216908");
const option = {
title: [
{
text: (0.5 * 100).toFixed(0) + "%",
left: "49%",
top: "35%",
textAlign: "center",
textStyle: {
fontSize: "16",
fontWeight: "normal",
color: "#ffffff",
align: "center",
textBorderColor: "rgba(0, 0, 0, 0)",
textShadowColor: "#000",
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 1
}
},
{
text: "预约量",
left: "49%",
top: "25%",
textAlign: "center",
textStyle: {
fontSize: "15",
fontWeight: "normal",
color: "#ffffff",
align: "center",
textBorderColor: "rgba(0, 0, 0, 0)",
textShadowColor: "#000",
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 1
}
}
],
grid: {
top: "0",
left: "0px",
right: "0px",
bottom: "0",
containLabel: true
},
polar: {
radius: ["75%", "85%"],
center: ["50%", "50%"]
},
angleAxis: {
max: 120,
clockwise: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
startAngle: 188
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
type: "liquidFill",
radius: "70%",
z: 2,
center: ["50%", "50%"],
data: [0.4, 0.4, 0.4],
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "#35FAB6" },
{ offset: 1, color: "rgba(40, 209, 247,0.3)" }
],
global: false
}
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: "#31d8d5",
shadowBlur: 20,
shadowColor: "#50c1a7"
}
},
label: {
show: false
},
backgroundStyle: {
borderWidth: 1,
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{ offset: 0, color: "#0D2648" },
{ offset: 0.8, color: "#0D2648" },
{ offset: 1, color: "#228E7D" }
],
global: false
}
}
},
{
type: "pie",
radius: ["80%", "80%"],
center: ["50%", "50%"],
z: 1,
label: { show: false },
silent: true,
itemStyle: {
borderWidth: 2,
borderType: [8, 10],
borderDashOffset: 15,
borderColor: "#31d8d5",
color: "#11144e",
borderCap: "round"
},
data: [100]
},
{
type: "bar",
data: [55],
z: 10,
coordinateSystem: "polar",
roundCap: true,
color: "#31d8d5"
}
]
} as ECOption;
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: calc(100% - 50px);
}
.actual-total {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
margin-top: 10px;
margin-right: 4px;
.actual-item {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 50px;
margin-right: 1px;
font-family: MetroDF;
font-size: 32px;
color: #66ffff;
background: url("../images/total.png") no-repeat;
background-size: 100% 100%;
&:last-child {
margin-right: 0;
font-size: 22px;
}
}
.expect-total {
position: absolute;
top: -30px;
right: 5px;
font-size: 14px;
color: #ffffff;
i {
font-style: normal;
font-style: oblique;
color: #ff8100;
}
}
}
</style>
src/views/data-screen/index.scss 0 → 100644
View file @ 551afb22
.dataScreen-container {
width: 100%;
height: 100%;
background: url("./images/bg.png") no-repeat;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100% 100%;
background-size: cover;
.dataScreen-content {
position: fixed;
top: 50%;
left: 50%;
z-index: 999;
display: flex;
flex-direction: column;
overflow: hidden;
transition: all 0.3s;
transform-origin: left top;
.dataScreen-header {
display: flex;
width: 100%;
height: 38px;
.header-lf,
.header-ri {
position: relative;
width: 567px;
height: 100%;
background: url("./images/dataScreen-header-left-bg.png") no-repeat;
background-size: 100% 100%;
}
.header-ct {
position: relative;
flex: 1;
height: 100%;
.header-ct-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 82px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
line-height: 78px;
color: #05e8fe;
text-align: center;
letter-spacing: 4px;
background: url("./images/dataScreen-header-center-bg.png") no-repeat;
background-size: 100% 100%;
.header-ct-warning {
position: absolute;
bottom: -42px;
left: 50%;
width: 622px;
height: 44px;
font-family: YouSheBiaoTiHei;
font-size: 14px;
line-height: 44px;
color: #ffffff;
text-align: center;
letter-spacing: 1px;
background: url("./images/dataScreen-header-warn-bg.png") no-repeat;
background-size: 100% 100%;
transform: translateX(-50%);
}
}
}
.header-screening,
.header-download {
position: absolute;
z-index: 9;
box-sizing: border-box;
width: 136px;
height: 42px;
font-family: YouSheBiaoTiHei;
font-size: 18px;
font-weight: 400;
line-height: 42px;
color: #29fcff;
text-align: center;
cursor: pointer;
background-size: 100% 100%;
}
.header-screening {
right: 0;
padding-right: 4px;
background: url("./images/dataScreen-header-btn-bg-l.png") no-repeat;
}
.header-download {
left: 0;
padding-right: 0;
background: url("./images/dataScreen-header-btn-bg-r.png") no-repeat;
}
.header-time {
position: absolute;
top: 0;
right: 14px;
width: 310px;
font-family: YouSheBiaoTiHei;
font-size: 17px;
font-weight: 400;
line-height: 38px;
color: #05e8fe;
white-space: nowrap;
}
}
.dataScreen-main {
box-sizing: border-box;
display: flex;
flex: 1;
width: 100%;
padding: 12px 42px 20px;
.dataScreen-lf {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 394px;
height: 100%;
margin-right: 40px;
.dataScreen-top,
.dataScreen-center,
.dataScreen-bottom {
position: relative;
box-sizing: border-box;
width: 100%;
padding-top: 54px;
}
.dataScreen-top {
height: 37%;
background: url("./images/dataScreen-main-lt.png") no-repeat;
background-size: 100% 100%;
}
.dataScreen-center {
height: 30%;
background: url("./images/dataScreen-main-lc.png") no-repeat;
background-size: 100% 100%;
}
.dataScreen-bottom {
height: 27%;
margin-bottom: 0;
background: url("./images/dataScreen-main-lb.png") no-repeat;
background-size: 100% 100%;
}
}
.dataScreen-ct {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin-right: 40px;
.dataScreen-map {
position: relative;
box-sizing: border-box;
flex: 1;
width: 100%;
margin-top: 78px;
.dataScreen-map-title {
position: absolute;
top: 10px;
left: 0;
z-index: 99;
box-sizing: border-box;
display: flex;
align-items: center;
width: 270px;
height: 25px;
padding-left: 30px;
font-size: 14px;
color: #ffffff;
letter-spacing: 5px;
background: url("./images/map-title-bg.png") no-repeat;
background-size: 100% 100%;
}
.dataScreen-alarm {
position: absolute;
top: 0;
left: 0;
z-index: 99;
box-sizing: border-box;
width: 100%;
height: 76px;
padding: 2px 30px;
overflow: hidden;
background: url("./images/dataScreen-warn-bg.png") no-repeat;
background-size: 100% 100%;
.map-item {
display: flex;
align-items: center;
height: 37px;
cursor: pointer;
img {
width: 15px;
height: 15px;
margin-top: 3px;
margin-right: 6px;
}
span {
font-size: 18px;
color: rgb(255 183 0 / 74.7%);
}
}
}
}
.dataScreen-cb {
position: relative;
box-sizing: border-box;
width: 100%;
height: 252px;
padding-top: 54px;
background: url("./images/dataScreen-main-cb.png") no-repeat;
background-size: 100% 100%;
}
}
.dataScreen-rg {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 394px;
height: 100%;
.dataScreen-top,
.dataScreen-center,
.dataScreen-bottom {
position: relative;
box-sizing: border-box;
width: 100%;
padding-top: 54px;
}
.dataScreen-top {
height: 37%;
background: url("./images/dataScreen-main-rt.png") no-repeat;
background-size: 100% 100%;
}
.dataScreen-center {
height: 30%;
background: url("./images/dataScreen-main-rc.png") no-repeat;
background-size: 100% 100%;
}
.dataScreen-bottom {
height: 27%;
margin-bottom: 0;
background: url("./images/dataScreen-main-rb.png") no-repeat;
background-size: 100% 100%;
}
}
.dataScreen-main-title {
position: absolute;
top: 1px;
left: 0;
display: flex;
flex-direction: column;
span {
margin-bottom: 12px;
font-family: YouSheBiaoTiHei;
font-size: 18px;
line-height: 16px;
color: #ffffff;
letter-spacing: 1px;
}
img {
width: 68px;
height: 7px;
}
}
.dataScreen-main-chart {
width: 100%;
height: 100%;
}
}
}
}
src/views/data-screen/index.vue
View file @ 551afb22
<template>
<div class="card content-box">
<span class="text"> 数字大屏 🍓🍇🍈🍉</span>
<div class="dataScreen-container">
<div class="dataScreen-content" ref="dataScreenRef">
<div class="dataScreen-header">
<div class="header-lf">
<span class="header-screening" @click="router.push(HOME_URL)">首页</span>
</div>
<div class="header-ct">
<div class="header-ct-title">
<span>数字经营看板</span>
</div>
</div>
<div class="header-ri">
<span class="header-time">当前时间：{{ time }}</span>
</div>
</div>
<div class="dataScreen-main">
<div class="dataScreen-lf">
<div class="dataScreen-top">
<div class="dataScreen-main-title">
<span>实时游客统计</span>
<img src="./images/dataScreen-title.png" alt="" />
</div>
<div class="dataScreen-main-chart">
<RealTimeAccessChart />
</div>
</div>
<div class="dataScreen-center">
<div class="dataScreen-main-title">
<span>男女比例</span>
<img src="./images/dataScreen-title.png" alt="" />
</div>
<div class="dataScreen-main-chart">
<MaleFemaleRatioChart />
</div>
</div>
<div class="dataScreen-bottom">
<div class="dataScreen-main-title">
<span>年龄比例</span>
<img src="./images/dataScreen-title.png" alt="" />
</div>
<div class="dataScreen-main-chart">
<AgeRatioChart />
</div>
</div>
</div>
<div class="dataScreen-ct">
<div class="dataScreen-map">
<div class="dataScreen-map-title">调解中心分布点</div>
<!-- <vue3-seamless-scroll
:list="alarmData"
class="dataScreen-alarm"
:step="0.5"
:hover="true"
:limitScrollNum="3"
>
<div class="dataScreen-alarm">
<div class="map-item" v-for="item in alarmData" :key="item.id">
<img src="./images/dataScreen-alarm.png" alt="" />
<span class="map-alarm sle">{{ item.label }} 预警：{{ item.warnMsg }}</span>
</div>
</div>
</vue3-seamless-scroll> -->
<ChinaMapChart />
</div>
<div class="dataScreen-cb">
<div class="dataScreen-main-title">
<span>未来30天游客量趋势图</span>
<img src="./images/dataScreen-title.png" alt="" />
</div>
<div class="dataScreen-main-chart">
<OverNext30Chart />
</div>
</div>
</div>
<div class="dataScreen-rg">
<div class="dataScreen-top">
<div class="dataScreen-main-title">
<span>热门景区排行</span>
<img src="./images/dataScreen-title.png" alt="" />
</div>
<div class="dataScreen-main-chart">
<HotPlateChart />
</div>
</div>
<div class="dataScreen-center">
<div class="dataScreen-main-title">
<span>年度游客量对比</span>
<img src="./images/dataScreen-title.png" alt="" />
</div>
<div class="dataScreen-main-chart">
<AnnualUseChart />
</div>
</div>
<div class="dataScreen-bottom">
<div class="dataScreen-main-title">
<span>预约渠道数据统计</span>
<img src="./images/dataScreen-title.png" alt="" />
</div>
<div class="dataScreen-main-chart">
<PlatformSourceChart />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup name="systemLog"></script>
<script setup lang="ts" name="dataScreen">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { HOME_URL } from "@/config";
import { useRouter } from "vue-router";
import AgeRatioChart from "./components/AgeRatioChart.vue";
import AnnualUseChart from "./components/AnnualUseChart.vue";
import ChinaMapChart from "./components/ChinaMapChart.vue";
import HotPlateChart from "./components/HotPlateChart.vue";
import MaleFemaleRatioChart from "./components/MaleFemaleRatioChart.vue";
import OverNext30Chart from "./components/OverNext30Chart.vue";
import PlatformSourceChart from "./components/PlatformSourceChart.vue";
import RealTimeAccessChart from "./components/RealTimeAccessChart.vue";
import dayjs from "dayjs";
const router = useRouter();
const dataScreenRef = ref<HTMLElement | null>(null);
onMounted(() => {
if (dataScreenRef.value) {
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
dataScreenRef.value.style.width = `1920px`;
dataScreenRef.value.style.height = `1080px`;
}
window.addEventListener("resize", resize);
});
// 设置响应式
const resize = () => {
if (dataScreenRef.value) {
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
}
};
// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
let ww = window.innerWidth / width;
let wh = window.innerHeight / height;
return ww < wh ? ww : wh;
};
// 获取当前时间
let timer: NodeJS.Timer | null = null;
let time = ref<string>(dayjs().format("YYYY年MM月DD HH:mm:ss"));
timer = setInterval(() => {
time.value = dayjs().format("YYYY年MM月DD HH:mm:ss");
}, 1000);
onBeforeUnmount(() => {
window.removeEventListener("resize", resize);
clearInterval(timer as unknown as number);
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
src/views/property/repair-manage/index.vue
View file @ 551afb22
......@@ -20,6 +20,7 @@
<el-button
type="primary"
@click="repair"
class="mr-3"
>发起修复</el-button
>
<el-button
......
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