hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

德国展会大屏update

Browse Source
This commit is contained in:
hzz 2024-04-17 17:17:09 +08:00
parent 2325c3c4b5
commit dae937ac26
19 changed files with 1398 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/assets/css/iconfont/germany/iconfont.css Normal file
View File

@ -0,0 +1,59 @@
@font-face {
font-family: "iconfont"; /* Project id 4503445 */
src: url('iconfont.woff2?t=1712901332022') format('woff2'),
url('iconfont.woff?t=1712901332022') format('woff'),
url('iconfont.ttf?t=1712901332022') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-renyuanxinxi-copy:before {
content: "\e601";
}
.icon-baojing:before {
content: "\e64b";
}
.icon-zidongtaiyajiao:before {
content: "\e61f";
}
.icon-taiyajiaogaodu:before {
content: "\e623";
}
.icon-jizhenzhenshu:before {
content: "\e61a";
}
.icon-caijian:before {
content: "\e66e";
}
.icon-shebeixinxi:before {
content: "\ea02";
}
.icon-tonganrenyuanxinxi:before {
content: "\e61e";
}
.icon-a-zu496:before {
content: "\e600";
}
.icon-shengchanxiaoshuai:before {
content: "\e612";
}
.icon-zhinengjiaju:before {
content: "\e61c";
}

BIN
src/assets/css/iconfont/germany/iconfont.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/css/iconfont/germany/iconfont.woff Normal file
View File

Binary file not shown.

BIN
src/assets/css/iconfont/germany/iconfont.woff2 Normal file
View File

Binary file not shown.

6
src/http/Exhibition/Germany/index.ts Normal file
View File

@ -0,0 +1,6 @@
import {get,post} from "@/utils/http"
//获取设备在线状态、设备列表
export function dDeviceList(){
return get('/screen/cisma/dDeviceList')
}

98
src/main.ts
View File

@ -15,7 +15,8 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
import 'dayjs/locale/zh-cn'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// import echarts from '@/utils/echarts.js'
import echarts from '@/utils/echarts'
// import echarts from '@/utils/echarts'
import VueECharts from 'vue-echarts'
import {createPinia} from 'pinia'
// import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
import dataV from "@iamzzg/data-view/dist/vue3/datav.map.vue.esm";
@ -23,9 +24,104 @@ import './registerServiceWorker'
import router from './router'
import i18n from './locales'
import * as echarts from 'echarts/core';
import {
BarChart,
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineChart,
LineSeriesOption,
GaugeChart,
GaugeSeriesOption,
CustomChart,
CustomSeriesOption,
MapChart,
PieChart,
PieSeriesOption,
} from 'echarts/charts';
// import {LiquidfillChart,
// LiquidfillSeriesOption,} from 'echarts-liquidfill'
import {
TitleComponent,
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponent,
TooltipComponentOption,
GeoComponent,
GridComponent,
GridComponentOption,
VisualMapComponent ,
TimelineComponent ,
CalendarComponent ,
//基准线
MarkLineComponent,
// 数据集组件
DatasetComponent,
DatasetComponentOption,
// 内置数据转换器组件 (filter, sort)
TransformComponent,
LegendComponent,
ToolboxComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
| BarSeriesOption
| LineSeriesOption
| GaugeSeriesOption
| TitleComponentOption
| TooltipComponentOption
| CustomSeriesOption
| GridComponentOption
| DatasetComponentOption
| PieSeriesOption
>;
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GeoComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent,
MarkLineComponent,
VisualMapComponent,
TimelineComponent ,
CalendarComponent ,
BarChart,
LineChart,
GaugeChart,
PieChart,
MapChart,
CustomChart,
// LiquidfillChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
ToolboxComponent
]);
let app = createApp(App)
const store = createPinia()
app.config.globalProperties.$echarts = echarts;//vue3的挂载方式
app.config.globalProperties.$t = i18n.global.t
app.config.globalProperties.$te = i18n.global.te
app.config.globalProperties.tLang = (parent:string, item:string):string => {
if (i18n.global.te(parent + "." + item)) {
return i18n.global.t(parent + "." + item)
}
return item
}
app.component('v-chart', VueECharts)
app.use(store)
app.use(i18n)
app.use(router).use(ElementPlus, {locale: zhCn,}).use(dataV).mount('#app')

5
src/router/index.ts
View File

@ -365,6 +365,11 @@ const routes: Array<RouteRecordRaw> = [
{
path: "/GermanyExhibition",
name: "GermanyExhibition",
component: () => import("../views/Exhibition/Germany/index.vue"),
},
{
path: "/GermanyExhibitionChild",
name: "GermanyExhibitionChild",
component: () => import("../views/Exhibition/Germany/child.vue"),
},

58
src/shims-vue.d.ts vendored
View File

@ -13,6 +13,14 @@ declare module '*.vue' {
const component: DefineComponent<{}, {}, any>
export default component
}
// 对vue进行类型补充说明
import { ComponentCustomProperties } from 'vue'
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
tLang: any
}
}
declare module '@dataview/datav-vue3'
declare module '@jiaminghi/data-view'
declare module '*.json'{
@ -30,3 +38,53 @@ declare module './utils/echarts.js' {
// }
declare module "vue-i18n"
declare module "vue-echarts"
/*
* @FilePath: \daping\src\utils\echarts.d.ts
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-01-30 11:37:13
* @Description:
*
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
*/
import { ComposeOption } from 'echarts/core';
import {
BarSeriesOption,
LineSeriesOption,
GaugeSeriesOption,
CustomSeriesOption,
PieSeriesOption,
MapSeriesOption
} from 'echarts/charts';
//2.引入组件，也就是option选项中的类型
// import {LiquidfillChart,
// LiquidfillSeriesOption,} from 'echarts-liquidfill'
import {
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponentOption,
GridComponentOption,
// 数据集组件
DatasetComponentOption,
MarkLineComponentOption,
} from 'echarts/components';
// 3.通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
| BarSeriesOption
| LineSeriesOption
| GaugeSeriesOption
| PieSeriesOption
| MapSeriesOption
| CustomSeriesOption
// | LiquidfillSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
| MarkLineComponentOption
>;
// 4.将这个类型暴露出去
export { ECOption }

94
src/utils/echarts.ts
View File

@ -1,94 +0,0 @@
/*
* @FilePath: \wang-vue-worke:\demo\daping\src\utils\echarts.ts
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-01-30 10:39:55
* @Description:
*
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
*/
import * as echarts from 'echarts/core';
import {
BarChart,
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineChart,
LineSeriesOption,
GaugeChart,
GaugeSeriesOption,
CustomChart,
CustomSeriesOption,
MapChart,
PieChart,
PieSeriesOption,
} from 'echarts/charts';
// import {LiquidfillChart,
// LiquidfillSeriesOption,} from 'echarts-liquidfill'
import {
TitleComponent,
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponent,
TooltipComponentOption,
GeoComponent,
GridComponent,
GridComponentOption,
VisualMapComponent ,
TimelineComponent ,
CalendarComponent ,
//基准线
MarkLineComponent,
// 数据集组件
DatasetComponent,
DatasetComponentOption,
// 内置数据转换器组件 (filter, sort)
TransformComponent,
LegendComponent,
ToolboxComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
| BarSeriesOption
| LineSeriesOption
| GaugeSeriesOption
| TitleComponentOption
| TooltipComponentOption
| CustomSeriesOption
| GridComponentOption
| DatasetComponentOption
| PieSeriesOption
>;
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GeoComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent,
MarkLineComponent,
VisualMapComponent,
TimelineComponent ,
CalendarComponent ,
BarChart,
LineChart,
GaugeChart,
PieChart,
MapChart,
CustomChart,
// LiquidfillChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
ToolboxComponent
]);
// 导出
export default echarts;

2
src/views/Exhibition/Germany/child.vue
View File

@ -118,7 +118,7 @@ let getImgSrc = computed(() => {
冲缝一体机: require("./images/cfytj.png"),
工业缝纫机: require("./images/cfytj.png"),
};
return imgSrc[name];
return imgSrc['冲缝一体机'];
});
// 获取产出进度echarts数据

