mt-fe-group/11-mes-new
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

init

Browse Source
This commit is contained in:
朱菊兰
2022-11-07 14:54:47 +08:00
commit 8cfe73aaef
1227 changed files with 194899 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/views/3DOverview/components/LeftContentEquipmentCheck.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<div class="left-content-equipment-check">
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
<div class="el-table-wrapper">
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
<el-table
key="LeftContentEquipmentCheck1"
border
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="设备名称" prop="eqName" />
<el-table-column label="所属产线" prop="pl" />
<el-table-column label="提示等级" prop="warningLevel" />
<el-table-column label="提示等级" prop="checkContent" />
</el-table>
</div>
<!-- <div class="el-table-wrapper">
<el-table
key="LeftContentEquipmentCheck2"
border
:data="tableData2"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="设备名称" prop="eqName" />
<el-table-column label="所属产线" prop="pl" />
<el-table-column label="提示等级" prop="warningLevel" />
<el-table-column label="提示等级" prop="checkContent" />
</el-table>
</div> -->
</div>
</template>
<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'
const tableProps = [
{ prop: 'eqName', label: '设备名称', width: 120, resizable: false },
{ prop: 'pl', label: '所属产线', width: 120, resizable: false },
{ prop: 'warningLevel', label: '提示等级', width: 120, resizable: false },
{ prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
]
const tableData = [
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
// { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
// { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
]
const tableData2 = [
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
// { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
// { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
]
export default {
name: 'LeftContentEquipmentCheck',
components: {},
data() {
return { tableProps, tableData, tableData2 }
},
created() {},
mounted() {},
methods: {}
}
</script>
<style scoped>
.left-content-equipment-check {
display: flex;
gap: calc(100vmin / 1920 * 36);
}
.el-table-wrapper {
flex: 1;
}
.left-content-equipment-check > div {
overflow: hidden;
overflow-x: scroll;
}
.el-table-wrapper >>> * {
background: transparent;
}
.el-table-wrapper >>> .el-table::before,
.el-table-wrapper >>> .el-table--group::after,
.el-table-wrapper >>> .el-table--border::after {
background: transparent;
}
.el-table-wrapper >>> .el-table {
font-size: 8px;
background-color: transparent;
color: #fff9;
border: 0;
}
.el-table-wrapper >>> .el-table th.is-leaf,
.el-table-wrapper >>> .el-table td {
border-color: #0d1728;
padding: 0;
}
.el-table__row--striped:hover > td,
.el-table-wrapper >>> .el-table__row:hover > td {
background-color: rgba(79, 114, 136, 0.29) !important;
}
.el-table-wrapper >>> table {
border: unset;
}
.el-table-wrapper >>> thead {
color: #fff;
}
.el-table-wrapper >>> tr {
background: unset;
}
.el-table-wrapper >>> tbody td > div,
.el-table-wrapper >>> thead th > div {
white-space: nowrap;
}
.el-table-wrapper >>> th,
.el-table-wrapper >>> td {
padding: 0;
}
.el-table-wrapper >>> tbody > tr:nth-child(even) {
background: rgba(76, 97, 123, 0.2);
}
</style>

41
src/views/3DOverview/components/LeftContentMonitor.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div class="left-content-monitoring">
<div v-for="imgUrl in images" :key="imgUrl" class="monitor-pic" :style="{ backgroundImage: `url(${imgUrl})` }" />
</div>
</template>
<script>
import { default as pic1 } from './assets/monitor/1.png'
import { default as pic2 } from './assets/monitor/2.png'
import { default as pic3 } from './assets/monitor/3.png'
export default {
name: '',
data() {
return {
images: [pic1, pic2, pic3]
}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style scoped>
.left-content-monitoring {
width: 100%;
/* height: calc(100% - 48px); */
display: flex;
gap: calc(100vw / 1920 * 16);
}
.monitor-pic {
flex: 1;
height: 128px;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
</style>

134
src/views/3DOverview/components/LeftContentOrder.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<div class="left-content-equipment-check">
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
<div class="el-table-wrapper">
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
<el-table
key="LeftContentOrder1"
border
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="规格" prop="specs" :resizable="true" />
<el-table-column label="完成度" prop="finished" :resizable="true" />
</el-table>
</div>
<!-- <div class="el-table-wrapper">
<el-table
key="LeftContentOrder2"
border
:data="tableData2"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="规格" prop="specs" :resizable="true" />
<el-table-column label="完成度" prop="finished" :resizable="true" />
</el-table>
</div> -->
</div>
</template>
<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'
const tableData = [
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
// { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
]
const tableData2 = [
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
// { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
]
export default {
name: 'LeftContentOrder',
components: {},
data() {
return { tableData, tableData2 }
},
created() {},
mounted() {},
methods: {}
}
</script>
<style scoped>
.left-content-equipment-check {
display: flex;
gap: calc(100vw / 1920 * 16);
}
.el-table-wrapper {
flex: 1;
}
.left-content-equipment-check > div {
overflow: hidden;
overflow-x: scroll;
}
.el-table-wrapper >>> * {
background: transparent;
}
.el-table-wrapper >>> .el-table::before,
.el-table-wrapper >>> .el-table--group::after,
.el-table-wrapper >>> .el-table--border::after {
background: transparent;
}
.el-table-wrapper >>> .el-table {
font-size: 8px;
background-color: transparent;
color: #fff9;
border: 0;
}
.el-table-wrapper >>> .el-table th.is-leaf,
.el-table-wrapper >>> .el-table td {
border-color: #0d1728;
padding: 0;
}
.el-table__row--striped:hover > td,
.el-table-wrapper >>> .el-table__row:hover > td {
background-color: rgba(79, 114, 136, 0.29) !important;
}
.el-table-wrapper >>> table {
border: unset;
}
.el-table-wrapper >>> thead {
color: #fff;
}
.el-table-wrapper >>> tr {
background: unset;
}
.el-table-wrapper >>> tbody td > div,
.el-table-wrapper >>> thead th > div {
white-space: nowrap;
}
.el-table-wrapper >>> th,
.el-table-wrapper >>> td {
padding: 0;
}
.el-table-wrapper >>> tbody > tr:nth-child(even) {
background: rgba(76, 97, 123, 0.2);
}
</style>

72
src/views/3DOverview/components/LeftContentPublicConsume.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<div class="public-consume__inner">
<div class="water-area">
<TechyBarChart
:id="'water-chart'"
key="waterchart"
title="水"
:x-data="['自来水', '纯水', '循环水']"
:series-data="[8.2, 10, 6.1]"
/>
</div>
<div class="elec-area">
<TechyLineChart :id="'elec-chart'" key="elecchart" title="电" />
</div>
<div class="elec-gen-area">
<TechyLineChart :id="'elec-gen-chart'" key="elecgenchart" title="发电" />
</div>
<div class="gas-area">
<TechyBarChart
:id="'gas-chart'"
key="gaschart"
title="气"
:x-data="['天然气', '氧气', 'CDA']"
:series-data="[8.2, 10, 6.1]"
/>
</div>
</div>
</template>
<script>
import TechyBarChart from './TechyBarChart.vue'
import TechyLineChart from './TechyLineChart.vue'
export default {
name: 'LeftContentPublicConsume',
components: { TechyBarChart, TechyLineChart },
data() {
return {}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style scoped>
.public-consume__inner {
height: calc(100% - 32px);
width: 100%;
display: grid;
grid-template-areas:
'water elec elec gas'
'water elec-gen elec-gen gas';
}
.water-area {
grid-area: water;
}
.gas-area {
grid-area: gas;
}
.elec-area {
grid-area: elec;
}
.elec-gen-area {
grid-area: elec-gen;
}
/* .elec-area,.elec-gen-area {
max-height: calc((100% - 32px) / 2 - 16px);
} */
</style>

108
src/views/3DOverview/components/RightContentAlert.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<div class="right-content-alert">
<div class="el-table-wrapper">
<el-table
key="RightContentAlertTable"
border
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="故障等级" prop="level" :resizable="true" />
<el-table-column label="故障内容" prop="content" :resizable="true" />
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" />
</el-table>
</div>
</div>
</template>
<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'
const tableData = [
{ eqName: 'A1下片机', plName: 'A', content: '123456', level: 3, duration: 10 },
{ eqName: '磨片机', plName: 'A', content: '123456', level: 2, duration: 20 },
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', level: 1, duration: 30 },
{ eqName: '上片机', plName: 'C', content: 'xxx', level: 3, duration: 1 },
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', level: 2, duration: 2 }
]
export default {
name: 'RightContentAlert',
components: {},
data() {
return { tableData }
},
created() {},
mounted() {},
methods: {}
}
</script>
<style scoped>
.left-content-equipment-check {
display: flex;
gap: calc(100vw / 1920 * 16);
}
.el-table-wrapper {
flex: 1;
}
.left-content-equipment-check > div {
overflow: hidden;
overflow-x: scroll;
}
.el-table-wrapper >>> * {
background: transparent;
}
.el-table-wrapper >>> .el-table::before,
.el-table-wrapper >>> .el-table--group::after,
.el-table-wrapper >>> .el-table--border::after {
background: transparent;
}
.el-table-wrapper >>> .el-table {
font-size: 8px;
background-color: transparent;
color: #fff9;
border: 0;
}
.el-table-wrapper >>> .el-table th.is-leaf,
.el-table-wrapper >>> .el-table td {
border-color: #0d1728;
padding: 0;
}
.el-table__row--striped:hover > td,
.el-table-wrapper >>> .el-table__row:hover > td {
background-color: rgba(79, 114, 136, 0.29) !important;
}
.el-table-wrapper >>> table {
border: unset;
}
.el-table-wrapper >>> thead {
color: #fff;
}
.el-table-wrapper >>> tr {
background: unset;
}
.el-table-wrapper >>> tbody td > div,
.el-table-wrapper >>> thead th > div {
white-space: nowrap;
}
.el-table-wrapper >>> th,
.el-table-wrapper >>> td {
padding: 0;
}
.el-table-wrapper >>> tbody > tr:nth-child(even) {
background: rgba(76, 97, 123, 0.2);
}
</style>

98
src/views/3DOverview/components/RightContentFaultAnalysis.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div class="right-content-quality-analysis">
<div :id="id" ref="fault-pie-chart" class="fault-pie-chart" />
</div>
</template>
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'RightContentFaultAnalysis',
mixins: [resize],
props: {
id: {
type: String,
default: 'default-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
option: {
title: {
left: 'center',
top: '30%',
text: '总共',
textStyle: {
color: '#888',
fontSize: 10
},
subtext: 880,
subtextStyle: {
color: '#fff',
fontSize: 24
}
},
series: [
{
name: 'Fault Analysis Chart',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {},
emphasis: {
label: {
show: true,
fontSize: '12'
}
},
data: Array(7)
.fill(0)
.map((_, index) => ({ value: Math.floor(Math.random() * 100), name: '设备' + index }))
}
]
}
}
},
mounted() {
this.$nextTick(() => {
console.log('here...')
if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.right-content-quality-analysis {
height: calc(100% - 32px);
}
.fault-pie-chart {
height: 100%;
width: 100%;
}
.fault-pie-chart >>> div {
width: 100% !important;
}
</style>

149
src/views/3DOverview/components/RightContentProductRate.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<div style="height: 10vh; width: 100%; ">
<div :id="id" ref="techy-line-chart" class="techy-chart" />
</div>
</template>
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'ProductRateLineChart',
mixins: [resize],
props: {
id: {
type: String,
default: 'default-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
option: {
color: ['#59CBE8', '#E93CAC', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
grid: {
top: '5%',
left: 0,
right: '5%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: Array(12)
.fill(0)
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
axisTick: {
show: false
},
axisLabel: {
fontSize: 8,
color: '#fffa'
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisLabel: {
fontSize: 10,
color: '#fffa',
formatter: '{value} %'
},
axisTick: { show: false },
splitLine: {
lineStyle: {
color: '#fff3'
}
}
},
series: [
{
name: '产线1',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线2',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线3',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线4',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线5',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
}
]
}
}
},
mounted() {
this.$nextTick(() => {
console.log('here...')
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.techy-chart {
height: 100%;
width: 100%;
}
.techy-chart >>> div {
width: 100% !important;
}
</style>

77
src/views/3DOverview/components/RightContentQualityAnalysis.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div class="right-content-quality-analysis">
<div v-for="item in datalist" :key="item.name" class="analysis-item">
<span class="absolute" :style="{ backgroundColor: item.color }" />
<span>{{ item.name }}</span>
<span>{{ item.value }}</span>
</div>
</div>
</template>
<script>
export default {
name: 'RightContentQualityAnalysis',
props: {},
data() {
return {
datalist: [
{ name: '热端', value: 20, color: '#0b88ff' },
{ name: '原片', value: 30, color: '#0bffa6' },
{ name: '上片', value: 27, color: '#e3ff0b' },
{ name: '磨边', value: 23, color: '#950bff' },
{ name: '原片', value: 30, color: '#0bffa6' },
{ name: '原片', value: 30, color: '#0bffa6' },
{ name: '上片', value: 27, color: '#e3ff0b' },
{ name: '磨边', value: 23, color: '#950bff' },
{ name: '镀膜', value: 10, color: '#ff0bc2' },
{ name: '清晰', value: 66, color: '#ff7d0b' }
]
}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style scoped>
.right-content-quality-analysis {
height: calc(100% - 32px);
overflow: hidden;
overflow-y: scroll; /** 右边会有多的padding给滑道 */
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: min-content;
gap: calc(100vw / 1920 * 8);
justify-content: end;
}
.analysis-item {
padding-left: 16px;
font-size: 12px;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: space-between;
color: #fffc;
position: relative;
}
.analysis-item::before {
content: '';
position: absolute;
left: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: attr(data-color color, blue);
}
.absolute {
position: absolute;
width: 8px;
height: 8px;
left: 3px;
border-radius: 50%;
}
</style>

127
src/views/3DOverview/components/RightContentRealtimeProduction.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<div style="height: 12vh; width: 100%; ">
<div :id="id" ref="techy-line-chart" class="techy-chart" />
</div>
</template>
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'RealtimeProductionHorizontalBarChart',
mixins: [resize],
props: {
id: {
type: String,
default: 'default-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
option: {
color: ['#FF7345', '#52FFF1', '#6A6E87', '#9452FFA6'],
grid: {
top: 0,
left: 0,
right: '5%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.001],
axisTick: {
show: false
},
axisLabel: {
fontSize: 8
// rotate: 10
},
axisLine: {
show: false,
lineStyle: {
color: '#fffa'
}
},
splitLine: {
lineStyle: {
color: '#fff3'
}
}
},
yAxis: {
type: 'category',
data: ['产线1', '产线2', '产线3', '产线4', '产线5', '产线6'],
axisLine: {
show: false
},
axisLabel: {
fontSize: 10,
color: '#fffa'
},
axisTick: { show: false },
splitLine: {
lineStyle: {
color: '#fffa'
}
}
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 5,
data: Array(6)
.fill(0)
.map(value => Math.floor(Math.random() * 1000))
},
{
name: '2012',
type: 'bar',
barWidth: 5,
data: Array(6)
.fill(0)
.map(value => Math.floor(Math.random() * 1000))
}
]
}
}
},
mounted() {
this.$nextTick(() => {
console.log('here...')
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.techy-chart {
height: 100%;
width: 100%;
}
.techy-chart >>> div {
width: 100% !important;
}
</style>

136
src/views/3DOverview/components/TechyBarChart.vue Normal file
View File

@@ -0,0 +1,136 @@
<template>
<div :id="id" ref="techy-bar-chart" class="techy-chart" />
</template>
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'TechyBarChart',
mixins: [resize],
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
inject: ['resizeStatus'],
/** End Fn.1 */
props: {
id: {
type: String,
default: 'default-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
const colors = ['#61A5E8', '#7ECF51', '#EECB5F']
return {
chart: null,
option: {
// default option
grid: {
top: '20%',
left: '8%',
bottom: '16px',
right: '8%'
},
title: {
text: this.title,
left: 'center',
textStyle: {
color: '#fffa',
fontSize: 12
}
},
xAxis: {
type: 'category',
data: this.xData,
axisTick: {
show: false
},
axisLabel: {
fontSize: 8
// rotate: 10
},
axisLine: {
lineStyle: {
color: '#fffa'
}
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisLabel: {
fontSize: 10,
align: 'left',
color: '#fffa'
},
axisTick: { show: false },
splitLine: {
lineStyle: {
color: '#fffa'
}
}
},
series: {
type: 'bar',
barMaxWidth: 30,
data: this.seriesData.map((value, index) => ({
itemStyle: {
color: colors[index]
},
value
}))
}
}
}
},
computed: {
shouldResize() {
return this.resizeStatus()
}
},
watch: {
shouldResize(val, oldVal) {
setTimeout(() => {
this.chart.resize()
}, 250)
}
},
mounted() {
this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['techy-bar-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.techy-chart {
height: 100%;
width: 100%;
}
.techy-chart >>> div {
width: 100% !important;
height: 100% !important;
}
</style>

20
src/views/3DOverview/components/TechyBox.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div class="techy-box">
<slot />
</div>
</template>
<script>
export default {}
</script>
<style scoped>
.techy-box {
background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
display: inline-block;
height: 100%;
width: 100%;
border-radius: .25rem;
}
</style>

141
src/views/3DOverview/components/TechyContainer.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<div class="techy-container">
<template v-if="showCorner">
<div class="line top left vertical" />
<div class="line top left horizontal" />
<div class="line top right vertical" />
<div class="line top right horizontal " />
<div class="line bottom right horizontal" />
<div class="line bottom right vertical" />
<div class="line bottom left vertical" />
<div class="line bottom left horizontal" />
</template>
<div class="container-title-wrapper">
<span class="container-icon" v-html="icon" />
<span class="container-title">{{ title }}</span>
</div>
<slot />
</div>
</template>
<script>
const defaultIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>质量上报</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-384.000000, -254.000000)">
<g id="编组-16备份-6" transform="translate(360.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-3" fill="#6EF9E1"></path>
<path d="M15.8982,17.8 L15.8982,20.15 C15.8622,20.495 16.1052,20.809 16.4482,20.86 L22.2982,20.86 C22.6462,20.814 22.8942,20.499 22.8582,20.15 L22.8582,17.73 C22.8582,17.56 22.7482,17.42 22.6282,17.42 C22.4772,17.441 22.3702,17.578 22.3882,17.73 L22.3882,20.24 L16.3882,20.24 L16.3882,17.72 C16.3882,17.56 16.2782,17.43 16.1582,17.43 C16.0382,17.43 15.9382,17.56 15.9282,17.72 L15.8982,17.8 Z M22.2982,21.04 L16.4582,21.04 C16.0112,20.992 15.6832,20.598 15.7182,20.15 L15.7182,17.67 C15.7192,17.449 15.8992,17.271 16.1202,17.2729833 C16.3392,17.274 16.5172,17.45 16.5182,17.67 L16.5182,20.1 L22.1782,20.1 L22.1782,17.78 C22.1422,17.551 22.2992,17.336 22.5282,17.3 C22.7572,17.265 22.9722,17.421 23.0082,17.651 C23.0152,17.694 23.0152,17.738 23.0082,17.78 L23.0082,20.2 C23.0182,20.619 22.7132,20.98 22.2982,21.04 L22.2982,21.04 Z" id="Fill-5" fill="#6EF9E1"></path>
<path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-7" fill="#6FFADE"></path>
<path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-9" fill="#6FFADE"></path>
<path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-11" fill="#6FFADE"></path>
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-13" fill="#6EF9E1"></path>
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Stroke-15" stroke="#6EF9E1" stroke-width="0.2"></path>
<path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-17" fill="#6FFADE"></path>
<path d="M12.2967,6.8498 L11.9997,12.7348 C11.9267,13.1178 11.5587,13.3688 11.1757,13.2948 C10.8917,13.2418 10.6697,13.0188 10.6147,12.7348 L10.3057,6.8498 L10.3057,6.7878 C10.3937,6.2348 10.9127,5.8568 11.4647,5.9438 C11.8997,6.0118 12.2407,6.3528 12.3087,6.7878 C12.3137,6.8078 12.3137,6.8288 12.3087,6.8498 L12.2967,6.8498 Z M11.3077,15.4668 C10.9047,15.4878 10.5627,15.1778 10.5417,14.7758 C10.5217,14.3728 10.8317,14.0308 11.2337,14.0098 C11.6357,13.9898 11.9787,14.2988 11.9987,14.7018 C11.9997,14.7178 12.0007,14.7338 11.9997,14.7498 C12.0067,15.1388 11.6967,15.4598 11.3077,15.4668 Z" id="Fill-19" fill="#6EF9E1"></path>
<path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-21" fill="#6FFADE"></path>
<path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-23" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
export default {
name: 'TechyContainer',
props: {
title: { type: String, default: '默认标题' },
icon: { type: String, default: defaultIcon },
showCorner: {
type: Boolean,
default: true
}
},
data() {
return {}
},
mounted() {}
}
</script>
<style scoped>
.techy-container {
border: 2px solid #52fff1;
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
display: inline-block;
position: relative;
/* padding: 24px; */
padding: calc(100vw / 1920 * 22);
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
/* background: rgba(20, 69, 100, 0.425); */
background: rgba(6, 16, 39, 0.3);
backdrop-filter: blur(1px);
}
.line {
position: absolute;
background-color: #52fff1;
}
.horizontal {
/* height: 4px;
width: 24px; */
/* height: 0.325vh;
width: 3vh; */
height: calc(100vw / 1920 * 4);
width: calc(100vw / 1920 * 30);
}
.vertical {
/* height: 24px;
width: 4px; */
/* height: 3vh;
width: 0.325vh; */
height: calc(100vw / 1920 * 30);
width: calc(100vw / 1920 * 4);
}
.top {
top: -3px;
}
.left {
left: -3px;
}
.right {
right: -3px;
}
.bottom {
bottom: -3px;
}
.container-title-wrapper {
color: #52fff1;
display: flex;
align-items: center;
/* font-size: 18px;
line-height: 1;
height: 24px;
margin-bottom: 8px; */
/* font-size: 1.25vh;
line-height: 1;
height: 1.5vh;
margin-bottom: 1.25vh; */
font-size: calc((100vw / 1920) * 16);
line-height: 1;
height: calc((100vw / 1920) * 20);
margin-bottom: 1.5vh;
}
.container-title {
margin-left: 4px;
}
</style>

63
src/views/3DOverview/components/TechyFakeTable.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div class="techy-fake-table">
<div class="table-inner">
<section class="table-header" />
<section class="table-body" />
</div>
</div>
</template>
<script>
export default {
name: '',
props: {
tableProps: {
type: Array,
default: () => []
},
tableData: {
type: Array,
default: () => []
}
},
data() {
return {
headMap: {}
}
},
created() {},
mounted() {
this.renderHeadRow().then(() => {
this.renderCommonRow()
})
},
methods: {
renderHeadRow() {
return new Promise((resolve, reject) => {
// do something...
})
},
renderCommonRow() {
return new Promise((resolve, reject) => {
// do something...
})
}
}
}
</script>
<style scoped>
.techy-fake-table {
position: relative;
width: 100%;
height: 100px;
background: #3333;
overflow: hidden;
overflow-x: scroll;
}
.table-inner {
max-width: 10000px;
color: white;
white-space: nowrap;
}
</style>

154
src/views/3DOverview/components/TechyHeader.vue Normal file
View File

@@ -0,0 +1,154 @@
<template>
<header class="techy-header">
<img class="logo-img" src="./logo.png" alt="cnbm">
<span class="techy-header__title">{{ headTitle }}</span>
<div class="date">2022.10.14</div>
<div class="time">20:12:24</div>
<div class="fullscreen-btn">
<span style="color: #52fff1; margin-right: 8px;" @click="handleClick('home')" v-html="homeSvg" />
<span v-if="isFullScreen" @click="handleClick('fullscreen')" v-html="unfullScreenSvg" />
<span v-else @click="handleClick('fullscreen')" v-html="fullScreenSvg" />
</div>
</header>
</template>
<script>
// const homeSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
const homeSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>首页</title>
<g id="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1大屏-数字工厂总览" transform="translate(-1824.000000, -46.000000)" fill-rule="nonzero">
<g id="首页" transform="translate(1824.000000, 46.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M3.36212554,9.99760304 L14.4561021,2.03491762 C15.37881,1.37257076 16.62119,1.37257076 17.5438979,2.03491762 L28.6378745,9.99760304 C29.7265595,10.7789878 30.3723957,12.0369335 30.3723957,13.3770071 L30.3723957,26.217608 C30.3723957,28.5153002 28.5096576,30.3780383 26.2119654,30.3780383 L5.78803465,30.3780383 C3.49034244,30.3780383 1.62760433,28.5153002 1.62760433,26.217608 L1.62760433,13.3773853 C1.62760433,12.0371783 2.27333209,10.7790656 3.36212554,9.99760304 Z M4.68552062,11.8410519 C4.19052975,12.196239 3.89692996,12.7681449 3.89692996,13.3773853 L3.89692996,26.217608 C3.89692996,27.2620363 4.74360637,28.1087127 5.78803465,28.1087127 L26.2119654,28.1087127 C27.2563936,28.1087127 28.10307,27.2620363 28.10307,26.217608 L28.10307,13.3773853 C28.10307,12.7681449 27.8094702,12.196239 27.3144794,11.8410519 L16.2205028,3.87836647 C16.0887105,3.78379718 15.9112895,3.78379718 15.7794972,3.87836647 L4.68552062,11.8414301 L4.68552062,11.8410519 Z" id="形状" fill="#42D0CE"></path>
<path d="M16.25,17 C16.8972087,17 17.4295339,17.4918747 17.4935464,18.1221948 L17.5,18.25 L17.5,28.25 C17.5,28.9403559 16.9403559,29.5 16.25,29.5 C15.6027913,29.5 15.0704661,29.0081253 15.0064536,28.3778052 L15,28.25 L15,18.25 C15,17.5596441 15.5596441,17 16.25,17 Z" id="路径-3" fill="#42D0CE"></path>
</g>
</g>
</g>
</svg>`
// const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
const fullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54备份</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-1864.000000, -162.000000)">
<g id="编组-54备份" transform="translate(1864.000000, 162.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M6.64116798,17.2700375 L6.74890704,17.2784355 C7.20902464,17.3410097 7.56504512,17.7372269 7.56504512,18.2121946 L7.56504512,18.2121946 L7.56504512,23.06998 L12.2154875,18.4195377 L12.3038841,18.341579 C12.6723846,18.0557307 13.2096238,18.0817169 13.5474445,18.4195377 C13.9134169,18.7855101 13.9134169,19.3855223 13.5474445,19.7514947 L13.5474445,19.7514947 L8.86035653,24.4349549 L13.6953555,24.4349549 L13.8090001,24.4414765 C14.2937488,24.4974586 14.6711425,24.9068233 14.6639054,25.3965331 C14.6534571,25.9083109 14.2345395,26.3191724 13.7217698,26.3191724 L13.7217698,26.3191724 L6.64604887,26.3191724 L6.53329365,26.3126932 C6.05255502,26.2570589 5.68082765,25.8499062 5.68082765,25.3539511 L5.68082765,25.3539511 L5.68082765,18.2353071 L5.68737703,18.1218678 C5.74358847,17.6379293 6.15445128,17.2603996 6.64116798,17.2700375 L6.64116798,17.2700375 Z M25.3605547,5.68082765 L25.4723738,5.68728667 C25.9492196,5.74274215 26.3191724,6.14846553 26.3191724,6.6394453 L26.3191724,6.6394453 L26.3191724,13.7613912 L26.312623,13.8748304 C26.2564115,14.3587689 25.8455487,14.7362986 25.358832,14.7266607 C24.8478544,14.716179 24.4349549,14.2960073 24.4349549,13.7845036 L24.4349549,13.7845036 L24.4349549,8.93001999 L19.7845125,13.5804623 L19.6961159,13.658421 C19.3276154,13.9442693 18.7903762,13.9182831 18.4525555,13.5804623 C18.0865831,13.2144899 18.0865831,12.6144777 18.4525555,12.2485053 L18.4525555,12.2485053 L23.1360157,7.56504512 L18.3013427,7.56504512 L18.1876721,7.55852521 C17.7028859,7.50255928 17.3264448,7.09334546 17.3360737,6.60468076 C17.3465429,6.0916891 17.7654605,5.68082765 18.2782302,5.68082765 L18.2782302,5.68082765 L25.3605547,5.68082765 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</g>
</svg>`
// const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54备份 2</title>
<g id="3WMS。1、2、3、4、5、6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-54备份-2">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M13.6987866,17.269857 L13.8115418,17.2763362 C14.2922804,17.3319705 14.6640078,17.7391232 14.6640078,18.2350783 L14.6640078,18.2350783 L14.6640078,25.3537223 L14.6574584,25.4671616 C14.6012469,25.9511001 14.1903841,26.3286298 13.7036674,26.3189919 L13.7036674,26.3189919 L13.5959284,26.3105939 C13.1358108,26.2480197 12.7797903,25.8518025 12.7797903,25.3768348 L12.7797903,25.3768348 L12.7797903,20.5190494 L8.12934794,25.1694917 L8.04095127,25.2474504 C7.67245079,25.5332987 7.13521162,25.5073124 6.79739091,25.1694917 C6.43141847,24.8035193 6.43141847,24.2035071 6.79739091,23.8375347 L6.79739091,23.8375347 L11.4844789,19.1540745 L6.64947993,19.1540745 L6.53583534,19.1475529 C6.05108664,19.0915708 5.67369292,18.6822061 5.68093001,18.1924962 C5.69137836,17.6807185 6.11029591,17.269857 6.62306566,17.269857 L6.62306566,17.269857 L13.6987866,17.269857 Z M18.2962333,5.68100813 C18.807211,5.69148979 19.2201105,6.11166149 19.2201105,6.62316519 L19.2201105,6.62316519 L19.2201105,11.4776488 L23.8705528,6.82720649 L23.9589495,6.74924786 C24.32745,6.46339956 24.8646892,6.48938577 25.2025099,6.82720649 C25.5684823,7.19317893 25.5684823,7.79319108 25.2025099,8.15916352 L25.2025099,8.15916352 L20.5190497,12.8426237 L25.3537226,12.8426237 L25.4673933,12.8491436 C25.9521795,12.9051095 26.3286206,13.3143234 26.3189917,13.8029881 C26.3085224,14.3159797 25.8896049,14.7268412 25.3768351,14.7268412 L25.3768351,14.7268412 L18.2945107,14.7268412 L18.1826915,14.7203822 C17.7058457,14.6649267 17.335893,14.2592033 17.335893,13.7682235 L17.335893,13.7682235 L17.335893,6.64627767 L17.3424424,6.53283844 C17.3986538,6.04889994 17.8095166,5.67137018 18.2962333,5.68100813 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</svg>`
export default {
name: 'TechyHeader',
props: ['headTitle'],
data() {
return {
fullScreenSvg,
homeSvg,
unfullScreenSvg,
isFullScreen: false
}
},
methods: {
handleClick(source) {
if (source === 'fullscreen') {
this.isFullScreen = !this.isFullScreen
this.$emit('toggle-full-screen', { full: this.isFullScreen })
} else if (source === 'home') {
this.$router.push('/')
}
}
}
}
</script>
<style scoped>
.techy-header {
background: transparent;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color: white;
/* font-size: 24px; */
font-size: 2vh;
padding: calc(100vw / 1920 * 32) 0;
line-height: 1;
background: url(./header-longer.png) no-repeat;
/** 背景图片好像左右不对称 : */
/* background-position: bottom left 40px; */
/* background-size: cover; */
background-size: 100% 100%;
/* background-position: bottom left calc(100vw / 1920 * 40); */
background-position: bottom;
height: calc(100vmin / 1920 * 128);
}
.logo-img {
width: calc(100vmin / 1920 * 48);
}
.techy-header__title {
display: line-block;
margin-left: calc(100vmin / 1920 * 12);
/* font-size: 29px; */
font-size: calc(100vmin / 1920 * 48);
line-height: 41px;
letter-spacing: 4px;
text-shadow: 0px 0px 11px rgba(221, 237, 255, 0.34);
}
.date,
.time {
font-size: calc(100vmin / 1920 * 42);
line-height: 1.5;
/* font-size: 28px;
line-height: 36px; */
color: #49e1de;
letter-spacing: 0.8px;
position: absolute;
bottom: calc(100vmin / 1920 * 14 );
}
.date {
/* left: 72px; */
left: calc(100vmin / 1920 * 72);
}
.time {
/* right: 128px; */
right: calc(100vmin / 1920 * 186);
}
.fullscreen-btn {
/* height: 32px; */
cursor: pointer;
position: absolute;
/* right: 24px; */
/** techy-body 的内部 padding 值 */
right: calc(100vmin / 1920 * 32);
/* top: 42px; */
top: calc(100vmin / 1920 * 52);
bottom: 0;
}
.fullscreen-btn > span {
display: inline-block;
width: calc(100vmin / 1920 * 52);
height: calc(100vmin / 1920 * 52);
}
</style>

170
src/views/3DOverview/components/TechyLineChart.vue Normal file
View File

@@ -0,0 +1,170 @@
<template>
<div :id="id" ref="techy-line-chart" class="techy-chart" />
</template>
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'TechyLineChart',
mixins: [resize],
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
inject: ['resizeStatus'],
/** End Fn.1 */
props: {
id: {
type: String,
default: 'default-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
option: {
title: {
text: this.title,
left: 'center',
textStyle: {
color: '#fffa',
fontSize: 12
}
},
color: ['#59CBE8', '#E93CAC', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
grid: {
top: '18px',
left: 0,
right: '5%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: Array(12)
.fill(0)
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
axisTick: {
show: false
},
axisLabel: {
fontSize: 8,
color: '#fffa'
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisLabel: {
fontSize: 10,
color: '#fffa',
formatter: '{value} %'
},
axisTick: { show: false },
splitLine: {
lineStyle: {
color: '#fff3'
}
}
},
series: [
{
name: '产线1',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线2',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线3',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线4',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线5',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
}
]
}
}
},
computed: {
shouldResize() {
return this.resizeStatus()
}
},
watch: {
shouldResize(val, oldVal) {
setTimeout(() => {
this.chart.resize()
}, 250)
}
},
mounted() {
this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.techy-chart {
height: 100%;
width: 100%;
}
.techy-chart >>> div {
width: 100% !important;
height: 100% !important;
}
</style>

188
src/views/3DOverview/components/TechyTable.vue Normal file
View File

@@ -0,0 +1,188 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: gtz
* @LastEditTime: 2022-06-14 11:12:39
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
<template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
<el-table-column
v-for="(item, index) in renderTableHeadList"
:key="item.prop"
:show-overflow-tooltip="showOverflow"
v-bind="item"
>
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :key="index" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
</el-table>
</div>
</template>
<script>
import { isObject, isString } from 'lodash'
export default {
name: 'TechyTable',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
props: {
tableData: {
type: Array,
required: true,
validator: val => val.filter(item => !isObject(item)).length === 0
},
tableConfig: {
type: Array,
required: true,
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
},
isLoading: {
type: Boolean,
required: false
},
page: {
type: Number,
required: false,
default: 1
},
limit: {
type: Number,
required: false,
default: 5
},
beilv: {
type: Number,
default: 1
},
showOverflow: {
type: Boolean,
default: true
},
showIndex: {
type: Boolean,
default: true
}
},
data() {
return {
tableConfigBak: [],
selectedBox: new Array(100).fill(true)
}
},
computed: {
renderData() {
if (this.tableData.length && !this.tableData[0]._pageIndex) {
this.tableData.forEach((item, index) => {
item._pageIndex = (this.page - 1) * this.limit + index + 1
})
}
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
},
renderTableHeadList() {
return this.tableConfig.filter((item, index) => {
return this.selectedBox[index]
})
}
},
beforeMount() {
this.selectedBox = new Array(100).fill(true)
},
methods: {
emitData(val) {
this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(76,97,123,0.2)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
}
}
}
}
</script>
<style lang="scss">
@import "~@/styles/index.scss";
.visual-base-table-container {
.el-table {
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
// new
.el-table {
width: 100%;
.el-table__header-wrapper table, .el-table__body-wrapper table {
width: 100% !important;
}
.el-table__body, .el-table__footer, .el-table__header {
table-layout: auto;
}
}
}
.setting {
text-align: right;
padding: 15px;
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
}
</style>

37
src/views/3DOverview/components/V3DApp.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div :id="containerId">
<!-- <div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode" /> -->
</div>
</template>
<script>
import * as v3dAppAPI from '../v3dApp/app.js'
export default {
name: 'V3DApp',
data() {
return { containerId: v3dAppAPI.CONTAINER_ID }
},
app: null,
mounted() {
v3dAppAPI.createApp().then(app => {
this.$options.app = app
const interval = setInterval(() => {
if (app.clock.running) {
this.$emit('3d-loaded')
clearInterval(interval)
}
}, 500)
})
},
beforeUnmount() {
if (this.$options.app) {
this.$options.app.dispose()
this.$options.app = null
}
}
}
</script>
<style scoped>
@import '../v3dApp/app.css';
</style>

BIN
src/views/3DOverview/components/assets/monitor/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
src/views/3DOverview/components/assets/monitor/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
src/views/3DOverview/components/assets/monitor/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 KiB

90
src/views/3DOverview/components/header-bg.svg Normal file
View File

@@ -0,0 +1,90 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 12备份 6</title>
<defs>
<linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1">
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
<stop stop-color="#52FFF1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop>
<stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop>
</linearGradient>
<linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3">
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
<stop stop-color="#52FFF1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4">
<stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#31A6AE" offset="100%"></stop>
</linearGradient>
<linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5">
<stop stop-color="#31A6AE" offset="0%"></stop>
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6">
<stop stop-color="#31A6AE" offset="0%"></stop>
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7">
<stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#31A6AE" offset="100%"></stop>
</linearGradient>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-2工单管理" transform="translate(-336.000000, -120.000000)">
<g id="编组-12备份-6" transform="translate(336.000000, 120.000000)">
<g id="编组-8" transform="translate(540.000000, 23.000000)"></g>
<g id="编组-4" transform="translate(0.000000, 1.000000)">
<polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline>
<polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon>
<polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline>
<g id="编组-3" transform="translate(43.807292, 29.000000)">
<polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline>
<ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
<ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
<g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
<polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
<polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
<polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
<polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
<polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
</g>
<g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE">
<polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
<polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
<polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
<polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
<polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
</g>
<line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
<line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
</g>
<g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)">
<polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline>
<ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
<ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
<g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
<polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
<polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
<polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
<polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
<polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
</g>
<g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE">
<polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
<polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
<polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
<polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
<polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
</g>
<line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
<line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
</g>
</g>
<path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
src/views/3DOverview/components/header-longer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
src/views/3DOverview/components/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/views/3DOverview/components/logo2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

258
src/views/3DOverview/index.vue Normal file
View File

@@ -0,0 +1,258 @@
<template>
<div id="v3d-outter" ref="v3d-outter">
<!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
<!-- 正式内容: -->
<!-- <div v-if="showPage" id="v3d-main-content"> -->
<div v-if="true" id="v3d-main-content">
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
<section id="techy-body-part">
<div class="upper-part">
<div class="techy-body-part__left">
<techy-container title="订单完成情况" style="flex: 0;">
<LeftContentOrder />
</techy-container>
<techy-container title="公用工程消耗" style="flex:1;">
<LeftContentPublicConsume />
</techy-container>
</div>
<div class="techy-body-part__middle">
<TechyBox>
<div class="flex">
<p>
<b>产线名称 :</b>
<span>A产线</span>
</p>
<p>
<b>设备名称 :</b>
<span>清洗机</span>
</p>
<p>
<b>累计加工数量 :</b>
<span>20</span>
</p>
<p>
<b>通信状态 :</b>
<span class="round-dot">运行中</span>
</p>
</div>
</TechyBox>
</div>
<div class="techy-body-part__right">
<techy-container title="实时产量和能耗" style="flex: 0">
<RightContentRealtimeProduction />
</techy-container>
<div class="techy-body-part__right-col-2">
<techy-container title="工序质量分析">
<RightContentQualityAnalysis />
</techy-container>
</div>
<techy-container title="产线成品率" style="flex: 0;">
<RightContentProductRate />
</techy-container>
</div>
</div>
<!-- 底部 -->
<div class="bottom-part">
<div style="width: 25%; min-width: 480px; min-height: 240px; height: 20vh;">
<techy-container title="设备巡检提示" style="flex: 0;">
<LeftContentEquipmentCheck />
</techy-container>
</div>
<div style="flex: 1;">
<techy-container title="现场实时监控">
<LeftContentMonitor />
</techy-container>
</div>
<div>
<techy-container title="缺陷分类分析">
<RightContentFaultAnalysis />
</techy-container>
</div>
<div style="width: 25%; min-width: 480px;">
<techy-container title="设备报警提示" style="flex: 0;">
<RightContentAlert />
</techy-container>
</div>
</div>
</section>
</div>
</div>
</template>
<script>
import V3DApp from './components/V3DApp.vue'
import TechyHeader from './components/TechyHeader.vue'
import TechyContainer from './components/TechyContainer.vue'
import LeftContentMonitor from './components/LeftContentMonitor.vue'
import LeftContentEquipmentCheck from './components/LeftContentEquipmentCheck.vue'
import LeftContentOrder from './components/LeftContentOrder.vue'
import LeftContentPublicConsume from './components/LeftContentPublicConsume.vue'
import RightContentAlert from './components/RightContentAlert.vue'
import RightContentRealtimeProduction from './components/RightContentRealtimeProduction.vue'
import RightContentProductRate from './components/RightContentProductRate.vue'
import RightContentQualityAnalysis from './components/RightContentQualityAnalysis.vue'
import RightContentFaultAnalysis from './components/RightContentFaultAnalysis.vue'
import TechyBox from './components/TechyBox.vue'
import screenfull from 'screenfull'
export default {
name: '',
components: {
V3DApp,
TechyHeader,
TechyContainer,
LeftContentMonitor,
LeftContentEquipmentCheck,
LeftContentOrder,
LeftContentPublicConsume,
RightContentAlert,
RightContentRealtimeProduction,
RightContentProductRate,
RightContentQualityAnalysis,
RightContentFaultAnalysis,
TechyBox
},
data() {
return {
showPage: false,
toggleResize: 'toggle-1' // <=== no need to worry this
}
},
provide() {
return { resizeStatus: () => this.toggleResize }
},
created() {},
mounted() {},
methods: {
/** 全屏切换 */
toggleFullScreen() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle(this.$refs['v3d-outter'])
this.toggleResize = this.toggleResize === 'toggle-1' ? 'toggle-2' : 'toggle-1'
},
handle3DLoaded() {
this.showPage = true
}
}
}
</script>
<style>
#v3d-outter {
width: 100vw;
height: 100vh;
background-image: url('../../assets/img/cockpit/cockpit-back.png');
background-size: cover;
background-position: center;
font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
color: #4d4d4d;
-webkit-font-smoothing: antialiased;
font-weight: 300;
position: relative;
}
#v3d-main-content {
width: 100%;
height: 100%;
background: transparent;
z-index: 3;
display: flex;
flex-direction: column;
font: initial;
}
#techy-body-part {
flex: 1 1;
display: flex;
/* gap: 16px; */
gap: calc(100vmin / 1920 * 36);
flex-direction: column;
}
.upper-part {
flex: 1 1;
padding: calc(100vmin / 1920 * 36);
padding-bottom: 0;
display: flex;
justify-content: space-between;
}
.bottom-part {
padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
display: flex;
/* gap: 16px; */
gap: calc(100vmin / 1920 * 36);
}
.techy-body-part__left,
.techy-body-part__right {
height: 100%;
width: 25%;
min-width: 480px;
overflow: hidden;
/* background: rgba(20, 69, 100, 0.425);
backdrop-filter: blur(2px); */
display: flex;
flex-direction: column;
gap: calc(100vmin / 1920 * 36);
}
/* .techy-body-part__left {
width: 35%;
} */
.techy-body-part__right-col-2 {
flex: 1;
display: flex;
gap: calc(100vmin / 1920 * 36);
}
.techy-body-part__middle {
position: absolute;
top: 12%;
left: 36%;
height: 96px;
width: 128px;
}
.flex {
padding: 12px;
display: flex;
flex-direction: column;
}
.flex p {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 1.5;
color: #fff;
}
.flex p > span {
position: relative;
padding-left: 6px;
}
.round-dot::before {
content: '';
position: absolute;
top: 5px;
left: -3px;
width: 8px;
height: 8px;
background-color: rgb(82, 231, 82);
border-radius: 4px;
}
</style>

34
src/views/3DOverview/v3dApp/app.css Normal file
View File

@@ -0,0 +1,34 @@
/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */
#v3d-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.fullscreen-button {
position: absolute;
top: 5px;
right: 5px;
width: 50px;
height: 50px;
cursor: pointer;
background-size: 100% 100%;
display: none;
z-index: 1;
}
.fullscreen-open {
background-image: url('media/fullscreen_open.svg');
}
.fullscreen-close {
background-image: url('media/fullscreen_close.svg');
}
/* removes tap blinking on ios devices */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

234
src/views/3DOverview/v3dApp/app.js Normal file
View File

@@ -0,0 +1,234 @@
/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */
/* eslint-disable */
var CONTAINER_ID = 'v3d-container';
/**
* Path to prepend to request URLs for the scene .gltf file and the visual logic
* .js file.
*/
var REL_URL_PREFIX = 'v3dApp/';
/**
* Load the visual logic .js and/or .xml file or not. The Puzzles Editor is
* currently not fully supported.
* See: https://www.soft8soft.com/docs/manual/en/programmers_guide/Integration-with-Reactjs-Vuejs.html#using_the_puzzles_editor
*/
var LOAD_LOGIC_FILES = true;
function createApp() {
var params = v3d.AppUtils.getPageParams();
var PUZZLES_DIR = '/puzzles/';
var logicURL = params.logic ? params.logic : '__LOGIC__visual_logic.js'.replace('__LOGIC__', REL_URL_PREFIX);
var sceneURL = params.load ? params.load : '__URL__app.gltf'.replace('__URL__', REL_URL_PREFIX);
if (!sceneURL) {
console.log('No scene URL specified');
return;
}
// some puzzles can benefit from cache
v3d.Cache.enabled = true;
return new Promise(function(resolve) {
if (LOAD_LOGIC_FILES) {
if (v3d.AppUtils.isXML(logicURL)) {
var logicURLJS = logicURL.match(/(.*)\.xml$/)[1] + '.js';
new v3d.PuzzlesLoader().loadEditorWithLogic(PUZZLES_DIR, logicURLJS,
function() {
var initOptions = v3d.PL ? v3d.PL.execInitPuzzles({
container: CONTAINER_ID }).initOptions
: { useFullscreen: true };
var appInstance = loadScene(sceneURL, initOptions);
v3d.PE.viewportUseAppInstance(appInstance);
resolve(appInstance);
}
);
} else if (v3d.AppUtils.isJS(logicURL)) {
new v3d.PuzzlesLoader().loadLogic(logicURL, function() {
var initOptions = v3d.PL ? v3d.PL.execInitPuzzles({
container: CONTAINER_ID }).initOptions
: { useFullscreen: true };
resolve(loadScene(sceneURL, initOptions));
});
} else {
resolve(loadScene(sceneURL, { useFullscreen: true }));
}
} else {
resolve(loadScene(sceneURL, { useFullscreen: true }));
}
}).catch(function(err) {
console.error(err);
});
}
function loadScene(sceneURL, initOptions) {
initOptions = initOptions || {};
var ctxSettings = {};
if (initOptions.useBkgTransp) ctxSettings.alpha = true;
if (initOptions.preserveDrawBuf) ctxSettings.preserveDrawingBuffer = true;
var preloader = initOptions.useCustomPreloader
? createCustomPreloader(initOptions.preloaderProgressCb,
initOptions.preloaderEndCb)
: new v3d.SimplePreloader({ container: CONTAINER_ID });
if (v3d.PE) {
puzzlesEditorPreparePreloader(preloader);
}
var app = new v3d.App(CONTAINER_ID, ctxSettings, preloader);
if (initOptions.useBkgTransp) {
app.clearBkgOnLoad = true;
app.renderer.setClearColor(0x000000, 0);
}
// namespace for communicating with code generated by Puzzles
app.ExternalInterface = {};
prepareExternalInterface(app);
if (initOptions.preloaderStartCb) initOptions.preloaderStartCb();
if (initOptions.useFullscreen) {
initFullScreen();
} else {
var fsButton = document.getElementById('fullscreen_button');
if (fsButton) fsButton.style.display = 'none';
}
sceneURL = initOptions.useCompAssets ? sceneURL + '.xz' : sceneURL;
app.loadScene(sceneURL, function() {
app.enableControls();
app.run();
if (v3d.PE) v3d.PE.updateAppInstance(app);
if (v3d.PL) v3d.PL.init(app, initOptions);
runCode(app);
}, null, function() {
console.log('Can\'t load the scene ' + sceneURL);
});
return app;
}
function createCustomPreloader(updateCb, finishCb) {
function CustomPreloader() {
v3d.Preloader.call(this);
}
CustomPreloader.prototype = Object.assign(Object.create(v3d.Preloader.prototype), {
onUpdate: function(percentage) {
v3d.Preloader.prototype.onUpdate.call(this, percentage);
if (updateCb) updateCb(percentage);
},
onFinish: function() {
v3d.Preloader.prototype.onFinish.call(this);
if (finishCb) finishCb();
}
});
return new CustomPreloader();
}
/**
* Modify the app's preloader to track the loading process in the Puzzles Editor.
*/
function puzzlesEditorPreparePreloader(preloader) {
var _onUpdate = preloader.onUpdate.bind(preloader);
preloader.onUpdate = function(percentage) {
_onUpdate(percentage);
v3d.PE.loadingUpdateCb(percentage);
}
var _onFinish = preloader.onFinish.bind(preloader);
preloader.onFinish = function() {
_onFinish();
v3d.PE.loadingFinishCb();
}
}
function initFullScreen() {
var fsButton = document.getElementById('fullscreen_button');
if (!fsButton) return;
var container = document.getElementById(CONTAINER_ID);
if (document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled)
fsButton.style.display = 'inline';
fsButton.addEventListener('click', function(event) {
event.stopPropagation();
if (document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement) {
exitFullscreen();
} else
requestFullscreen(container);
});
function changeFullscreen() {
if (document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement) {
fsButton.classList.remove('fullscreen-open');
fsButton.classList.add('fullscreen-close');
} else {
fsButton.classList.remove('fullscreen-close');
fsButton.classList.add('fullscreen-open');
}
}
document.addEventListener('webkitfullscreenchange', changeFullscreen);
document.addEventListener('mozfullscreenchange', changeFullscreen);
document.addEventListener('msfullscreenchange', changeFullscreen);
document.addEventListener('fullscreenchange', changeFullscreen);
function requestFullscreen(elem) {
if (elem.requestFullscreen)
elem.requestFullscreen();
else if (elem.mozRequestFullScreen)
elem.mozRequestFullScreen();
else if (elem.webkitRequestFullscreen)
elem.webkitRequestFullscreen();
else if (elem.msRequestFullscreen)
elem.msRequestFullscreen();
}
function exitFullscreen() {
if (document.exitFullscreen)
document.exitFullscreen();
else if (document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if (document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if (document.msExitFullscreen)
document.msExitFullscreen();
}
}
function prepareExternalInterface(app) {
// register functions in the app.ExternalInterface to call them from Puzzles, e.g:
// app.ExternalInterface.myJSFunction = function() {
// console.log('Hello, World!');
// }
}
function runCode(app) {
// add your code here, e.g. console.log('Hello, World!');
}
export { createApp, CONTAINER_ID };

105
src/views/3DOverview/v3dApp/media/fullscreen_close.svg Normal file
View File

@@ -0,0 +1,105 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="62"
height="62"
viewBox="0 0 16.404167 16.404167"
version="1.1"
id="svg2719">
<defs
id="defs2713">
<linearGradient
gradientTransform="rotate(-180,255.67833,614.731)"
xlink:href="#linearGradient2768"
id="linearGradient2673"
x1="501.88306"
y1="942.95502"
x2="508.08038"
y2="935.61182"
gradientUnits="userSpaceOnUse" />
<linearGradient
id="linearGradient2768">
<stop
style="stop-color:#414141;stop-opacity:1"
offset="0"
id="stop2764" />
<stop
style="stop-color:#767676;stop-opacity:1"
offset="1"
id="stop2766" />
</linearGradient>
<linearGradient
gradientTransform="translate(-493.24109,-653.06985)"
xlink:href="#linearGradient2648"
id="linearGradient2665"
x1="495.62714"
y1="948.00964"
x2="508.85629"
y2="934.78046"
gradientUnits="userSpaceOnUse" />
<linearGradient
id="linearGradient2648">
<stop
style="stop-color:#ebebeb;stop-opacity:1"
offset="0"
id="stop2644" />
<stop
style="stop-color:#ffffff;stop-opacity:1"
offset="1"
id="stop2646" />
</linearGradient>
<filter
style="color-interpolation-filters:sRGB"
id="filter2688"
x="-0.12"
width="1.24"
y="-0.12"
height="1.24">
<feGaussianBlur
stdDeviation="0.66145835"
id="feGaussianBlur2690" />
</filter>
</defs>
<metadata
id="metadata2716">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="translate(0,-280.59582)">
<g
id="g2754"
transform="translate(-0.79853618,0.47271794)">
<rect
rx="0"
ry="1.376092"
y="281.7106"
x="2.3860359"
height="13.229167"
width="13.229167"
id="rect2614"
style="display:inline;opacity:1;fill:#000000;fill-opacity:0.53005461;fill-rule:nonzero;stroke:none;stroke-width:0.71784258;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;filter:url(#filter2688)" />
<path
id="rect2603"
d="M 3.7621171,281.7106 H 14.2391 c 0.762355,0 1.376092,0.61374 1.376092,1.37609 v 10.47699 c 0,0.76235 -0.613737,1.37609 -1.376092,1.37609 H 3.7621171 c -0.7623549,0 -1.3760919,-0.61374 -1.3760919,-1.37609 v -10.47699 c 0,-0.76235 0.613737,-1.37609 1.3760919,-1.37609 z"
style="display:inline;opacity:1;fill:url(#linearGradient2665);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.71784258;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
<path
id="rect2605"
d="M 9.0089403,293.54618 H 4.4659401 c -0.39995,0 -0.72192,-0.32198 -0.72192,-0.72192 v -4.49623 c 0,-0.39994 0.50644,-0.7845 0.9865,-0.32421 0.48006,0.46029 4.2498102,4.07528 4.7127902,4.53146 0.46297,0.45619 0.15571,1.0109 -0.43437,1.0109 z"
style="display:inline;opacity:1;fill:url(#linearGradient2673);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.80000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

105
src/views/3DOverview/v3dApp/media/fullscreen_open.svg Normal file
View File

@@ -0,0 +1,105 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="62"
height="62"
viewBox="0 0 16.404167 16.404167"
version="1.1"
id="svg2719">
<defs
id="defs2713">
<linearGradient
gradientTransform="translate(-493.24109,-653.06985)"
xlink:href="#linearGradient2768"
id="linearGradient2673"
x1="501.88306"
y1="942.95502"
x2="508.08038"
y2="935.61182"
gradientUnits="userSpaceOnUse" />
<linearGradient
id="linearGradient2768">
<stop
style="stop-color:#414141;stop-opacity:1"
offset="0"
id="stop2764" />
<stop
style="stop-color:#767676;stop-opacity:1"
offset="1"
id="stop2766" />
</linearGradient>
<linearGradient
gradientTransform="translate(-493.24109,-653.06985)"
xlink:href="#linearGradient2648"
id="linearGradient2665"
x1="495.62714"
y1="948.00964"
x2="508.85629"
y2="934.78046"
gradientUnits="userSpaceOnUse" />
<linearGradient
id="linearGradient2648">
<stop
style="stop-color:#ebebeb;stop-opacity:1"
offset="0"
id="stop2644" />
<stop
style="stop-color:#ffffff;stop-opacity:1"
offset="1"
id="stop2646" />
</linearGradient>
<filter
style="color-interpolation-filters:sRGB"
id="filter2688"
x="-0.12"
width="1.24"
y="-0.12"
height="1.24">
<feGaussianBlur
stdDeviation="0.66145835"
id="feGaussianBlur2690" />
</filter>
</defs>
<metadata
id="metadata2716">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="translate(0,-280.59582)">
<g
id="g2754"
transform="translate(-0.79853618,0.47271794)">
<rect
rx="0"
ry="1.376092"
y="281.7106"
x="2.3860359"
height="13.229167"
width="13.229167"
id="rect2614"
style="display:inline;opacity:1;fill:#000000;fill-opacity:0.53005461;fill-rule:nonzero;stroke:none;stroke-width:0.71784258;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;filter:url(#filter2688)" />
<path
id="rect2603"
d="M 3.7621171,281.7106 H 14.2391 c 0.762355,0 1.376092,0.61374 1.376092,1.37609 v 10.47699 c 0,0.76235 -0.613737,1.37609 -1.376092,1.37609 H 3.7621171 c -0.7623549,0 -1.3760919,-0.61374 -1.3760919,-1.37609 v -10.47699 c 0,-0.76235 0.613737,-1.37609 1.3760919,-1.37609 z"
style="display:inline;opacity:1;fill:url(#linearGradient2665);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.71784258;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
<path
id="rect2605"
d="m 9.1066291,282.84597 h 4.5429999 c 0.39995,0 0.72192,0.32198 0.72192,0.72192 v 4.49623 c 0,0.39994 -0.50644,0.7845 -0.9865,0.32421 -0.48006,-0.46029 -4.24981,-4.07528 -4.7127901,-4.53146 -0.46297,-0.45619 -0.1557099,-1.0109 0.4343702,-1.0109 z"
style="display:inline;opacity:1;fill:url(#linearGradient2673);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.80000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB