代码提交
|
|
@ -0,0 +1 @@
|
|||
{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.3.1","m_IsReadOnly":true}]}
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 175 B |
|
After Width: | Height: | Size: 96 B |
|
After Width: | Height: | Size: 109 B |
|
After Width: | Height: | Size: 74 B |
|
After Width: | Height: | Size: 84 B |
|
|
@ -0,0 +1,16 @@
|
|||
body { padding: 0; margin: 0 }
|
||||
#unity-container { position: absolute }
|
||||
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
|
||||
#unity-container.unity-mobile { width: 100%; height: 100% }
|
||||
#unity-canvas { background: #231F20 }
|
||||
.unity-mobile #unity-canvas { width: 100%; height: 100% }
|
||||
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
|
||||
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
|
||||
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
|
||||
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
|
||||
#unity-footer { position: relative }
|
||||
.unity-mobile #unity-footer { display: none }
|
||||
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
|
||||
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
|
||||
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
|
||||
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Unity WebGL Player | BusinessHall2023</title>
|
||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
</head>
|
||||
<style>
|
||||
html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="unity-container" style="width: 100%;height: 100%;" class="unity-desktop">
|
||||
<canvas id="unity-canvas" style="width: 100%;height: 100%;"></canvas>
|
||||
<div id="unity-loading-bar">
|
||||
<div id="unity-logo"></div>
|
||||
<div id="unity-progress-bar-empty">
|
||||
<div id="unity-progress-bar-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="unity-warning"> </div>
|
||||
<div id="unity-footer">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var container = document.querySelector("#unity-container");
|
||||
var canvas = document.querySelector("#unity-canvas");
|
||||
var loadingBar = document.querySelector("#unity-loading-bar");
|
||||
var progressBarFull = document.querySelector("#unity-progress-bar-full");
|
||||
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
|
||||
var warningBanner = document.querySelector("#unity-warning");
|
||||
|
||||
// Shows a temporary message banner/ribbon for a few seconds, or
|
||||
// a permanent error message on top of the canvas if type=='error'.
|
||||
// If type=='warning', a yellow highlight color is used.
|
||||
// Modify or remove this function to customize the visually presented
|
||||
// way that non-critical warnings and error messages are presented to the
|
||||
// user.
|
||||
function unityShowBanner(msg, type) {
|
||||
function updateBannerVisibility() {
|
||||
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||
}
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = msg;
|
||||
warningBanner.appendChild(div);
|
||||
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||||
else {
|
||||
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||
setTimeout(function() {
|
||||
warningBanner.removeChild(div);
|
||||
updateBannerVisibility();
|
||||
}, 5000);
|
||||
}
|
||||
updateBannerVisibility();
|
||||
}
|
||||
|
||||
var buildUrl = "Build";
|
||||
var loaderUrl = buildUrl + "/YuHua_BusinessHall.loader.js";
|
||||
var config = {
|
||||
dataUrl: buildUrl + "/YuHua_BusinessHall.data.unityweb",
|
||||
frameworkUrl: buildUrl + "/YuHua_BusinessHall.framework.js.unityweb",
|
||||
codeUrl: buildUrl + "/YuHua_BusinessHall.wasm.unityweb",
|
||||
streamingAssetsUrl: "StreamingAssets",
|
||||
companyName: "DefaultCompany",
|
||||
productName: "BusinessHall2023",
|
||||
productVersion: "0.1",
|
||||
showBanner: unityShowBanner,
|
||||
};
|
||||
|
||||
// By default Unity keeps WebGL canvas render target size matched with
|
||||
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
|
||||
// Set this to false if you want to decouple this synchronization from
|
||||
// happening inside the engine, and you would instead like to size up
|
||||
// the canvas DOM size and WebGL render target sizes yourself.
|
||||
// config.matchWebGLToCanvasSize = false;
|
||||
|
||||
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
|
||||
// Mobile device style: fill the whole browser client area with the game canvas:
|
||||
|
||||
var meta = document.createElement('meta');
|
||||
meta.name = 'viewport';
|
||||
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
||||
document.getElementsByTagName('head')[0].appendChild(meta);
|
||||
container.className = "unity-mobile";
|
||||
|
||||
// To lower canvas resolution on mobile devices to gain some
|
||||
// performance, uncomment the following line:
|
||||
// config.devicePixelRatio = 1;
|
||||
|
||||
canvas.style.width = window.innerWidth + 'px';
|
||||
canvas.style.height = window.innerHeight + 'px';
|
||||
|
||||
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
||||
} else {
|
||||
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||
|
||||
// canvas.style.width = "960px";
|
||||
// canvas.style.height = "600px";
|
||||
}
|
||||
|
||||
loadingBar.style.display = "block";
|
||||
|
||||
var script = document.createElement("script");
|
||||
var unityInstanceA;
|
||||
script.src = loaderUrl;
|
||||
script.onload = () => {
|
||||
createUnityInstance(canvas, config, (progress) => {
|
||||
progressBarFull.style.width = 100 * progress + "%";
|
||||
}).then((unityInstance) => {
|
||||
unityInstanceA = unityInstance
|
||||
loadingBar.style.display = "none";
|
||||
// fullscreenButton.onclick = () => {
|
||||
// unityInstance.SetFullscreen(1);
|
||||
// };
|
||||
}).catch((message) => {
|
||||
alert(message);
|
||||
});
|
||||
};
|
||||
function updateSence(val){
|
||||
unityInstanceA.SendMessage('GameManager','JumpToPos',1)
|
||||
}
|
||||
setTimeout(()=>{
|
||||
updateSence(1)
|
||||
},10000)
|
||||
document.body.appendChild(script);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
15
src/App.vue
|
|
@ -16,18 +16,19 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<div>
|
||||
天气 :
|
||||
<div class="topRight" >
|
||||
<div style="font-family:maleGod">
|
||||
天气
|
||||
<img src="./assets/weather/sun.png"/>
|
||||
多云
|
||||
</div>
|
||||
<div style="color:rgb(57,173,194)">| 5~25℃</div>
|
||||
<div style="color:rgb(57,173,194);font-family: maleGod;"> 15~25℃</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -47,8 +48,9 @@ export default {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* text-align: center; */
|
||||
background: #040f26;
|
||||
/* background: #040f26; */
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
body{
|
||||
margin: 0;
|
||||
|
|
@ -61,6 +63,8 @@ export default {
|
|||
height: 8.6%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
position: relative;
|
||||
z-index: 999999;
|
||||
.topLeft{
|
||||
width: 11%;
|
||||
height: 55%;
|
||||
|
|
@ -100,4 +104,5 @@ export default {
|
|||
position: relative;
|
||||
top: -3.8%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 809 B |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 483 KiB |
|
After Width: | Height: | Size: 483 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -336,6 +336,9 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handelBtn(index) {
|
||||
|
||||
document.getElementById('iframe').contentWindow.GameManager(index)
|
||||
console.log(document.getElementById('iframe').contentWindow,'3398');
|
||||
this.btnAc = index;
|
||||
},
|
||||
//隐藏菜单按钮
|
||||
|
|
@ -366,6 +369,7 @@ export default {
|
|||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background: url("../assets/images/assetsLeft.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.btnLeft {
|
||||
|
|
@ -415,6 +419,7 @@ export default {
|
|||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
.rightOne {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,233 +1,346 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
|
||||
<!-- 三维模型 -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 左边的内容 -->
|
||||
<transition name="left">
|
||||
<div class="left-content" v-show="menuShow">
|
||||
<!-- 营业临厅时长 -->
|
||||
<div class="business-hall">
|
||||
<div class="title">
|
||||
<!-- 45.4% -->
|
||||
<p class="titleText" text="营业厅时长" style="font-family: maleGod">
|
||||
营业厅时长
|
||||
</p>
|
||||
</div>
|
||||
<!-- 两个小版块 -->
|
||||
<div class="hall-box">
|
||||
<div class="item" v-for="(item, i) in hallList" :key="i">
|
||||
<p class="font">{{ item.font }}</p>
|
||||
<p :class="'hall-time' + i">{{ item.time }}</p>
|
||||
<div class="left-content" v-show="menuShow">
|
||||
<!-- 营业临厅时长 -->
|
||||
<div class="business-hall">
|
||||
<div class="title">
|
||||
<!-- 45.4% -->
|
||||
<p class="titleText" text="营业厅时长" style="font-family: maleGod">
|
||||
营业厅时长
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表内容样式 -->
|
||||
<div class="hall-line">
|
||||
<div class="hall-title">
|
||||
<div>
|
||||
<span style="font-family: 'maleGod'" v-for="(s, i) in hallTitle" :class="'span' + i">
|
||||
<!-- 两个小版块 -->
|
||||
<div class="hall-box">
|
||||
<div class="item" v-for="(item, i) in hallList" :key="i">
|
||||
<p class="font">{{ item.font }}</p>
|
||||
<p :class="'hall-time' + i">{{ item.time }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表内容样式 -->
|
||||
<div class="hall-line">
|
||||
<div class="hall-title">
|
||||
<div>
|
||||
<span style="font-family: 'maleGod'" v-for="(s, i) in hallTitle" :class="'span' + i">
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div class="hall-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-title">
|
||||
<span v-for="(s, i) in hallLineList">
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="hall-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<!-- 图表样式 -->
|
||||
<div class="hall-chart" ref="hallChart"></div>
|
||||
</div>
|
||||
<!-- 客流量 -->
|
||||
<div class="passenger-flow">
|
||||
<div class="title">
|
||||
<p class="titleText" text="客流量" style="font-family: maleGod">
|
||||
客流量
|
||||
</p>
|
||||
</div>
|
||||
<!-- 客流量板块内容 -->
|
||||
<div class="flow-box">
|
||||
<div class="flow-left">
|
||||
<p class="flow-total">总客流量</p>
|
||||
<span class="flow-value">6587次</span>
|
||||
</div>
|
||||
<div class="flow-right">
|
||||
<ul>
|
||||
<li class="flow-item" v-for="(val, i) in flowList">
|
||||
<span :class="'up' + i"><i :class="'rect' + i"></i>{{ val.value }}</span>
|
||||
<span>{{ val.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表切换 -->
|
||||
<div class="chart-title">
|
||||
<span v-for="(s, i) in hallLineList">
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flow-chart" ref="flowChart"></div>
|
||||
</div>
|
||||
<!-- 图表样式 -->
|
||||
<div class="hall-chart" ref="hallChart"></div>
|
||||
</div>
|
||||
<!-- 客流量 -->
|
||||
<div class="passenger-flow">
|
||||
<div class="title">
|
||||
<p class="titleText" text="客流量" style="font-family: maleGod">
|
||||
客流量
|
||||
</p>
|
||||
</div>
|
||||
<!-- 客流量板块内容 -->
|
||||
<div class="flow-box">
|
||||
<div class="flow-left">
|
||||
<p class="flow-total">总客流量</p>
|
||||
<span class="flow-value">6587次</span>
|
||||
<!-- 厅内统计 -->
|
||||
<div class="hall-statistics">
|
||||
<div class="title">
|
||||
<p class="titleText" text="厅内统计" style="font-family: maleGod">
|
||||
厅内统计
|
||||
</p>
|
||||
</div>
|
||||
<div class="flow-right">
|
||||
<ul>
|
||||
<li class="flow-item" v-for="(val, i) in flowList">
|
||||
<span :class="'up' + i"><i :class="'rect' + i"></i>{{ val.value }}</span>
|
||||
<span>{{ val.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表切换 -->
|
||||
<div class="chart-title">
|
||||
<span v-for="(s, i) in hallLineList">
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flow-chart" ref="flowChart"></div>
|
||||
</div>
|
||||
<!-- 厅内统计 -->
|
||||
<div class="hall-statistics">
|
||||
<div class="title">
|
||||
<p class="titleText" text="厅内统计" style="font-family: maleGod">
|
||||
厅内统计
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div v-for="(o, i) in statList" :key="i" class="stat-item">
|
||||
<section :class="'img' + i"></section>
|
||||
<p>{{ o.name }}</p>
|
||||
<p class="stat-num">{{ o.num }}</p>
|
||||
<div class="stat">
|
||||
<div v-for="(o, i) in statList" :key="i" class="stat-item">
|
||||
<section :class="'img' + i"></section>
|
||||
<p>{{ o.name }}</p>
|
||||
<p class="stat-num">{{ o.num }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 右边的内容 -->
|
||||
<transition name="right">
|
||||
<div class="right-content" v-show="menuShow">
|
||||
<!-- 缴费情况 -->
|
||||
<div class="payment">
|
||||
<div class="title">
|
||||
<p class="titleText" text="缴费情况" style="font-family: 'maleGod'">
|
||||
缴费情况
|
||||
</p>
|
||||
</div>
|
||||
<div class="paymentContent">
|
||||
<div class="paymentList" v-for="(item, index) in paymentList" :key="index">
|
||||
<div class="listOne">
|
||||
<img src="../assets/images/paymentYuan.png" style="width: 18px; height: 18px" />
|
||||
<div style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'">
|
||||
{{ item.count }}
|
||||
<div class="right-content" v-show="menuShow">
|
||||
<!-- 缴费情况 -->
|
||||
<div class="payment">
|
||||
<div class="title">
|
||||
<p class="titleText" text="缴费情况" style="font-family: 'maleGod'">
|
||||
缴费情况
|
||||
</p>
|
||||
</div>
|
||||
<div class="paymentContent">
|
||||
<div class="paymentList" v-for="(item, index) in paymentList" :key="index">
|
||||
<div class="listOne">
|
||||
<img src="../assets/images/paymentYuan.png" style="width: 18px; height: 18px" />
|
||||
<div style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'">
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="listTwo">
|
||||
<div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
|
||||
<div :style="{ color: item.color }" style="font-family: 'maleGod'">
|
||||
{{ item.per }}
|
||||
</div>
|
||||
<img :src="item.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="listTwo">
|
||||
<div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
|
||||
<div :style="{ color: item.color }" style="font-family: 'maleGod'">
|
||||
{{ item.per }}
|
||||
<div class="twoTitle">
|
||||
<p class="titleText" text="缴费情况分布" style="font-family: 'maleGod'">
|
||||
缴费情况分布
|
||||
</p>
|
||||
<div class="titleIcon">
|
||||
<img src="../assets/images/xianxing.png" style="width: 17px; height: 14px" @click="handelXian" />
|
||||
<img src="../assets/images/bingzhuang.png" style="width: 16px; height: 16px" @click="handelBing" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="rightOneXian" v-show="payOneShow"></div>
|
||||
<div id="rightOneBing" v-show="!payOneShow"></div>
|
||||
<div class="selectType">
|
||||
<div v-for="(item, index) in paymentTypeList" :key="index" class="typeName"
|
||||
:class="{ typeNameAction: typeActive == index }" @click="paymentType(index)">
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
<img :src="item.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="twoTitle">
|
||||
<p class="titleText" text="缴费情况分布" style="font-family: 'maleGod'">
|
||||
缴费情况分布
|
||||
</div>
|
||||
<!-- 业务受理 -->
|
||||
<div class="business-acceptance">
|
||||
<div class="title">
|
||||
<p class="titleText" text="业务受理" style="font-family: 'maleGod'">
|
||||
业务受理
|
||||
</p>
|
||||
<div class="titleIcon">
|
||||
<img src="../assets/images/xianxing.png" style="width: 17px; height: 14px" @click="handelXian" />
|
||||
<img src="../assets/images/bingzhuang.png" style="width: 16px; height: 16px" @click="handelBing" />
|
||||
<img src="../assets/images/xianxing.png" style="width: 17px; height: 14px" @click="businessXian" />
|
||||
<img src="../assets/images/bingzhuang.png" style="width: 16px; height: 16px" @click="businessBing" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="rightOneXian" v-show="payOneShow"></div>
|
||||
<div id="rightOneBing" v-show="!payOneShow"></div>
|
||||
<div class="selectType">
|
||||
<div v-for="(item, index) in paymentTypeList" :key="index" class="typeName"
|
||||
:class="{ typeNameAction: typeActive == index }" @click="paymentType(index)">
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 业务受理 -->
|
||||
<div class="business-acceptance">
|
||||
<div class="title">
|
||||
<p class="titleText" text="业务受理" style="font-family: 'maleGod'">
|
||||
业务受理
|
||||
</p>
|
||||
<div class="titleIcon">
|
||||
<img src="../assets/images/xianxing.png" style="width: 17px; height: 14px" @click="businessXian" />
|
||||
<img src="../assets/images/bingzhuang.png" style="width: 16px; height: 16px" @click="businessBing" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="businessContent">
|
||||
<div class="businessList" v-for="(item, index) in businessList" :key="index">
|
||||
<div class="listOne">
|
||||
<img src="../assets/images/paymentYuan.png" style="width: 18px; height: 18px" />
|
||||
<div style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'">
|
||||
{{ item.count }}
|
||||
<div class="businessContent">
|
||||
<div class="businessList" v-for="(item, index) in businessList" :key="index">
|
||||
<div class="listOne">
|
||||
<img src="../assets/images/paymentYuan.png" style="width: 18px; height: 18px" />
|
||||
<div style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'">
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="listTwo">
|
||||
<div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
|
||||
<div :style="{ color: item.color }" style="font-family: 'maleGod'">
|
||||
{{ item.per }}
|
||||
</div>
|
||||
<img :src="item.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="listTwo">
|
||||
<div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
|
||||
<div :style="{ color: item.color }" style="font-family: 'maleGod'">
|
||||
{{ item.per }}
|
||||
</div>
|
||||
<img :src="item.icon" />
|
||||
<div class="businessChart">
|
||||
<div id="rightBusinessOne" v-show="!businessShow"></div>
|
||||
<div id="rightBusinessTwo" v-show="businessShow"></div>
|
||||
<!-- <div class="rightBusinessOneList"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="businessChart">
|
||||
<div id="rightBusinessOne" v-show="!businessShow"></div>
|
||||
<div id="rightBusinessTwo" v-show="businessShow"></div>
|
||||
<!-- <div class="rightBusinessOneList"></div> -->
|
||||
</div>
|
||||
<!-- 服务情况 -->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<p class="titleText" text="服务情况" style="font-family: 'maleGod'">
|
||||
服务情况
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务情况 -->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<p class="titleText" text="服务情况" style="font-family: 'maleGod'">
|
||||
服务情况
|
||||
</p>
|
||||
</div>
|
||||
<div class="serviceContent">
|
||||
<div class="serviceOne">
|
||||
<div v-for="(item, idnex) in serviceList" :key="index" class="serviceList">
|
||||
<div style="color: rgb(182, 182, 190)">{{ item.name }}</div>
|
||||
<div style="
|
||||
<div class="serviceContent">
|
||||
<div class="serviceOne">
|
||||
<div v-for="(item, idnex) in serviceList" :key="index" class="serviceList">
|
||||
<div style="color: rgb(182, 182, 190)">{{ item.name }}</div>
|
||||
<div style="
|
||||
color: rgb(75, 190, 221);
|
||||
font-family: 'maleGod';
|
||||
font-size: 25px;
|
||||
">
|
||||
{{ item.count }}
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="serviceTwo"></div>
|
||||
<div class="selectType">
|
||||
<div v-for="(item, index) in serviceTypeList" :key="index" class="typeName"
|
||||
:class="{ serveiceAction: serviceTypeActive == index }" @click="serviceType(index)">
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="serviceTwo"></div>
|
||||
<div class="selectType">
|
||||
<div v-for="(item, index) in serviceTypeList" :key="index" class="typeName"
|
||||
:class="{ serveiceAction: serviceTypeActive == index }" @click="serviceType(index)">
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="middle-content">
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<div class="dialog" v-if="dialogShow == true">
|
||||
<div class="dialogBg">
|
||||
<div class="closeBtn" @click="dialogShow = false"> </div>
|
||||
<div class="title" style='line-height:25px;'>
|
||||
<p class="titleText" text="工单明细"
|
||||
style="font-family: 'maleGod';text-align: center;color: #ffffff;word-spacing: 10px;">
|
||||
工单明细
|
||||
</p>
|
||||
<p class="titleUnder"></p>
|
||||
<el-table :data="tableData" size="small" style="width: 100%">
|
||||
<el-table-column prop="xuHao" label="序号" width="60">
|
||||
</el-table-column>
|
||||
<el-table-column prop="id" label="工单编号" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column prop="processName" label="流程名称" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="业务名称" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column prop="unit" label="供电单位" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column prop="people1" label="发起人员" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column prop="people2" label="签收人员" width="90">
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" label="流程开始时间" width="110">
|
||||
</el-table-column>
|
||||
<el-table-column prop="endTime" label="流程结束时间" width="110">
|
||||
</el-table-column>
|
||||
<el-table-column prop="TTR" label="流程预警时间">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="400">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="middle-content">
|
||||
<!-- 内容头部 -->
|
||||
<div class="middleTop">
|
||||
<div :class="'top-item' + i" v-for="(n, i) in middleTopList" :key="i">
|
||||
<div style="width:100%;text-align:center;padding-left:61px;box-sizing: border-box;margin-top: 14px;">
|
||||
<div :class="'top-item' + i" v-for="(n, i) in middleTopList" :key="i" v-if="smartPageShow == false&&equimentAssetsShow==false">
|
||||
<div @click="topHandle()"
|
||||
style="width:100%;text-align:center;padding-left:61px;box-sizing: border-box;margin-top: 14px;">
|
||||
<p class="item-name">{{ n.name }}</p>
|
||||
<p :class="'item-value' + i">{{ n.num }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div :class="'top-item1' + i" v-for="(n, i) in middleTopList1" :key="i" v-if="smartPageShow == true&&equimentAssetsShow==false">
|
||||
<div @click="topHandle()"
|
||||
style="width:100%;text-align:center;padding-left:61px;box-sizing: border-box;margin-top: 14px;">
|
||||
<p class="item-name">{{ n.name }}</p>
|
||||
<p :class="'item-value' + i">{{ n.num }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="middleBottom">
|
||||
<div class="menuBtn" :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
|
||||
<img :src="menuAc != index ? item.icon : item.iconAc"/>
|
||||
<div class="menuBtn" :class="{ 'menuBtn1': menuAc == index }" v-for="(item, index) in menu" :key="index"
|
||||
@click="handelBtn(index)">
|
||||
<img :src="menuAc != index ? item.icon : item.iconAc" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="middleBottomIcon">
|
||||
</div>
|
||||
|
||||
<div class="unityBg">
|
||||
<iframe id="iframe" frameborder="0" width="100%" height="100%" ref="iframe" src="/YuHua_BusinessHall/index.html"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="left-mask">
|
||||
|
||||
</div>
|
||||
<div class="right-mask">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<equipment-assets ref="equimentAssets" class="equimentAssets" v-show="equimentAssetsShow"/>
|
||||
<smartPage ref="smartPage" class="smartPage" v-show="smartPageShow"/>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
|
||||
|
||||
|
||||
<equipment-assets ref="equimentAssets" class="equimentAssets" v-show="equimentAssetsShow" />
|
||||
<smartPage ref="smartPage" class="smartPage" v-show="smartPageShow" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// document.getElementById('iframe').contentWindow.unityInstanceA.SetFullscreen(1);
|
||||
import equipmentAssets from "./equipmentAssets.vue";
|
||||
import smartPage from "./smartPage.vue";
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
// 弹窗数据
|
||||
tableData: [
|
||||
{
|
||||
xuHao: 1,
|
||||
id: 3223020200113318,
|
||||
processName: '智慧运维异常处理',
|
||||
name: '营业厅处理',
|
||||
unit: '南京供电公司市区',
|
||||
people1: '袁婷婷',
|
||||
people2: '钱文哲',
|
||||
startTime: '2023-02-02 16:37:24',
|
||||
endTime: '2023-02-02 16:37:24',
|
||||
TTR: ''
|
||||
},
|
||||
{
|
||||
xuHao: 1,
|
||||
id: 3223020200113318,
|
||||
processName: '智慧运维异常处理',
|
||||
name: '营业厅处理',
|
||||
unit: '南京供电公司市区',
|
||||
people1: '袁婷婷',
|
||||
people2: '钱文哲',
|
||||
startTime: '2023-02-02 16:37:24',
|
||||
endTime: '2023-02-02 16:37:24',
|
||||
TTR: ''
|
||||
},
|
||||
{
|
||||
xuHao: 1,
|
||||
id: 3223020200113318,
|
||||
processName: '智慧运维异常处理',
|
||||
name: '营业厅处理',
|
||||
unit: '南京供电公司市区',
|
||||
people1: '袁婷婷',
|
||||
people2: '钱文哲',
|
||||
startTime: '2023-02-02 16:37:24',
|
||||
endTime: '2023-02-02 16:37:24',
|
||||
TTR: ''
|
||||
}
|
||||
],
|
||||
dialogShow: false,//弹窗显示
|
||||
|
||||
menuShow: true, //菜单显示
|
||||
equimentAssetsShow: false, //设备资产
|
||||
smartPageShow: false, //智慧
|
||||
|
|
@ -243,6 +356,7 @@ export default {
|
|||
],
|
||||
hallTitle: ["平均办理时长", "平均等待时长"],
|
||||
hallLineList: ["人员", "趋势", "排序", "排名"],
|
||||
// 流量列表
|
||||
flowList: [
|
||||
{
|
||||
text: "峰值",
|
||||
|
|
@ -330,6 +444,7 @@ export default {
|
|||
icon: require("@/assets/images/jiantou.png"),
|
||||
},
|
||||
], //业务值
|
||||
// 服务事件列表
|
||||
serviceList: [
|
||||
{
|
||||
name: "服务不规范事件",
|
||||
|
|
@ -358,7 +473,29 @@ export default {
|
|||
name: "排名",
|
||||
},
|
||||
],
|
||||
// 内容头部
|
||||
// 内容头部1
|
||||
middleTopList1: [
|
||||
{
|
||||
name: "故障报警",
|
||||
num: 2,
|
||||
},
|
||||
{
|
||||
name: "发起报备",
|
||||
num: 6,
|
||||
},
|
||||
{
|
||||
name: "消缺督办",
|
||||
num: 24,
|
||||
},
|
||||
{
|
||||
name: "同城异步需求推送",
|
||||
num: 0,
|
||||
},
|
||||
{
|
||||
name: "培训需求",
|
||||
num: 34,
|
||||
},
|
||||
],
|
||||
middleTopList: [
|
||||
{
|
||||
name: "工单总数",
|
||||
|
|
@ -396,9 +533,14 @@ export default {
|
|||
},
|
||||
],
|
||||
menuAc: 0,
|
||||
|
||||
currentPage4: 1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// this.$refs.iframe.contentWindow.fullscreen(1);
|
||||
// console.log(document.getElementById('iframe').contentWindow.fullscreen());
|
||||
this.rightOneXian();
|
||||
this.serviceTwo();
|
||||
this.rightBusinessTwo();
|
||||
|
|
@ -408,10 +550,20 @@ export default {
|
|||
this.handelBtn(0);
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
},
|
||||
// 弹窗
|
||||
topHandle() {
|
||||
this.dialogShow = true
|
||||
},
|
||||
//菜单切换
|
||||
handelBtn(index) {
|
||||
this.menuAc = index;
|
||||
let that = this;
|
||||
let that = this;
|
||||
if (index == 0) {
|
||||
//如果当前页面为设备资产
|
||||
if (this.equimentAssetsShow == true) {
|
||||
|
|
@ -419,13 +571,13 @@ export default {
|
|||
window.setTimeout(() => {
|
||||
that.equimentAssetsShow = false;
|
||||
that.menuShow = true;
|
||||
}, 1500);
|
||||
}, 1000);
|
||||
} else if (this.smartPageShow == true) {
|
||||
this.$refs.smartPage.menuShow1();
|
||||
window.setTimeout(() => {
|
||||
that.smartPageShow = false;
|
||||
that.menuShow = true;
|
||||
}, 1500);
|
||||
}, 1000);
|
||||
}
|
||||
} else if (index == 1) {
|
||||
if (this.menuShow == true) {
|
||||
|
|
@ -433,14 +585,14 @@ export default {
|
|||
window.setTimeout(() => {
|
||||
that.smartPageShow = true;
|
||||
that.$refs.smartPage.handleShow();
|
||||
}, 1500);
|
||||
}, 1000);
|
||||
} else if (this.equimentAssetsShow == true) {
|
||||
this.$refs.equimentAssets.menuHandel();
|
||||
window.setTimeout(() => {
|
||||
that.equimentAssetsShow = false;
|
||||
that.smartPageShow = true;
|
||||
this.$refs.smartPage.handleShow();
|
||||
}, 1500);
|
||||
}, 1000);
|
||||
}
|
||||
} else if (index == 2) {
|
||||
if (this.menuShow == true) {
|
||||
|
|
@ -448,14 +600,14 @@ export default {
|
|||
window.setTimeout(() => {
|
||||
that.equimentAssetsShow = true;
|
||||
that.$refs.equimentAssets.menuHandelShow();
|
||||
}, 1500);
|
||||
}, 1000);
|
||||
} else if (this.smartPageShow == true) {
|
||||
this.$refs.smartPage.menuShow1();
|
||||
window.setTimeout(() => {
|
||||
that.smartPageShow = false;
|
||||
that.equimentAssetsShow = true;
|
||||
that.$refs.equimentAssets.menuHandelShow();
|
||||
}, 1500);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -558,7 +710,7 @@ export default {
|
|||
show: true, //开启显示
|
||||
color: "#d8d4d7",
|
||||
position: "top", //在上方显示
|
||||
formatter: function (res) {},
|
||||
formatter: function (res) { },
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -684,7 +836,7 @@ export default {
|
|||
show: true, //开启显示
|
||||
color: "#d8d4d7",
|
||||
position: "top", //在上方显示
|
||||
formatter: function (res) {},
|
||||
formatter: function (res) { },
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -1653,6 +1805,57 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-around;
|
||||
z-index: 100;
|
||||
|
||||
.unityBg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.unityBg::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
.left-mask,.right-mask{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 559px;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
z-index: 100;
|
||||
|
||||
}
|
||||
.left-mask{
|
||||
background-image: url(../assets/images/left-mask.png);
|
||||
left: 0;
|
||||
}
|
||||
.right-mask{
|
||||
background-image: url(../assets/images/right-mask.png);
|
||||
right: 0;
|
||||
}
|
||||
/deep/ .el-table tr {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/deep/ .el-table__header {
|
||||
background-image: url(../assets/images/tableTItle.png);
|
||||
width: 977px;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
// background: url("../assets/images/tableBg.png") no-repeat;
|
||||
}
|
||||
|
||||
// /deep/ .el-table__header-wrapper , /deep/ .el-table thead ,/deep/ .el-table__header{
|
||||
// background-image: url(../assets/images/tableTItle.png);
|
||||
// width: 977px;
|
||||
// height: 100%;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
/deep/ .el-table .el-table__cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-content,
|
||||
|
|
@ -1661,6 +1864,48 @@ export default {
|
|||
width: 20.6%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
.dialog {
|
||||
position: fixed;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
|
||||
.dialogBg {
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
width: 1009px;
|
||||
height: 57.4%;
|
||||
background-image: url(../assets/images/dialog.png);
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
|
||||
.closeBtn {
|
||||
background-image: url(../assets/images/closeBtn.png);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.titleUnder {
|
||||
width: 100%;
|
||||
height: 9px;
|
||||
background-image: url(../assets/images/dialogTitle.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.middle-content {
|
||||
|
|
@ -1671,6 +1916,7 @@ export default {
|
|||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// z-index: 99;
|
||||
|
||||
.middleBottom {
|
||||
width: 52%;
|
||||
|
|
@ -1705,8 +1951,8 @@ export default {
|
|||
}
|
||||
|
||||
/* 内容板块背景 */
|
||||
.left-content > div,
|
||||
.right-content > div {
|
||||
.left-content>div,
|
||||
.right-content>div {
|
||||
background-image: url(../assets/images/border.png);
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -1797,11 +2043,9 @@ export default {
|
|||
z-index: 10;
|
||||
bottom: 0;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(
|
||||
to top,
|
||||
rgba(163, 227, 245, 0.7),
|
||||
transparent
|
||||
);
|
||||
-webkit-mask: linear-gradient(to top,
|
||||
rgba(163, 227, 245, 0.7),
|
||||
transparent);
|
||||
}
|
||||
|
||||
.hall-box .item {
|
||||
|
|
@ -1840,8 +2084,8 @@ export default {
|
|||
}
|
||||
|
||||
/* 标题的样式 */
|
||||
.left-content > div > .title,
|
||||
.right-content > div > .title {
|
||||
.left-content>div>.title,
|
||||
.right-content>div>.title {
|
||||
width: 100%;
|
||||
background-image: url(../assets/images/border-title.png);
|
||||
height: 30px;
|
||||
|
|
@ -2245,8 +2489,24 @@ export default {
|
|||
height: 70px;
|
||||
margin-top: 45px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
justify-content: space-around;
|
||||
|
||||
.top-item10{
|
||||
background-image: url(../assets/images/content-icon4.png);
|
||||
}
|
||||
.top-item11{
|
||||
background-image: url(../assets/images/smart-1.png);
|
||||
}
|
||||
.top-item12{
|
||||
background-image: url(../assets/images/smart-2.png);
|
||||
}
|
||||
.top-item13{
|
||||
background-image: url(../assets/images/smart-3.png);
|
||||
}
|
||||
.top-item14{
|
||||
background-image: url(../assets/images/smart-4.png);
|
||||
}
|
||||
// background-color: #1d62a3;
|
||||
div {
|
||||
width: 186px;
|
||||
|
|
@ -2299,6 +2559,7 @@ export default {
|
|||
background-image: url(../assets/images/content-icon5.png);
|
||||
}
|
||||
}
|
||||
|
||||
//left动画
|
||||
@keyframes donghua1 {
|
||||
from {
|
||||
|
|
@ -2309,6 +2570,7 @@ export default {
|
|||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.left-leave,
|
||||
.left-leave-active,
|
||||
.left-leave-to {
|
||||
|
|
@ -2320,6 +2582,7 @@ export default {
|
|||
.left-enter-to {
|
||||
animation: donghua1 1s linear reverse;
|
||||
}
|
||||
|
||||
//right动画
|
||||
@keyframes donghua2 {
|
||||
from {
|
||||
|
|
@ -2330,6 +2593,7 @@ export default {
|
|||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.right-leave,
|
||||
.right-leave-active,
|
||||
.right-leave-to {
|
||||
|
|
@ -2341,9 +2605,11 @@ export default {
|
|||
.right-enter-to {
|
||||
animation: donghua2 1s linear reverse;
|
||||
}
|
||||
|
||||
.equimentAssets {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.smartPage {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
<p class="titleText" text="排班管理" style="font-family: maleGod">
|
||||
排班管理
|
||||
</p>
|
||||
<!-- <p class="work-time">
|
||||
<p class="work-time">
|
||||
<el-date-picker v-model="workTime" type="date" placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</p> -->
|
||||
</p>
|
||||
</div>
|
||||
<!-- 当前值班人员 -->
|
||||
<div class="nowWork">
|
||||
|
|
@ -280,11 +280,27 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.el-date-editor.el-input {
|
||||
/deep/ .el-date-editor.el-input {
|
||||
width: 100px;
|
||||
|
||||
height: 30px;
|
||||
}
|
||||
/deep/ .work-time .el-input__inner{
|
||||
font-size: 12px;
|
||||
background-color: transparent;
|
||||
border: 1px solid #006b91;
|
||||
padding-right: 0;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.work-time{
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
top: 8px;
|
||||
}
|
||||
// 006b91
|
||||
/deep/ .el-input__icon{
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px !important;
|
||||
}
|
||||
|
|
@ -315,6 +331,7 @@ export default {
|
|||
// position: absolute;
|
||||
width: 20.6%;
|
||||
// top: 0;
|
||||
z-index: 9999;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -336,7 +353,7 @@ export default {
|
|||
// 左边内容
|
||||
.work-force {
|
||||
height: 39%;
|
||||
|
||||
position: relative;
|
||||
.itemBtn {
|
||||
width: 356px;
|
||||
height: 35px;
|
||||
|
|
|
|||