86
src/views/Exhibition/Germany/components/BottomCBox.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="bc-container">
<v-chart class="chart-class" :option="bar_option"></v-chart>
<div class="bottom-text">稼动率：实际工作时间/设备开机时间
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
let bar_option = ref({
legend: {
data:[proxy.tLang('messages','稼动率')],
},
xAxis: {
type: 'category',
data: ['104019564#', '1171210#', 'RP2401009', ],
axisLabel: {
color: '#AEEEFA',
fontSize: 14
}
},
yAxis: {
type: 'value',
name: proxy.tLang('messages','稼动率'),
nameTextStyle: {
color: '#fff',
fontSize: 16,
},
axisLabel: {
formatter: '{value} %',
fontSize: 14,
color: '#AEEEFA'
},
splitLine: {
lineStyle: {
type: 'dashed' ,
color: '#032E4E'
}
}
},
series: [
{
data: [120, 200, 150],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
label: {
show: true,
position: 'top',
formatter: '{c}%' ,
color: '#fff',
fontSize: 14,
},
barWidth: '50%'
}
]
})
</script>
<style lang="scss" scoped>
.bc-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.chart-class {
width: 100%;
height: 85%;
}
.bottom-text {
width: 100%;
height: 15%;
}
}
</style>

62
src/views/Exhibition/Germany/components/BottomLBox.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="bl-box-container">
<div class="box-item pos">{{ tLang('messages', '机架号') }}:
<div>104019564#</div>
</div>
<div class="box-item">{{ tLang('messages', '设备状态') }}:
<div class="status green"></div>
</div>
<div class="box-item">
<div style="text-wrap: nowrap;">{{ tLang('messages', '型号') }}:</div>
<div> RPSP-NM-I+K-1-1800-Ⅰ-WC2+K-RF-1P220</div>
</div>
<div class="box-img">
<el-image :src="lqImg" fit="contain"></el-image>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
let lqImg = require('./../images/lq.png');
</script>
<style lang="scss" scoped>
.bl-box-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.box-item {
width: 100%;
height: 80px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-left: 10px;
box-sizing: border-box;
div {
margin-left: 20px;
}
}
.pos {
position: absolute;
top: 80px;
left: 190px;
}
.box-img {
width: 100%;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

99
src/views/Exhibition/Germany/components/BottomRBox.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div class="br-container">
<div class="card" v-for="item in 2">
<v-chart class="chart-class" :option="pie_option"></v-chart>
<div class="box-list">
<div class="box-item">{{ tLang('messages', '实际产量') }}：<div></div>
</div>
<div class="box-item">{{ tLang('messages', '计划产量') }}：<div></div>
</div>
<div class="box-item">{{ tLang('messages', '设备名称') }}：<div></div>
</div>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
let pie_option = ref({
tooltip: {
trigger: 'item'
},
legend: {
top: '10%',
left: 'center',
textStyle: {
color: "#ffffff",
fontSize: 14,
},
},
series: [
{
name: 'Output',
type: 'pie',
radius: ['80%', '90%'],
center: ['50%', '70%'],
startAngle: 210,
endAngle: 330,
label: {
show: true,
position: 'center',
formatter: `{d}%`,
color: "#fff",
},
data: [
{ value: 28, name: proxy.tLang('messages','未完成') },
{ value: 100, name: proxy.tLang('messages','已完成') },
]
}
]
})
</script>
<style lang="scss" scoped>
.br-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.card {
width: 50%;
height: 100%;
.chart-class {
width: 100%;
height: 50%;
}
.box-list {
width: 100%;
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-around;
.box-item {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 10px;
box-sizing: border-box;
div {
margin-left: 20px;
}
}
}
}
}
</style>

215
src/views/Exhibition/Germany/components/TopLBox.vue Normal file
View File

