feat: 解决各模块的警告和报错
parent
d0a2edeb6e
commit
abbab281af
@ -0,0 +1,52 @@
|
|||||||
|
export const dataViewConfig = {
|
||||||
|
monthArr: [
|
||||||
|
{
|
||||||
|
name: "1月",
|
||||||
|
value: "1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "2月",
|
||||||
|
value: "2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "3月",
|
||||||
|
value: "3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "4月",
|
||||||
|
value: "4",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "5月",
|
||||||
|
value: "5",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "6月",
|
||||||
|
value: "6",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "7月",
|
||||||
|
value: "7",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "8月",
|
||||||
|
value: "8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "9月",
|
||||||
|
value: "9",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "10月",
|
||||||
|
value: "10",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "11月",
|
||||||
|
value: "11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "12月",
|
||||||
|
value: "12",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -1,320 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, onUnmounted, ref, watch, nextTick } from "vue";
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
|
|
||||||
// 定义组件接收的props
|
|
||||||
const props = defineProps({
|
|
||||||
xData: {
|
|
||||||
type: Array as PropType<Array<string>>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
legendArr: {
|
|
||||||
type: Array as PropType<Array<string>>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
datas: {
|
|
||||||
type: Array as PropType<Array<Array<number>>>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
colorArr: {
|
|
||||||
type: Array as PropType<Array<Array<string>>>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const chartContainer = ref<HTMLDivElement | null>(null);
|
|
||||||
let chartInstance: echarts.ECharts | null = null;
|
|
||||||
|
|
||||||
// 自定义3D形状
|
|
||||||
const CubeLeft = echarts.graphic.extendShape({
|
|
||||||
shape: { x: 0, y: 0 },
|
|
||||||
buildPath: (ctx, shape) => {
|
|
||||||
const { xAxisPoint } = shape;
|
|
||||||
const [c0, c1, c2, c3] = [
|
|
||||||
[shape.x, shape.y],
|
|
||||||
[shape.x - 12, shape.y - 6],
|
|
||||||
[xAxisPoint[0] - 12, xAxisPoint[1] - 6],
|
|
||||||
[xAxisPoint[0], xAxisPoint[1]],
|
|
||||||
];
|
|
||||||
ctx
|
|
||||||
.moveTo(c0[0], c0[1])
|
|
||||||
.lineTo(c1[0], c1[1])
|
|
||||||
.lineTo(c2[0], c2[1])
|
|
||||||
.lineTo(c3[0], c3[1])
|
|
||||||
.closePath();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const CubeRight = echarts.graphic.extendShape({
|
|
||||||
shape: { x: 0, y: 0 },
|
|
||||||
buildPath: (ctx, shape) => {
|
|
||||||
const { xAxisPoint } = shape;
|
|
||||||
const [c1, c2, c3, c4] = [
|
|
||||||
[shape.x, shape.y],
|
|
||||||
[xAxisPoint[0], xAxisPoint[1]],
|
|
||||||
[xAxisPoint[0] + 12, xAxisPoint[1] - 6],
|
|
||||||
[shape.x + 12, shape.y - 6],
|
|
||||||
];
|
|
||||||
ctx
|
|
||||||
.moveTo(c1[0], c1[1])
|
|
||||||
.lineTo(c2[0], c2[1])
|
|
||||||
.lineTo(c3[0], c3[1])
|
|
||||||
.lineTo(c4[0], c4[1])
|
|
||||||
.closePath();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const CubeTop = echarts.graphic.extendShape({
|
|
||||||
shape: { x: 0, y: 0 },
|
|
||||||
buildPath: (ctx, shape) => {
|
|
||||||
const [c1, c2, c3, c4] = [
|
|
||||||
[shape.x, shape.y],
|
|
||||||
[shape.x + 12, shape.y - 6],
|
|
||||||
[shape.x, shape.y - 12],
|
|
||||||
[shape.x - 12, shape.y - 6],
|
|
||||||
];
|
|
||||||
ctx
|
|
||||||
.moveTo(c1[0], c1[1])
|
|
||||||
.lineTo(c2[0], c2[1])
|
|
||||||
.lineTo(c3[0], c3[1])
|
|
||||||
.lineTo(c4[0], c4[1])
|
|
||||||
.closePath();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// 注册三个面图形
|
|
||||||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
|
||||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
|
||||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
|
||||||
|
|
||||||
// 初始化图表
|
|
||||||
const initChart = () => {
|
|
||||||
if (!chartContainer.value) return;
|
|
||||||
|
|
||||||
chartInstance = echarts.init(chartContainer.value);
|
|
||||||
setTimeout(() => {
|
|
||||||
chartInstance?.resize();
|
|
||||||
updateChart();
|
|
||||||
}, 500);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新图表配置
|
|
||||||
const updateChart = () => {
|
|
||||||
if (!chartInstance) return;
|
|
||||||
const series = props.datas
|
|
||||||
.map((item, index) => [
|
|
||||||
{
|
|
||||||
type: "custom",
|
|
||||||
name: props.legendArr[index],
|
|
||||||
renderItem: (params, api) => ({
|
|
||||||
type: "group",
|
|
||||||
x: (index - props.datas.length / 2) * 30 + 15,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
type: "CubeLeft",
|
|
||||||
shape: {
|
|
||||||
api,
|
|
||||||
xValue: api.value(0),
|
|
||||||
yValue: api.value(1),
|
|
||||||
x: api.coord([api.value(0), api.value(1)])[0],
|
|
||||||
y: api.coord([api.value(0), api.value(1)])[1],
|
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: props.colorArr[index % props.colorArr.length][1],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: props.colorArr[index % props.colorArr.length][0],
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "CubeRight",
|
|
||||||
shape: {
|
|
||||||
api,
|
|
||||||
xValue: api.value(0),
|
|
||||||
yValue: api.value(1),
|
|
||||||
x: api.coord([api.value(0), api.value(1)])[0],
|
|
||||||
y: api.coord([api.value(0), api.value(1)])[1],
|
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: props.colorArr[index % props.colorArr.length][1],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: props.colorArr[index % props.colorArr.length][0],
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "CubeTop",
|
|
||||||
shape: {
|
|
||||||
api,
|
|
||||||
xValue: api.value(0),
|
|
||||||
yValue: api.value(1),
|
|
||||||
x: api.coord([api.value(0), api.value(1)])[0],
|
|
||||||
y: api.coord([api.value(0), api.value(1)])[1],
|
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: props.colorArr[index % props.colorArr.length][1],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: props.colorArr[index % props.colorArr.length][1],
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
data: item,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "bar",
|
|
||||||
name: props.legendArr[index],
|
|
||||||
barWidth: 25,
|
|
||||||
// label: {
|
|
||||||
// normal: {
|
|
||||||
// show: true,
|
|
||||||
// position: "top",
|
|
||||||
// fontSize: 16,
|
|
||||||
// color: "#fff",
|
|
||||||
// offset: [0, -10],
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
itemStyle: { color: "transparent" },
|
|
||||||
data: item,
|
|
||||||
yAxisIndex: 0, // 使用左y轴
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "bar",
|
|
||||||
name: props.legendArr[index],
|
|
||||||
barWidth: 25,
|
|
||||||
itemStyle: { color: "transparent" },
|
|
||||||
data: item,
|
|
||||||
yAxisIndex: 1, // 使用左y轴
|
|
||||||
},
|
|
||||||
])
|
|
||||||
.flat();
|
|
||||||
|
|
||||||
chartInstance.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
borderWidth: 0,
|
|
||||||
backgroundColor: "rgba(8,36,68,.9)",
|
|
||||||
color: "#fff",
|
|
||||||
textStyle: { color: "#fff" },
|
|
||||||
formatter: (params) => {
|
|
||||||
let str = params[0].name + "</br>";
|
|
||||||
params.forEach((item, index) => {
|
|
||||||
if (item.seriesType === "custom") {
|
|
||||||
str += `
|
|
||||||
<div style='display:flex;justify-content:space-between;align-items:center'>
|
|
||||||
<div style='margin-right:20px;'>
|
|
||||||
<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${
|
|
||||||
props.colorArr[index % props.colorArr.length][0]
|
|
||||||
}"></span>
|
|
||||||
${item.seriesName}
|
|
||||||
</div>
|
|
||||||
<span> ${item.value ? item.value : "-"}</span>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return str;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: "5%",
|
|
||||||
right: "5%",
|
|
||||||
top: "5%",
|
|
||||||
bottom: "10%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
left: "center",
|
|
||||||
top: "90%",
|
|
||||||
itemWidth: 12, // 图例项宽度
|
|
||||||
itemHeight: 8,
|
|
||||||
textStyle: { color: "#fff", fontSize: 12 },
|
|
||||||
data: props.legendArr.map((name, index) => ({
|
|
||||||
name,
|
|
||||||
textStyle: { color: "#fff", fontSize: 12 },
|
|
||||||
itemStyle: { color: props.colorArr[index % props.colorArr.length][1] },
|
|
||||||
})),
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: props.xData,
|
|
||||||
axisLine: { lineStyle: { color: "rgba(239, 247, 253, .1)" } },
|
|
||||||
axisLabel: { fontSize: 12, color: "#fff", margin: 12 },
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
// name: "kWh",
|
|
||||||
// nameTextStyle: { color: "#fff", fontSize: 12 },
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: { type: "dashed", color: "rgba(80,112,242,0.3)" },
|
|
||||||
},
|
|
||||||
axisLabel: { textStyle: { color: "#8C8C8C" }, fontSize: 12 },
|
|
||||||
// axisLine: { lineStyle: { color: "#8C8C8C" } },
|
|
||||||
// scale: true, // 同步刻度
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// name: "kWh",
|
|
||||||
// nameTextStyle: { color: "#fff", fontSize: 12 },
|
|
||||||
splitLine: { lineStyle: { color: "transparent" } },
|
|
||||||
axisLabel: { textStyle: { color: "#8C8C8C" }, fontSize: 12 },
|
|
||||||
// axisLine: { lineStyle: { color: "#8C8C8C" } },
|
|
||||||
position: "right",
|
|
||||||
// scale: true, // 同步刻度
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const handleResize = () => {
|
|
||||||
chartInstance?.resize();
|
|
||||||
};
|
|
||||||
// 生命周期管理
|
|
||||||
onMounted(async () => {
|
|
||||||
await nextTick();
|
|
||||||
initChart();
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (chartInstance) {
|
|
||||||
chartInstance.dispose();
|
|
||||||
chartInstance = null;
|
|
||||||
chartInstance?.resize();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 响应式更新
|
|
||||||
watch(
|
|
||||||
() => props,
|
|
||||||
async () => {
|
|
||||||
await nextTick();
|
|
||||||
updateChart();
|
|
||||||
// delay(600).then(() => resize());
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div ref="chartContainer" style="width: 100%; height: 100%" />
|
|
||||||
</template>
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, onUnmounted, ref, watch } from "vue";
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
data: {
|
|
||||||
type: Array as PropType<Array<{ value: number; name: string }>>,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
colors: { type: Array as PropType<Array<string>>, default: () => [] },
|
|
||||||
});
|
|
||||||
|
|
||||||
const chartContainer = ref<HTMLDivElement | null>(null);
|
|
||||||
let chartInstance: echarts.ECharts | null = null;
|
|
||||||
const colorsArr = ['#FFCC4A','#028FF5','#06EA7C','#8500FF','#FF7D05','#00D1FF']
|
|
||||||
// 初始化图表
|
|
||||||
const initChart = () => {
|
|
||||||
if (!chartContainer.value) return;
|
|
||||||
chartInstance = echarts.init(chartContainer.value);
|
|
||||||
setTimeout(() => {
|
|
||||||
chartInstance?.resize();
|
|
||||||
updateChart();
|
|
||||||
}, 500);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新图表配置
|
|
||||||
const updateChart = () => {
|
|
||||||
if (!chartInstance) return;
|
|
||||||
|
|
||||||
chartInstance.setOption({
|
|
||||||
legend: {
|
|
||||||
type: "scroll",
|
|
||||||
orient: "vertical",
|
|
||||||
left: "70%",
|
|
||||||
align: "left",
|
|
||||||
top: "middle",
|
|
||||||
itemWidth: 16, // 图例项宽度
|
|
||||||
itemHeight: 8,
|
|
||||||
textStyle: { color: "#FFF" },
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "pie",
|
|
||||||
radius: ["30%", "80%"],
|
|
||||||
center: ["35%", "50%"],
|
|
||||||
label: { show: false },
|
|
||||||
itemStyle: {
|
|
||||||
color: (params) =>
|
|
||||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{ offset: 0, color: props.colors[params.dataIndex] },
|
|
||||||
{ offset: 1, color: colorsArr[params.dataIndex] },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
data: props.data,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 生命周期管理
|
|
||||||
onMounted(() => {
|
|
||||||
initChart();
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (chartInstance) {
|
|
||||||
chartInstance.dispose();
|
|
||||||
chartInstance = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 响应式更新
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
async () => {
|
|
||||||
await nextTick();
|
|
||||||
updateChart();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// 窗口大小监听
|
|
||||||
// onMounted(() => {
|
|
||||||
// window.addEventListener("resize", () => chartInstance?.resize());
|
|
||||||
// });
|
|
||||||
|
|
||||||
// onUnmounted(() => {
|
|
||||||
// window.removeEventListener("resize", () => chartInstance?.resize());
|
|
||||||
// });
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div ref="chartContainer" style="width: 100%; height: 100%" />
|
|
||||||
</template>
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, onUnmounted, ref, watch } from "vue";
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
data: {
|
|
||||||
type: Array as PropType<Array<{ value: number; name: string }>>,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
colors: { type: Array as PropType<Array<string>>, default: () => [] },
|
|
||||||
});
|
|
||||||
|
|
||||||
const chartContainer = ref<HTMLDivElement | null>(null);
|
|
||||||
let chartInstance: echarts.ECharts | null = null;
|
|
||||||
const colorsArr = ['#3FE3FA','#FF4D00']
|
|
||||||
// 初始化图表
|
|
||||||
const initChart = () => {
|
|
||||||
if (!chartContainer.value) return;
|
|
||||||
chartInstance = echarts.init(chartContainer.value);
|
|
||||||
setTimeout(() => {
|
|
||||||
chartInstance?.resize();
|
|
||||||
updateChart();
|
|
||||||
}, 500);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新图表配置
|
|
||||||
const updateChart = () => {
|
|
||||||
if (!chartInstance) return;
|
|
||||||
|
|
||||||
chartInstance.setOption({
|
|
||||||
legend: {
|
|
||||||
type: "scroll",
|
|
||||||
orient: "vertical",
|
|
||||||
left: "70%",
|
|
||||||
align: "left",
|
|
||||||
top: "middle",
|
|
||||||
itemWidth: 16, // 图例项宽度
|
|
||||||
itemHeight: 8,
|
|
||||||
textStyle: { color: "#FFF" },
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "pie",
|
|
||||||
radius: ["40%", "80%"],
|
|
||||||
center: ["35%", "50%"],
|
|
||||||
label: { show: false },
|
|
||||||
itemStyle: {
|
|
||||||
color: (params) =>
|
|
||||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{ offset: 0, color: props.colors[params.dataIndex] },
|
|
||||||
{ offset: 1, color: colorsArr[params.dataIndex] },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
data: props.data,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 生命周期管理
|
|
||||||
onMounted(() => {
|
|
||||||
initChart();
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (chartInstance) {
|
|
||||||
chartInstance.dispose();
|
|
||||||
chartInstance = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 响应式更新
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
async () => {
|
|
||||||
await nextTick();
|
|
||||||
updateChart();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// 窗口大小监听
|
|
||||||
// onMounted(() => {
|
|
||||||
// window.addEventListener("resize", () => chartInstance?.resize());
|
|
||||||
// });
|
|
||||||
|
|
||||||
// onUnmounted(() => {
|
|
||||||
// window.removeEventListener("resize", () => chartInstance?.resize());
|
|
||||||
// });
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div ref="chartContainer" style="width: 100%; height: 100%" />
|
|
||||||
</template>
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="flex items-center justify-center w-full h-full position-relative">
|
|
||||||
<video ref="videoRef" :controls="false" muted :src="videoUrl" width="100%" height="144"
|
|
||||||
style="object-fit: cover;" @error="handleVideoError" v-if="!isVideoError"></video>
|
|
||||||
<div class="bg_error_img" v-if="isVideoError">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div :class="{ 'bg_icon': true, 'playing': isPlaying }" v-if="!isVideoError">
|
|
||||||
<!-- {{ isPlaying }} -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
videoUrl: string;
|
|
||||||
isPlaying: boolean;
|
|
||||||
}>();
|
|
||||||
const videoRef = ref<HTMLVideoElement | null>(null);
|
|
||||||
const isVideoError = ref<boolean>(false);
|
|
||||||
|
|
||||||
const handleVideoError = () => {
|
|
||||||
console.log('handleVideoError')
|
|
||||||
isVideoError.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.bg_error_img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url("@/assets/common/load_file_error.png") no-repeat center center;
|
|
||||||
background-size: 50%;
|
|
||||||
border: 1px dashed red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg_icon {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url("@/assets/common/player_icon_1.png") no-repeat center center;
|
|
||||||
background-size: 40px;
|
|
||||||
|
|
||||||
&.playing {
|
|
||||||
background: url("@/assets/common/player_icon_2.png") no-repeat center center;
|
|
||||||
background-size: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue