德国二级页面
This commit is contained in:
123@123.com
parent
09969fa1a1
commit
2325c3c4b5
@ -361,6 +361,12 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: "Station",
|
||||
component: () => import("../views/Mechanics/child/station/index.vue"),
|
||||
},
|
||||
// 德国展会
|
||||
{
|
||||
path: "/GermanyExhibition",
|
||||
name: "GermanyExhibition",
|
||||
component: () => import("../views/Exhibition/Germany/child.vue"),
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
316
src/views/Exhibition/Germany/child.vue
Normal file
316
src/views/Exhibition/Germany/child.vue
Normal file
@ -0,0 +1,316 @@
|
||||
<!--
|
||||
* @FilePath: child.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-04-11 15:03:16
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-04-11 17:24:07
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2
|
||||
ref="headerref"
|
||||
:width="'100%'"
|
||||
:height="'100px'"
|
||||
:title="'再登工况物联管理系统'"
|
||||
:titleTip="[]"
|
||||
:typeFun="['time', 'comback']"
|
||||
:alarmType="[]"
|
||||
></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="detail">
|
||||
<BorderView :title="'设备信息'">
|
||||
<DevInfo :data="device_data" :imgSrc="getImgSrc"></DevInfo>
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="yield">
|
||||
<BorderView :title="'产出进度'">
|
||||
<DynamicChart
|
||||
style="width: 100%; height: 100%"
|
||||
:xData="xData"
|
||||
:seriesData="seriesData"
|
||||
></DynamicChart>
|
||||
</BorderView>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="speed">
|
||||
<BorderView :title="'工作速度'">
|
||||
<div class="box-lt">
|
||||
<div class="pie">
|
||||
<span>{{ speed }}</span>
|
||||
<span>rpm/min</span>
|
||||
</div>
|
||||
</div>
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="percent">
|
||||
<BorderView :title="'产品合格率'">
|
||||
<PercentChart style="width: 100%; height: 100%"></PercentChart>
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="history">
|
||||
<BorderView :title="'维保信息'">
|
||||
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
|
||||
</BorderView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan green"></div>
|
||||
<div class="left-tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan yello"></div>
|
||||
<div class="left-tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan red"></div>
|
||||
<div class="left-tip-type-item-text">停机</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
watch,
|
||||
onUpdated,
|
||||
computed,
|
||||
} from "vue";
|
||||
import header2 from "./components/header2.vue";
|
||||
import BorderView from "./components/Border.vue";
|
||||
import DevInfo from "./components/devinfo.vue";
|
||||
import DynamicChart from "./components/DynamicChart.vue";
|
||||
import PercentChart from "./components/PercentChart.vue";
|
||||
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||||
import { useMicroExhibitionStore } from "@/store/module/MicroExhibition";
|
||||
|
||||
// 设备信息
|
||||
let device_data = ref([
|
||||
{ key: "设备名称", value: "冲缝一体机", value_style: { fontSize: "20px" } },
|
||||
{ key: "机架号", value: "1171210#" },
|
||||
{ key: "工作人员", value: "张--" },
|
||||
{ key: "设备状态", value: "1" },
|
||||
{ key: "稼动率", value: "30%" },
|
||||
{ key: "花样名称", value: "0.7盾牌" },
|
||||
{ key: "加工时长", value: "23min" },
|
||||
{ key: "花样总针数", value: "300针" },
|
||||
{ key: "断线次数", value: "0次" },
|
||||
{ key: "当前针数", value: "100针" },
|
||||
]);
|
||||
let getImgSrc = computed(() => {
|
||||
// let name: string = Array.isArray(route.params.name)
|
||||
// ? route.params.name[0]
|
||||
// : route.params.name;
|
||||
let imgSrc = {
|
||||
冲缝一体机: require("./images/cfytj.png"),
|
||||
工业缝纫机: require("./images/cfytj.png"),
|
||||
};
|
||||
return imgSrc[name];
|
||||
});
|
||||
|
||||
// 获取产出进度echarts数据
|
||||
let xData = ref([
|
||||
"2024-04-15",
|
||||
"2024-04-16",
|
||||
"2024-04-17",
|
||||
"2024-04-18",
|
||||
"2024-04-19",
|
||||
"2024-04-20",
|
||||
"2024-04-21",
|
||||
]);
|
||||
let seriesData = ref([
|
||||
{
|
||||
name: "实际产量",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " 件";
|
||||
},
|
||||
},
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
|
||||
},
|
||||
{
|
||||
name: "产出进度",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " %";
|
||||
},
|
||||
},
|
||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
|
||||
},
|
||||
]);
|
||||
|
||||
// 转速
|
||||
let speed = ref(2000);
|
||||
|
||||
let config = ref({
|
||||
header: ["序号", "类型", "日期", "状态", "操作员编号"], //, '故障率'
|
||||
headerBGC: "transparent",
|
||||
oddRowBGC: "transparent",
|
||||
evenRowBGC: "transparent",
|
||||
wrap: [false, false, false, false, false],
|
||||
columnWidth: [80, 150, 145, 110, 110, 185],
|
||||
align: ["center", "center", "center", "center", "center", "center"],
|
||||
rowNum: 5,
|
||||
waitTime: 3000,
|
||||
data: [
|
||||
[1, "保养", "2024-02-10", "完成", "1001"],
|
||||
[2, "机头保养", "2024-03-14", "完成", "1002"],
|
||||
[3, "电机保养", "2024-03-25", "完成", "1003"],
|
||||
[4, "保养", "2024-04-05", "完成", "1001"],
|
||||
[5, "机头保养", "2024-04-08", "完成", "1002"],
|
||||
[6, "维护", "2024-04-15", "完成", "1001"],
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #ffffff;
|
||||
background: url("./../../../assets/img/bg.jpg") no-repeat center center / 100% 100%;
|
||||
background-color: #0e0e0e;
|
||||
position: relative;
|
||||
}
|
||||
.header {
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
.content {
|
||||
height: 980px;
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.left {
|
||||
height: 980px;
|
||||
width: 1200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.right {
|
||||
height: 980px;
|
||||
width: 710px;
|
||||
/* margin-left: 5px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.detail {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
.yield {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
}
|
||||
.speed {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
.box-lt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pie {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border: #0bc0c4 15px solid;
|
||||
border-radius: 50%;
|
||||
color: #c6e4e2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 25px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.percent {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.history {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left-tip-type {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 462px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.left-tip-type-item {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.yuan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #7cffb2;
|
||||
}
|
||||
|
||||
.yello {
|
||||
background-color: #fddd60;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #ff6e76;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #20aec5;
|
||||
}
|
||||
|
||||
.err {
|
||||
color: #ff6e76;
|
||||
}
|
||||
.dev-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 6%;
|
||||
}
|
||||
</style>
|
||||
95
src/views/Exhibition/Germany/components/Border.vue
Normal file
95
src/views/Exhibition/Germany/components/Border.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<!--
|
||||
* @FilePath: Border.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-04-11 16:16:57
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-04-11 16:25:02
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<div class="newboder">
|
||||
<!-- <img class="borderpng" src="" alt=""> -->
|
||||
<div class="title">
|
||||
<text class="title-text">{{ title }}</text>
|
||||
<div class="hr" v-if="hr_show"></div>
|
||||
</div>
|
||||
|
||||
<div class="newboder-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
let prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "设备信息",
|
||||
},
|
||||
hr_show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
// let newTitle = computed(() => {
|
||||
// return prop.title.split('').join(' ')
|
||||
// })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.newboder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: url(./../images/border.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.borderpng {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
padding-left: 10%;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 30px;
|
||||
color: rgba(0, 255, 255, 0.996078431372549);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* justify-content: center; */
|
||||
}
|
||||
.hr {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: url(./../images/hr.png) no-repeat;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.newboder-content {
|
||||
width: 100%;
|
||||
height: 84%;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
146
src/views/Exhibition/Germany/components/DynamicChart.vue
Normal file
146
src/views/Exhibition/Germany/components/DynamicChart.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<!--
|
||||
* @FilePath: DynamicChart.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-04-12 16:42:47
|
||||
* @LastEditors:
|
||||
* @LastEditTime: 2024-04-12 16:42:47
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<div ref="LChartRef" class="cc"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance, onMounted, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
let { t } = useI18n();
|
||||
|
||||
const prop = defineProps({
|
||||
xData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
|
||||
let LChartRef = ref(null);
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let charts = null;
|
||||
const setCharts = () => {
|
||||
charts = proxy.$echarts.init(LChartRef.value, "dark");
|
||||
let option = {
|
||||
backgroundColor: "transparent",
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["实际产量", "产出进度"],
|
||||
textStyle: {
|
||||
color: "#AEEEFA",
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: prop.xData,
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: "#AEEEFA",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "实际产量",
|
||||
nameTextStyle: {
|
||||
color: "#AEEEFA",
|
||||
fontSize: 12,
|
||||
},
|
||||
interval: 50,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#032E4E",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} ",
|
||||
fontSize: 12,
|
||||
color: "#AEEEFA",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "产出进度",
|
||||
nameTextStyle: {
|
||||
color: "#AEEEFA",
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#032E4E",
|
||||
},
|
||||
},
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
fontSize: 12,
|
||||
color: "#AEEEFA",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: prop.seriesData,
|
||||
};
|
||||
|
||||
charts.setOption(option);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => prop.seriesData,
|
||||
(newVal, oldVal) => {
|
||||
charts.setOption({
|
||||
series: newVal,
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
watch(
|
||||
() => prop.xData,
|
||||
(newVal, oldVal) => {
|
||||
charts.setOption({
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: prop.xData,
|
||||
},
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
setCharts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cc {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
72
src/views/Exhibition/Germany/components/PercentChart.vue
Normal file
72
src/views/Exhibition/Germany/components/PercentChart.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<!--
|
||||
* @FilePath: PdScrollBoard.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-04-13 09:00:26
|
||||
* @LastEditors:
|
||||
* @LastEditTime: 2024-04-13 09:00:26
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<div ref="PChartRef" class="cc"></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance, onMounted, watch } from "vue";
|
||||
let PChartRef = ref(null);
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let charts = null;
|
||||
const setCharts = () => {
|
||||
charts = proxy.$echarts.init(PChartRef.value, "dark");
|
||||
let option = {
|
||||
backgroundColor: "transparent",
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["03-05", "03-06", "03-07", " 03-08", "03-09", "03-10", "03-10"],
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: "#AEEEFA",
|
||||
},
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "合格率",
|
||||
nameTextStyle: {
|
||||
color: "#AEEEFA",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} %",
|
||||
fontSize: 12,
|
||||
color: "#AEEEFA",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#032E4E",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "合格率",
|
||||
data: [50, 98, 80, 60, 95, 70, 85, 86, 78, 85, 75],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
charts.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
setCharts();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.cc {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
125
src/views/Exhibition/Germany/components/devinfo.vue
Normal file
125
src/views/Exhibition/Germany/components/devinfo.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<!--
|
||||
* @FilePath: devinfo.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-04-12 11:25:44
|
||||
* @LastEditors:
|
||||
* @LastEditTime: 2024-04-12 11:25:44
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<div class="item-card-container">
|
||||
<div class="box-left">
|
||||
<div class="top-item" v-for="(item, index) in data" :style="{ width }">
|
||||
<span class="key-text">{{ item.key }}:</span>
|
||||
<span class="value-text" :style="item?.value_style">
|
||||
<div
|
||||
class="status"
|
||||
v-if="index == 3"
|
||||
:style="{ background: status_color[item.value] }"
|
||||
></div>
|
||||
<span v-else>{{ item.value }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right">
|
||||
<img :src="imgSrc" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
const imgSrc =
|
||||
"https://www.richpeace.cn/uploadfile/thumb/0b94ce08688c6389ce7b68c52ce3f8c7/880x580_auto.jpg";
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Array as any,
|
||||
default: () => [],
|
||||
},
|
||||
imgSrc: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
rowNum: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
});
|
||||
let width = computed(() => {
|
||||
return 100 / prop.rowNum + "%";
|
||||
});
|
||||
const status_color = {
|
||||
"0": "#FF6E76",
|
||||
"1": "#FDDD60",
|
||||
"2": "#7CFFB2",
|
||||
"3": "#FDDD60",
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.item-card-container {
|
||||
width: 100%;
|
||||
}
|
||||
.box-left {
|
||||
width: 600px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
float: left;
|
||||
}
|
||||
.box-right {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
/* background-color: red; */
|
||||
margin-left: 55%;
|
||||
}
|
||||
.box-right img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.key-text {
|
||||
width: 60%;
|
||||
font-size: 22px;
|
||||
color: #02c1d7;
|
||||
font-weight: 700;
|
||||
}
|
||||
.top-item {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.value-text {
|
||||
width: 40%;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #aeeefafe;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.status {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
animation: blink 1s infinite; /* 添加动画效果 */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
90% {
|
||||
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
534
src/views/Exhibition/Germany/components/header2.vue
Normal file
534
src/views/Exhibition/Germany/components/header2.vue
Normal file
@ -0,0 +1,534 @@
|
||||
<!--
|
||||
* @FilePath: header2.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-16 11:04:06
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="header2" :style="{ width: props.width, height: props.height }">
|
||||
<h1 :class="langJudge() == '简体中文' ? 'zh-title' : 'en-title'">
|
||||
{{ props.title }}
|
||||
</h1>
|
||||
<div class="slot">
|
||||
<div class="tip" style="display: flex">
|
||||
<span class="tipspan" v-for="item in props.titleTip">
|
||||
<div class="colortip" :style="{ backgroundColor: item.color }"></div>
|
||||
<span class="tipstring">{{ item.name }}</span></span
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<!-- <div v-show="typeObj.comback" class="comeBack" @click="comeBackFun">
|
||||
<i class="iconfont icon-back"></i>
|
||||
</div> -->
|
||||
<div
|
||||
v-show="typeObj.AbnormalData"
|
||||
ref="AbnormalDataRef"
|
||||
class="AbnormalData"
|
||||
@click="AbnormalDataFun"
|
||||
>
|
||||
<dv-scroll-board
|
||||
class="dv-scroll-boardclass"
|
||||
ref="tipList"
|
||||
:config="listdata"
|
||||
style="width: 30rem; height: 50px"
|
||||
/>
|
||||
<el-badge :value="AbnormalNum" class="i-badge" :hidden="AbnormalNum == 0">
|
||||
<i
|
||||
:class="
|
||||
AbnormalNum > 0
|
||||
? 'iconfont icon-baojingxinxi Abnormal-icon-yellow'
|
||||
: 'iconfont icon-baojingxinxi'
|
||||
"
|
||||
></i>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div v-show="typeObj.time" class="time">
|
||||
<p ref="Timedom">{{ timeHtml }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:virtual-ref="AbnormalDataRef"
|
||||
:visible="Abnormalpopovervisible"
|
||||
trigger="click"
|
||||
width="600px"
|
||||
placement="bottom-start"
|
||||
virtual-triggering
|
||||
>
|
||||
<ul class="popoverBOX" ref="popoverliDom" v-click-outside="noClickAbnormalDataFun">
|
||||
<li class="popoverHeader">
|
||||
<!-- <span><i class="iconfont icon-lishijilu lishijilu"></i>历史记录</span> -->
|
||||
</li>
|
||||
<li v-for="item in powerlist" :key="item.deviceId">
|
||||
{{ item.context }}
|
||||
</li>
|
||||
<li class="lookdown" v-show="onloadlist">
|
||||
<span @click="clickNextPageAlarmList">{{ t("messages.加载更多") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useNowTime from "@/hook/nowTime";
|
||||
import { ClickOutside as vClickOutside } from "element-plus";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { devListType } from "@/type/InPlantProducts";
|
||||
import { getAlarmListData, getAlarmListHistoryData } from "@/http/index";
|
||||
import { onMounted, onUnmounted, reactive, ref, unref, watch, computed } from "vue";
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||
import { useHeaderStore } from "@/store/components/header";
|
||||
import { getStoredLanguage } from "@/utils/languageStorage";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { Clock } from "@element-plus/icons-vue";
|
||||
let { t } = useI18n();
|
||||
const storeheader = useHeaderStore();
|
||||
let { timeHtml } = useNowTime();
|
||||
const router = useRouter();
|
||||
//刷新数据
|
||||
let numkey = ref(0);
|
||||
let popoverkey = ref(0);
|
||||
//历史数据dom
|
||||
let AbnormalDataRef = ref();
|
||||
let popoverRef = ref();
|
||||
let tipList = ref();
|
||||
let popoverliDom = ref();
|
||||
//历史报警数据弹窗显示
|
||||
let Abnormalpopovervisible = ref(false);
|
||||
let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
|
||||
//dialog
|
||||
let dialogdata = ref([]);
|
||||
let onloadlist = computed(() => {
|
||||
return storeheader.num > powerlist.length;
|
||||
});
|
||||
const listdata = reactive<devListType>({
|
||||
data: [],
|
||||
rowNum: 2,
|
||||
oddRowBGC: "#100C2A",
|
||||
evenRowBGC: "#100C2A",
|
||||
hoverPause: true,
|
||||
carousel: "page",
|
||||
waitTime: 3000,
|
||||
align: ["left"],
|
||||
});
|
||||
let AbnormalNum = ref(0);
|
||||
//弹窗历史数据
|
||||
let powerlist = reactive([]);
|
||||
let props = defineProps<{
|
||||
width: string;
|
||||
height: string;
|
||||
title: string;
|
||||
titleTip: any;
|
||||
typeFun: any[];
|
||||
alarmType: any[];
|
||||
}>();
|
||||
const typeObj = reactive({
|
||||
comback: false,
|
||||
AbnormalData: false,
|
||||
time: false,
|
||||
});
|
||||
const AbnormalType = reactive({
|
||||
pageSize: 5,
|
||||
pageNum: 1,
|
||||
type: "",
|
||||
});
|
||||
let comeBackFun = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
const changeAbnormalData = (val: any) => {
|
||||
tipList.value.updateRows(val.data, { ...val });
|
||||
};
|
||||
let AbnormalDataFun = () => {
|
||||
//该函数执行优先级低于noClickAbnormalDataFun
|
||||
//Abnormalpopovervisibled代表弹窗是否已经显示
|
||||
// 判断弹窗是否打开如果打开就关闭 关闭就打开
|
||||
if (Abnormalpopovervisible.value) {
|
||||
Abnormalpopovervisible.value = false;
|
||||
} else {
|
||||
//关闭情况下判断是否点击了非弹窗位置如果是则仍然关闭 否则打开
|
||||
if (AbnormalpopovervisibleCtrl.value) {
|
||||
Abnormalpopovervisible.value = false;
|
||||
} else {
|
||||
Abnormalpopovervisible.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
let noClickAbnormalDataFun = () => {
|
||||
//该函数执行优先级高于AbnormalDataFun
|
||||
// 判断弹窗是否打开如果打开并且我点击了非弹窗位置则ctrl为true否则为false
|
||||
if (Abnormalpopovervisible.value) {
|
||||
AbnormalpopovervisibleCtrl.value = true;
|
||||
} else {
|
||||
AbnormalpopovervisibleCtrl.value = false;
|
||||
}
|
||||
|
||||
Abnormalpopovervisible.value ? (Abnormalpopovervisible.value = false) : "";
|
||||
};
|
||||
function typeStatus() {
|
||||
if (props.typeFun.length == 0) {
|
||||
return;
|
||||
}
|
||||
props.typeFun.forEach((res) => {
|
||||
for (let key in typeObj) {
|
||||
if (res == key) {
|
||||
typeObj[key] = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function langJudge() {
|
||||
let lang = getStoredLanguage();
|
||||
if (lang) {
|
||||
return lang;
|
||||
} else {
|
||||
return "简体中文";
|
||||
}
|
||||
}
|
||||
|
||||
//判断是否显示对应组件后所做操作
|
||||
watch(
|
||||
() => typeObj,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.AbnormalData) {
|
||||
AbnormalType.type = props.alarmType.join(",");
|
||||
getAlarmListDatafun();
|
||||
// connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||
setAlarmscrollBoardList();
|
||||
}
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
//获取异常信息接口数据
|
||||
async function getAlarmListDatafun() {
|
||||
let result: any = await getAlarmListData(AbnormalType);
|
||||
|
||||
if (result.code == 200) {
|
||||
storeheader.setDataList(result);
|
||||
}
|
||||
}
|
||||
//单机显示更多历史报警数据
|
||||
function clickNextPageAlarmList() {
|
||||
// if(storeheader.num<=powerlist.length){
|
||||
// onloadlist.value=false
|
||||
// return
|
||||
// }
|
||||
AbnormalType.pageNum++;
|
||||
getAlarmListDatafun();
|
||||
}
|
||||
//接受历史报警数据
|
||||
watch(
|
||||
() => storeheader.AlarmpopoverList,
|
||||
(newVal, oldVal) => {
|
||||
newVal.forEach((res) => {
|
||||
powerlist.push(res);
|
||||
});
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
//接受历史报警数据滚动效果栏
|
||||
watch(
|
||||
() => storeheader.AlarmscrollBoardList,
|
||||
(newVal, oldVal) => {
|
||||
// newVal.forEach(res=>{
|
||||
// let e=res.context.split('，')
|
||||
// listdata.data.push([e[0]])
|
||||
// listdata.data.push([e[1]])
|
||||
// })
|
||||
// changeAbnormalData(listdata)
|
||||
// numkey.value++
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
let AlarmscrollTime = null;
|
||||
//每隔15秒钟替换一次组件数据进行轮播
|
||||
function setAlarmscrollBoardList() {
|
||||
let start = 0;
|
||||
let end = 4;
|
||||
|
||||
let i = 0;
|
||||
setTimeout(() => {
|
||||
storeheader.AlarmscrollBoardList.slice(0, 5).forEach((element) => {
|
||||
let e = element.context.split("，");
|
||||
listdata.data.push(...[[e[0]], [e[1]]]);
|
||||
i++;
|
||||
});
|
||||
|
||||
end = end + 5;
|
||||
start = i >= 5 ? 5 : storeheader.AlarmscrollBoardList.length - 1;
|
||||
start <= 0 ? (start = 0) : "";
|
||||
}, 1000);
|
||||
|
||||
AlarmscrollTime = setInterval(() => {
|
||||
if (i == 0) {
|
||||
listdata.data = [];
|
||||
}
|
||||
i = 0;
|
||||
if (storeheader.AlarmscrollBoardList.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (storeheader.AlarmscrollBoardList.length - 1 < end) {
|
||||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||||
}
|
||||
for (start; start <= end; start++) {
|
||||
// console.log(storeheader.AlarmscrollBoardList[start],start,end);
|
||||
// console.log(storeheader.AlarmscrollBoardList.length-1);
|
||||
let listcontent = storeheader.AlarmscrollBoardList[start]?.context.split("，");
|
||||
|
||||
listdata.data.push(...[[listcontent[0]], [listcontent[1]]]);
|
||||
}
|
||||
changeAbnormalData(listdata);
|
||||
numkey.value++;
|
||||
end = end + 5;
|
||||
//如果下次数据剩一个则只拿一条数据
|
||||
if (start == storeheader.AlarmscrollBoardList.length - 1) {
|
||||
// console.log('进入了2');
|
||||
start = storeheader.AlarmscrollBoardList.length - 1;
|
||||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||||
}
|
||||
//如果剩余数据不足5个则拿出剩余数据
|
||||
if (
|
||||
end > storeheader.AlarmscrollBoardList.length - 1 &&
|
||||
start <= storeheader.AlarmscrollBoardList.length - 1
|
||||
) {
|
||||
// console.log('进入了3');
|
||||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||||
}
|
||||
// 如果全部超出则从头拿
|
||||
if (
|
||||
start > storeheader.AlarmscrollBoardList.length - 1 &&
|
||||
end > storeheader.AlarmscrollBoardList.length - 1
|
||||
) {
|
||||
// console.log('进入了4',start,end,storeheader.AlarmscrollBoardList.length-1,storeheader.AlarmscrollBoardList);
|
||||
start = 0;
|
||||
end = 4;
|
||||
}
|
||||
}, 15000);
|
||||
}
|
||||
//接受历史报警数据量
|
||||
watch(
|
||||
() => storeheader.num,
|
||||
(newVal, oldVal) => {
|
||||
AbnormalNum.value = newVal;
|
||||
numkey.value++;
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
function HeadergetWebsocket(val) {
|
||||
let data = null;
|
||||
try {
|
||||
data = JSON.parse(val);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
props.alarmType.some((e) => {
|
||||
return e == data.type;
|
||||
})
|
||||
) {
|
||||
// console.log(props.alarmType);
|
||||
// console.log(props.alarmType.some(e=>{return e==data.type}));
|
||||
storeheader.changeDataList(data);
|
||||
}
|
||||
}
|
||||
function HeadererrWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
onMounted(() => {
|
||||
//判断需要显示出来的数据
|
||||
typeStatus();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// closeWebsocket();
|
||||
storeheader.resetData();
|
||||
AlarmscrollTime ? clearInterval(AlarmscrollTime) : "";
|
||||
});
|
||||
defineExpose({
|
||||
changeAbnormalData,
|
||||
HeadergetWebsocket,
|
||||
HeadererrWebsocket,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/assets/css/iconfont.css";
|
||||
.header2 {
|
||||
width: 100%;
|
||||
background-image: url(@/assets/header/header1.png);
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.header2-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
/* height: 100%; */
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
.zh-title {
|
||||
margin-top: 6px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
.en-title {
|
||||
font-size: 2rem;
|
||||
max-width: 600px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
/* line-height: 80px; */
|
||||
}
|
||||
/* .header2 p {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
bottom: 20px;
|
||||
font-size: 20px;
|
||||
} */
|
||||
.slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 50px 10px 10px 10px;
|
||||
}
|
||||
|
||||
/* .red {
|
||||
background-color: rgb(228, 57, 97);
|
||||
}
|
||||
.blue {
|
||||
background-color: rgb(32, 174, 197);
|
||||
} */
|
||||
.colortip {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.tipstring {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.tip {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.tipspan {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.comeBack {
|
||||
position: absolute;
|
||||
/* width: 2rem;
|
||||
height: 2rem; */
|
||||
bottom: 10%;
|
||||
left: 1.5rem;
|
||||
font-size: 3rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.comeBack > i {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.AbnormalData {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* width: 2rem;
|
||||
height: 2rem; */
|
||||
bottom: 20%;
|
||||
right: 1%;
|
||||
font-size: 3rem;
|
||||
color: #fff;
|
||||
}
|
||||
.AbnormalData:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.AbnormalData > span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.popoverBOX {
|
||||
max-height: 15rem;
|
||||
font-size: 18px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.popoverBOX li {
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
.lookdown {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1c78c2;
|
||||
}
|
||||
.lookdown:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
width: 20rem;
|
||||
height: 2rem;
|
||||
bottom: 30%;
|
||||
left: 4.2rem;
|
||||
font-size: 25px;
|
||||
}
|
||||
.i-badge {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
.i-badge > i {
|
||||
font-size: 3rem;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
/* .dv-scroll-board /deep/ .ceil {
|
||||
font-size: 1.2rem;
|
||||
} */
|
||||
.dv-scroll-boardclass :deep(.ceil) {
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-popper.is-dark:deep() {
|
||||
background: #14274b !important;
|
||||
}
|
||||
.el-popover.el-popper:deep() {
|
||||
background: #14274b !important;
|
||||
}
|
||||
.Abnormal-icon-yellow {
|
||||
color: #ddb14f;
|
||||
}
|
||||
.lishijilu {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
.popoverHeader {
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.popoverHeader span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
/* border-radius: 50px;
|
||||
background: linear-gradient(315deg, #404040, #4c4c4c); */
|
||||
/* box-shadow: -20px -20px 60px #3c3c3c, 20px 20px 60px #525252; */
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/Exhibition/Germany/images/border.png
Normal file
BIN
src/views/Exhibition/Germany/images/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
src/views/Exhibition/Germany/images/cfytj.png
Normal file
BIN
src/views/Exhibition/Germany/images/cfytj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
BIN
src/views/Exhibition/Germany/images/gyfrj.png
Normal file
BIN
src/views/Exhibition/Germany/images/gyfrj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
src/views/Exhibition/Germany/images/hr.png
Normal file
BIN
src/views/Exhibition/Germany/images/hr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
12
src/views/Exhibition/Germany/images/u290.svg
Normal file
12
src/views/Exhibition/Germany/images/u290.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="61px" height="87px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="42" x2="58" y2="42" id="LinearGradient191">
|
||||
<stop id="Stop192" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
|
||||
<stop id="Stop193" stop-color="#00ffff" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -1847 -1012 )">
|
||||
<path d="M 57.58803112269304 0.15649613942387075 L 26.45614035087719 1.6000000000000454 L 1 30.799999999999955 L 1 83.20000000000005 " stroke-width="2" stroke="url(#LinearGradient191)" fill="none" transform="matrix(1 0 0 1 1848 1013 )" />
|
||||
</g>
|
||||
</svg>
|
||||
12
src/views/Exhibition/Germany/images/u305.svg
Normal file
12
src/views/Exhibition/Germany/images/u305.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="73px" height="88px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="42.5" x2="70" y2="42.5" id="LinearGradient194">
|
||||
<stop id="Stop195" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
|
||||
<stop id="Stop196" stop-color="#00ffff" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -666 -592 )">
|
||||
<path d="M 69.58823529411764 1 L 30.88235294117647 1 L 0 35.19718310049065 L 0 85 " stroke-width="2" stroke="url(#LinearGradient194)" fill="none" transform="matrix(1 0 0 1 667 593 )" />
|
||||
</g>
|
||||
</svg>
|
||||
Loading…
Reference in New Issue
Block a user