@ -0,0 +1,215 @@
<template>
<div class="border-box">
<div class="box-left">
<div class="box-item">{{ tLang('messages', '设备状态') }}:<div class="status" :class="[statusObj[props.data?.workingState]]"></div>
</div>
<div class="box-item">{{ tLang('messages', '花样名称') }}：<div>{{ props.data.fileName }}</div>
</div>
<div class="box-item">{{ tLang('messages', '花样总针数') }}：<div>{{ props.data.patternCount }}</div>
</div>
<div class="box-item">{{ tLang('messages', '当前针数') }}：<div>{{ props.data.currentCount }}</div>
</div>
<div class="box-item">{{ tLang('messages', '断线提醒') }}：<div class="iconfont icon-baojing" :class="[props.warning?'red-color':'green-color']"></div>
</div>
</div>
<div class="box-right">
<v-chart class="chart-class" :option="gauge_option"></v-chart>
<div class="box-img">
<el-image :src="cfytjImg" fit="contain"></el-image>
</div>
</div>
<div class="pos-label">
<div class="box-item">{{ tLang('messages', '机架号') }}：<div>{{ props.data.label }}</div>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import { de } from 'element-plus/es/locale';
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const props = defineProps<{
data: any,
warning: boolean
}>()
let statusObj = {
0:'red',
1:'yello',
2:'green',
3:'yello'
}
let cfytjImg = require('./../images/cfytj.png');
let gauge_option = ref({
series: [
{
type: 'gauge',
radius: '100%',
startAngle: 180,
endAngle: 0,
min: 0,
max: 3000,
splitNumber: 8,
itemStyle: {
color: '#58D9F9',
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 5,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 8
},
pointer: {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '60%',
width: 5,
offsetCenter: [0, '5%']
},
axisLine: {
roundCap: true,
lineStyle: {
width: 8
}
},
axisTick: {
splitNumber: 2,
lineStyle: {
width: 1,
color: '#999'
}
},
splitLine: {
length: 1,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
distance: 20,
color: '#999',
fontSize: 8
},
title: {
show: false
},
detail: {
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: 2,
width: '80%',
lineHeight: 24,
height: 20,
borderRadius: 8,
offsetCenter: [0, '35%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|rpm/min}';
},
rich: {
value: {
fontSize: 14,
fontWeight: 'bolder',
color: '#777'
},
unit: {
fontSize: 12,
color: '#999',
padding: [0, 0, -1, 1]
}
}
},
data: [
{
value: 900
}
]
}
]
})
</script>
<style lang="scss" scoped>
.border-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.box-left {
width: 40%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.box-item {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 10px;
box-sizing: border-box;
div {
margin-left: 20px;
}
}
}
.box-right {
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.chart-class {
width: 100%;
height: 60%;
}
.box-img {
width: 100%;
height: 40%;
display: flex;
justify-content: center;
align-items: center;
}
}
.pos-label {
position: absolute;
top: 30px;
right: 26px;
width: 50%;
height: 30px;
.box-item {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 10px;
box-sizing: border-box;
div {
margin-left: 20px;
}
}
}
}
.iconfont {
font-size: 40px;
}
</style>

331
src/views/Exhibition/Germany/components/TopRBox.vue Normal file
View File

@ -0,0 +1,331 @@
<template>
<div class="r-box-container">
<div class="pos-label">
<div class="box-item">{{ tLang('messages', '机架号') }}：<div></div>
</div>
</div>
<div class="box-item pos1">
{{ tLang('messages', '设备状态') }}:
<div class="status green"></div>
</div>
<div class="icon-box-item pos2">
<div class="icon-div">
<div class="iconfont icon-caijian"></div>
<div>111</div>
</div>
<span>{{ tLang('messages', '剪线次数') }}</span>
</div>
<div class="icon-box-item pos3">
<div class="icon-div">
<div class="iconfont icon-jizhenzhenshu"></div>
<div>111</div>
</div>
<span>{{ tLang('messages', '针数') }}</span>
</div>
<div class="icon-box-item pos4">
<div class="icon-div">
<div class="iconfont icon-zidongtaiyajiao"></div>
<div>111</div>
</div>
<span>{{ tLang('messages', '压脚次数') }}</span>
</div>
<v-chart class="chart-class" :option="gauge_option"></v-chart>
<div class="image-div">
<el-image :src="gyfrjImg" fit="contain"></el-image>
</div>
<div class="fill-box">
<v-chart class="chart-class-fill" :option="fill_option"></v-chart>
<data value="fill-title">{{ tLang('messages','能耗') }}(kW·h)</data>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
import 'echarts-liquidfill'
const { proxy } = getCurrentInstance()
let gyfrjImg = require('./../images/gyfrj.png');
let gauge_option = ref({
series: [
{
type: 'gauge',
radius: '100%',
startAngle: 180,
endAngle: 0,
min: 0,
max: 3000,
splitNumber: 8,
itemStyle: {
color: '#58D9F9',
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 5,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 8
},
pointer: {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '60%',
width: 5,
offsetCenter: [0, '5%']
},
axisLine: {
roundCap: true,
lineStyle: {
width: 8
}
},
axisTick: {
splitNumber: 2,
lineStyle: {
width: 1,
color: '#999'
}
},
splitLine: {
length: 1,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
distance: 20,
color: '#999',
fontSize: 8
},
title: {
show: false
},
detail: {
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: 2,
width: '80%',
lineHeight: 24,
height: 20,
borderRadius: 8,
offsetCenter: [0, '35%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|rpm/min}';
},
rich: {
value: {
fontSize: 14,
fontWeight: 'bolder',
color: '#777'
},
unit: {
fontSize: 12,
color: '#999',
padding: [0, 0, -1, 1]
}
}
},
data: [
{
value: 900
}
]
}
]
})
let fill_option = ref({
series: [{
type: 'liquidFill',
radius: '80%', //水球大小
shape: 'rect',
center: ['50%', '50%'],
waveAnimation: true,
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#138FE2',
},
{
offset: 1,
color: '#126ABC',
},
],
globalCoord: false,
},
],
data: [0.7, 0.7], // data个数代表波浪数
amplitude: 10, //振幅
backgroundStyle: {
borderWidth: 2, //边框大小
borderColor: 'rgba(17, 94, 176, 0.8)',//边框颜色
color: 'rgba(17, 94, 176, 0.4)',
},
label: {
normal: {
textStyle: {
fontSize: 24,
fontWeight: 'bold',
color: '#fff',
},
formatter: function (params) {
return params.value
}
},
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 4,
borderColor: 'transparent',
},
},
}],
})
</script>
<style lang="scss" scoped>
@import url("@/assets/css/iconfont/germany/iconfont.css");
.r-box-container {
width: 100%;
height: 100%;
display: flex;
.pos-label {
position: absolute;
top: 30px;
right: 26px;
width: 50%;
height: 30px;
.box-item {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 10px;
box-sizing: border-box;
div {
margin-left: 20px;
}
}
}
.box-item {
position: absolute;
width: 50%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
div {
margin-left: 20px;
}
.icon-div {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
}
.icon-box-item {
position: absolute;
width: 50%;
div {
margin-left: 20px;
}
span {
text-align: center;
}
.icon-div {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
}
.chart-class {
position: absolute;
right: 12px;
top: 60px;
width: 364px;
height: 250px;
}
.fill-box {
position: absolute;
right: 0px;
bottom: 13px;
width: 180px;
height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.chart-class-fill {
width: 180px;
height: 220px;
}
.fill-title {
}
}
.image-div {
position: absolute;
right: 157px;
top: 242px;
width: 216px;
height: 138px;
}
.pos1 {
top: 100px;
left: 24px;
}
.pos2 {
top: 140px;
left: 0;
}
.pos3 {
top: 312px;
left: -33px;
}
.pos4 {
bottom: 14px;
left: 163px;
}
.iconfont {
font-size: 100px;
color: #7BFEB1;
}
}
</style>

BIN
src/views/Exhibition/Germany/images/lq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

257
src/views/Exhibition/Germany/index.vue Normal file
View File

@ -0,0 +1,257 @@
<template>
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
:typeFun="['time']" :alarmType="[]"></header2>
</div>
</div>
<div class="content">
<div class="top-content">
<div class="top-left-content">
<BorderView :title="'冲缝一体机'">
<TopLBox :data="cfytj" :warning="warning"></TopLBox>
</BorderView>
</div>
<div class="top-center-content">
<!-- <video controls loop autoplay="true" muted ref="videoElement" width="720">
<source :src="videoUrl" type="video/mp4" />
</video> -->
</div>
<div class="top-right-content">
<BorderView :title="'工业缝纫机'">
<TopRBox :data="gyfrj"></TopRBox>
</BorderView>
</div>
</div>
<div class="bottom-content">
<div class="bottom-left-content">
<BorderView :title="'立切180双喷'">
<BottomLBox :data="lq"></BottomLBox>
</BorderView>
</div>
<div class="bottom-center-content">
<BorderView :title="'设备稼动率'">
<BottomCBox></BottomCBox>
</BorderView>
</div>
<div class="bottom-right-content">
<BorderView :title="'产出进度'">
<BottomRBox></BottomRBox>
</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,} from "vue";
import {dDeviceList} from '@/http/Exhibition/Germany'
import BorderView from "./components/Border.vue";
import header2 from "./components/header2.vue";
import TopLBox from "./components/TopLBox.vue";
import TopRBox from "./components/TopRBox.vue";
import BottomLBox from "./components/BottomLBox.vue";
import BottomCBox from "./components/BottomCBox.vue";
import BottomRBox from "./components/BottomRBox.vue";
const { proxy } = getCurrentInstance();
let videoUrl = ref('https://d.tufting222.cn/video/yzy/micor_edos_english.mp4')
let cfytj = ref({})
let gyfrj = ref({})
let lq = ref({})
let bar = ref({})
let pie = ref()
let warning = ref(false)
function init() {
dDeviceList().then((res:any) => {
if (res.code == 200) {
let data:any = res.data
data.forEach(item=>{
if(item.name == '工业缝纫机') {
gyfrj.value = item
} else if(item.name == '冲缝一体机') {
cfytj.value = item
} else if(item.name == '立切机180双喷机') {
lq.value = item
}
})
}
})
}
onMounted(()=>{
init()
})
</script>
<style scoped lang="scss">
.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;
flex-direction: column;
font-size: 24px;
color: #00ffff;
.top-content {
height: 516px;
width: 1920px;
display: flex;
flex-direction: row;
justify-content: space-between;
.top-left-content {
width: 600px;
height: 100%;
}
.top-center-content {
flex: 1;
height: 100%;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
}
.top-right-content {
width: 600px;
height: 100%;
}
}
.bottom-content {
height: 456px;
width: 1920px;
display: flex;
flex-direction: row;
justify-content: space-between;
.bottom-left-content {
width: 460px;
height: 100%;
}
.bottom-center-content {
width: 680px;
height: 100%;
}
.bottom-right-content {
width: 760px;
height: 100%;
}
}
}
}
.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%;
}
}
}
:deep(.green) {
background-color: #7cffb2;
}
:deep(.green-color) {
color: #7cffb2;
}
:deep(.yello) {
background-color: #fddd60;
}
:deep(.yello-color) {
color: #fddd60;
}
:deep(.red) {
background-color: #ff6e76;
}
:deep(.red-color) {
color: #ff6e76;
}
:deep(.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>

4
src/views/MicroExhibition/index.vue
View File

@ -80,7 +80,7 @@ let { t } = useI18n();
let route = useRoute()
const store = useMicroExhibitionStore()
let lang = route.query.lang as string
let videoUrl = ref('http://d.tufting222.cn/video/yzy/a.mp4')
let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
const videoElement = ref(null)
let timer = null
let thisLang = getStoredLanguage();
@ -283,7 +283,7 @@ function errWebsocket(val) {
onMounted(() => {
if (thisLang&&thisLang != "简体中文") {
videoUrl.value = "http://d.tufting222.cn/video/yzy/micor_edos_english.mp4"
videoUrl.value = "https://d.tufting222.cn/video/yzy/micor_edos_english.mp4"
}
getDeviceProduction()

2
src/views/energyConsumeJixiefenchang/content/chart/water.vue
View File

@ -157,9 +157,11 @@ defineExpose({
margin: 20px;
font-size: 20px;
}
.gasborder {
position: relative;
}
.gasborder h1 {
position: absolute;
top: 20px;