'地图'
方佳 博
1 year ago
parent
a7fc0d1bfd
commit
608e0c4215
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,6 @@
|
||||
@font-face {
|
||||
font-family: 'FZCYJ';
|
||||
src: url('./DS-DIGI.TTF');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@ -0,0 +1,143 @@
|
||||
/**
|
||||
* @author mrdoob / http://mrdoob.com/
|
||||
*/
|
||||
|
||||
var Stats = function () {
|
||||
|
||||
var startTime = Date.now(), prevTime = startTime;
|
||||
var ms = 0, msMin = Infinity, msMax = 0;
|
||||
var fps = 0, fpsMin = Infinity, fpsMax = 0;
|
||||
var frames = 0, mode = 0;
|
||||
|
||||
var container = document.createElement( 'div' );
|
||||
container.id = 'stats';
|
||||
container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
|
||||
container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
|
||||
|
||||
var fpsDiv = document.createElement( 'div' );
|
||||
fpsDiv.id = 'fps';
|
||||
fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
|
||||
container.appendChild( fpsDiv );
|
||||
|
||||
var fpsText = document.createElement( 'div' );
|
||||
fpsText.id = 'fpsText';
|
||||
fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
|
||||
fpsText.innerHTML = 'FPS';
|
||||
fpsDiv.appendChild( fpsText );
|
||||
|
||||
var fpsGraph = document.createElement( 'div' );
|
||||
fpsGraph.id = 'fpsGraph';
|
||||
fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
|
||||
fpsDiv.appendChild( fpsGraph );
|
||||
|
||||
while ( fpsGraph.children.length < 74 ) {
|
||||
|
||||
var bar = document.createElement( 'span' );
|
||||
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
|
||||
fpsGraph.appendChild( bar );
|
||||
|
||||
}
|
||||
|
||||
var msDiv = document.createElement( 'div' );
|
||||
msDiv.id = 'ms';
|
||||
msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
|
||||
container.appendChild( msDiv );
|
||||
|
||||
var msText = document.createElement( 'div' );
|
||||
msText.id = 'msText';
|
||||
msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
|
||||
msText.innerHTML = 'MS';
|
||||
msDiv.appendChild( msText );
|
||||
|
||||
var msGraph = document.createElement( 'div' );
|
||||
msGraph.id = 'msGraph';
|
||||
msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
|
||||
msDiv.appendChild( msGraph );
|
||||
|
||||
while ( msGraph.children.length < 74 ) {
|
||||
|
||||
var bar = document.createElement( 'span' );
|
||||
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
|
||||
msGraph.appendChild( bar );
|
||||
|
||||
}
|
||||
|
||||
var setMode = function ( value ) {
|
||||
|
||||
mode = value;
|
||||
|
||||
switch ( mode ) {
|
||||
|
||||
case 0:
|
||||
fpsDiv.style.display = 'block';
|
||||
msDiv.style.display = 'none';
|
||||
break;
|
||||
case 1:
|
||||
fpsDiv.style.display = 'none';
|
||||
msDiv.style.display = 'block';
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var updateGraph = function ( dom, value ) {
|
||||
|
||||
var child = dom.appendChild( dom.firstChild );
|
||||
child.style.height = value + 'px';
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
REVISION: 11,
|
||||
|
||||
domElement: container,
|
||||
|
||||
setMode: setMode,
|
||||
|
||||
begin: function () {
|
||||
|
||||
startTime = Date.now();
|
||||
|
||||
},
|
||||
|
||||
end: function () {
|
||||
|
||||
var time = Date.now();
|
||||
|
||||
ms = time - startTime;
|
||||
msMin = Math.min( msMin, ms );
|
||||
msMax = Math.max( msMax, ms );
|
||||
|
||||
msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
|
||||
updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
|
||||
|
||||
frames ++;
|
||||
|
||||
if ( time > prevTime + 1000 ) {
|
||||
|
||||
fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
|
||||
fpsMin = Math.min( fpsMin, fps );
|
||||
fpsMax = Math.max( fpsMax, fps );
|
||||
|
||||
fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
|
||||
updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
|
||||
|
||||
prevTime = time;
|
||||
frames = 0;
|
||||
|
||||
}
|
||||
|
||||
return time;
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
startTime = this.end();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,220 @@
|
||||
/*
|
||||
* Optimized version of PerspectiveTransform.js
|
||||
* by Edan Kwan
|
||||
* website: http://www.edankwan.com/
|
||||
* twitter: https://twitter.com/#!/edankwan
|
||||
* Lab: www.edankwan.com/lab
|
||||
*
|
||||
* The original PerspectiveTransform.js is created by Israel Pastrana
|
||||
* http://www.is-real.net/experiments/css3/wonder-webkit/js/real/display/PerspectiveTransform.js
|
||||
*
|
||||
* Matrix Libraries from a Java port of JAMA: A Java Matrix Package, http://math.nist.gov/javanumerics/jama/
|
||||
* Developed by Dr Peter Coxhead: http://www.cs.bham.ac.uk/~pxc/
|
||||
* Available here: http://www.cs.bham.ac.uk/~pxc/js/
|
||||
*
|
||||
* I simply removed some irrelevant variables and functions and merge everything into a smaller function. I also added some error checking functions and bug fixing things.
|
||||
*/
|
||||
(function (define) {
|
||||
define(function(){
|
||||
|
||||
function PerspectiveTransform(element, width, height, useBackFacing){
|
||||
|
||||
this.element = element;
|
||||
this.style = element.style;
|
||||
this.computedStyle = window.getComputedStyle(element);
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.useBackFacing = !!useBackFacing;
|
||||
|
||||
this.topLeft = {x: 0, y: 0};
|
||||
this.topRight = {x: width, y: 0};
|
||||
this.bottomLeft = {x: 0, y: height};
|
||||
this.bottomRight = {x: width, y: height};
|
||||
this.calcStyle = '';
|
||||
}
|
||||
|
||||
PerspectiveTransform.useDPRFix = false;
|
||||
PerspectiveTransform.dpr = 1;
|
||||
|
||||
PerspectiveTransform.prototype = (function(){
|
||||
|
||||
var app = {
|
||||
stylePrefix: ''
|
||||
};
|
||||
|
||||
var aM = [[0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0]];
|
||||
var bM = [0, 0, 0, 0, 0, 0, 0, 0];
|
||||
|
||||
function _setTransformStyleName(){
|
||||
var testStyle = document.createElement('div').style;
|
||||
app.stylePrefix =
|
||||
'webkitTransform' in testStyle ? 'webkit' :
|
||||
'MozTransform' in testStyle ? 'Moz' :
|
||||
'msTransform' in testStyle ? 'ms' :
|
||||
'';
|
||||
PerspectiveTransform.transformStyleName = app.stylePrefix + (app.stylePrefix.length>0?'Transform':'transform');
|
||||
PerspectiveTransform.transformDomStyleName = '-'+app.stylePrefix.toLowerCase()+'-transform';
|
||||
PerspectiveTransform.transformOriginStyleName = app.stylePrefix + (app.stylePrefix.length>0?'TransformOrigin':'transformOrigin');
|
||||
PerspectiveTransform.transformOriginDomStyleName = '-'+app.stylePrefix.toLowerCase()+'-transform-origin';
|
||||
}
|
||||
|
||||
|
||||
// Check the distances between each points and if there is some points with the distance lequal to or less than 1 pixel, then return true. Otherwise return false;
|
||||
function _hasDistancesError(){
|
||||
var lenX = this.topLeft.x - this.topRight.x;
|
||||
var lenY = this.topLeft.y - this.topRight.y;
|
||||
if(Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.bottomLeft.x - this.bottomRight.x;
|
||||
lenY = this.bottomLeft.y - this.bottomRight.y;
|
||||
if(Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.topLeft.x - this.bottomLeft.x;
|
||||
lenY = this.topLeft.y - this.bottomLeft.y;
|
||||
if(Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.topRight.x - this.bottomRight.x;
|
||||
lenY = this.topRight.y - this.bottomRight.y;
|
||||
if( Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.topLeft.x - this.bottomRight.x;
|
||||
lenY = this.topLeft.y - this.bottomRight.y;
|
||||
if( Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.topRight.x - this.bottomLeft.x;
|
||||
lenY = this.topRight.y - this.bottomLeft.y;
|
||||
if( Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Get the determinant of given 3 points
|
||||
function _getDeterminant(p0, p1, p2){
|
||||
return p0.x * p1.y + p1.x * p2.y + p2.x * p0.y - p0.y * p1.x - p1.y * p2.x - p2.y * p0.x;
|
||||
}
|
||||
|
||||
// Return true if it is a concave polygon or if it is backfacing when the useBackFacing property is false. Otehrwise return true;
|
||||
function _hasPolyonError(){
|
||||
var det1 = _getDeterminant(this.topLeft, this.topRight, this.bottomRight);
|
||||
var det2 = _getDeterminant(this.bottomRight, this.bottomLeft, this.topLeft);
|
||||
if(this.useBackFacing){
|
||||
if(det1*det2<=0) return true;
|
||||
}else{
|
||||
if(det1<=0||det2<=0) return true;
|
||||
}
|
||||
var det1 = _getDeterminant(this.topRight, this.bottomRight, this.bottomLeft);
|
||||
var det2 = _getDeterminant(this.bottomLeft, this.topLeft, this.topRight);
|
||||
if(this.useBackFacing){
|
||||
if(det1*det2<=0) return true;
|
||||
}else{
|
||||
if(det1<=0||det2<=0) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function checkError(){
|
||||
if(_hasDistancesError.apply(this)) return 1; // Points are too close to each other.
|
||||
if(_hasPolyonError.apply(this)) return 2; // Concave or backfacing if the useBackFacing property is false
|
||||
return 0; // no error
|
||||
}
|
||||
|
||||
function calc() {
|
||||
var width = this.width;
|
||||
var height = this.height;
|
||||
|
||||
// get the offset from the transfrom origin of the element
|
||||
var offsetX = 0;
|
||||
var offsetY = 0;
|
||||
var offset = this.computedStyle.getPropertyValue(PerspectiveTransform.transformOriginDomStyleName);
|
||||
if(offset.indexOf('px')>-1){
|
||||
offset = offset.split('px');
|
||||
offsetX = -parseFloat(offset[0]);
|
||||
offsetY = -parseFloat(offset[1]);
|
||||
}else if(offset.indexOf('%')>-1){
|
||||
offset = offset.split('%');
|
||||
offsetX = -parseFloat(offset[0]) * width / 100;
|
||||
offsetY = -parseFloat(offset[1]) * height / 100;
|
||||
}
|
||||
|
||||
// magic here:
|
||||
var dst = [this.topLeft, this.topRight, this.bottomLeft, this.bottomRight];
|
||||
var arr = [0, 1, 2, 3, 4, 5, 6, 7];
|
||||
for(var i = 0; i < 4; i++) {
|
||||
aM[i][0] = aM[i+4][3] = i & 1 ? width + offsetX : offsetX;
|
||||
aM[i][1] = aM[i+4][4] = (i > 1 ? height + offsetY : offsetY);
|
||||
aM[i][6] = (i & 1 ? -offsetX-width : -offsetX) * (dst[i].x + offsetX);
|
||||
aM[i][7] = (i > 1 ? -offsetY-height : -offsetY) * (dst[i].x + offsetX);
|
||||
aM[i+4][6] = (i & 1 ? -offsetX-width : -offsetX) * (dst[i].y + offsetY);
|
||||
aM[i+4][7] = (i > 1 ? -offsetY-height : -offsetY) * (dst[i].y + offsetY);
|
||||
bM[i] = (dst[i].x + offsetX);
|
||||
bM[i + 4] = (dst[i].y + offsetY);
|
||||
aM[i][2] = aM[i+4][5] = 1;
|
||||
aM[i][3] = aM[i][4] = aM[i][5] = aM[i+4][0] = aM[i+4][1] = aM[i+4][2] = 0;
|
||||
}
|
||||
var kmax, sum;
|
||||
var row;
|
||||
var col = [];
|
||||
var i, j, k, tmp;
|
||||
for(var j = 0; j < 8; j++) {
|
||||
for(var i = 0; i < 8; i++) col[i] = aM[i][j];
|
||||
for(i = 0; i < 8; i++) {
|
||||
row = aM[i];
|
||||
kmax = i<j?i:j;
|
||||
sum = 0.0;
|
||||
for(var k = 0; k < kmax; k++) sum += row[k] * col[k];
|
||||
row[j] = col[i] -= sum;
|
||||
}
|
||||
var p = j;
|
||||
for(i = j + 1; i < 8; i++) {
|
||||
if(Math.abs(col[i]) > Math.abs(col[p])) p = i;
|
||||
}
|
||||
if(p != j) {
|
||||
for(k = 0; k < 8; k++) {
|
||||
tmp = aM[p][k];
|
||||
aM[p][k] = aM[j][k];
|
||||
aM[j][k] = tmp;
|
||||
}
|
||||
tmp = arr[p];
|
||||
arr[p] = arr[j];
|
||||
arr[j] = tmp;
|
||||
}
|
||||
if(aM[j][j] != 0.0) for(i = j + 1; i < 8; i++) aM[i][j] /= aM[j][j];
|
||||
}
|
||||
for(i = 0; i < 8; i++) arr[i] = bM[arr[i]];
|
||||
for(k = 0; k < 8; k++) {
|
||||
for(i = k + 1; i < 8; i++) arr[i] -= arr[k] * aM[i][k];
|
||||
}
|
||||
for(k = 7; k > -1; k--) {
|
||||
arr[k] /= aM[k][k];
|
||||
for(i = 0; i < k; i++) arr[i] -= arr[k] * aM[i][k];
|
||||
}
|
||||
|
||||
return this.calcStyle = 'matrix3d(' + arr[0].toFixed(9) + ',' + arr[3].toFixed(9) + ', 0,' + arr[6].toFixed(9) + ',' + arr[1].toFixed(9) + ',' + arr[4].toFixed(9) + ', 0,' + arr[7].toFixed(9) + ',0, 0, 1, 0,' + arr[2].toFixed(9) + ',' + arr[5].toFixed(9) + ', 0, 1)';
|
||||
|
||||
}
|
||||
|
||||
function update(style) {
|
||||
|
||||
style = style || this.calcStyle;
|
||||
|
||||
if(PerspectiveTransform.useDPRFix) {
|
||||
var dpr = PerspectiveTransform.dpr;
|
||||
style = 'scale(' + dpr + ',' + dpr + ')perspective(1000px)' + style + 'translateZ('+ ((1 - dpr) * 1000) + 'px)';
|
||||
}
|
||||
|
||||
// use toFixed() just in case the Number became something like 3.10000001234e-9
|
||||
return this.style[PerspectiveTransform.transformStyleName] = style;
|
||||
}
|
||||
|
||||
_setTransformStyleName();
|
||||
|
||||
app.calc = calc;
|
||||
app.update = update;
|
||||
app.checkError = checkError;
|
||||
|
||||
return app;
|
||||
|
||||
|
||||
})();
|
||||
|
||||
|
||||
return PerspectiveTransform;
|
||||
});
|
||||
}(typeof define === "function" && define.amd ? define : function (app) {
|
||||
window["PerspectiveTransform"] = app();
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
@ -1,42 +1,121 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="app-study">
|
||||
<div>
|
||||
<!-- <el-button style="background:url('../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png'); width: 143px;">全屏</el-button> -->
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png" >
|
||||
<div class="visualization">
|
||||
|
||||
<div class="visMain">
|
||||
<div class="top">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/top.png">
|
||||
</div>
|
||||
<div class="leftMain">
|
||||
<img style="width: 100%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题1.pn.png">
|
||||
<span class="leftText">交易总览</span>
|
||||
<div class="leftSmallWindow">
|
||||
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-1.png">
|
||||
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-2.png">
|
||||
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-3.png">
|
||||
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-4.png">
|
||||
<div class="font1"><span class="font3">交易总次数</span><span class="font2">123321</span>次</div>
|
||||
<div class="font4"><span class="font3">交易总次数</span><span class="font2">123321</span>次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="earth">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/边圈（做旋转）.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<el-row>
|
||||
<el-col :span="24">
|
||||
<img src="../../assets/images/32.png" alt="" />
|
||||
<span>操作记录和成绩</span>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</div>
|
||||
</template>
|
||||
<style lang='scss' scoped>
|
||||
.app-study{
|
||||
// padding: 20px;
|
||||
height: 105vh;
|
||||
// border: 1px solid #238AFF;
|
||||
// border-radius: 5px;
|
||||
div{
|
||||
margin-top: -90px;
|
||||
margin-left: -130px;
|
||||
height: 995px;
|
||||
background: url('../../../assets/images/央行可视化监控中心.png' ) no-repeat !important;
|
||||
background-size: 102% 100% !important;
|
||||
}
|
||||
.el-col-24 {
|
||||
height: 69px;
|
||||
padding: 15px 13px;
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
@import '../../../assets/fonts/font.css';
|
||||
.visualization{
|
||||
height: 760px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
padding-left: 15px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #ffff;
|
||||
position: relative;
|
||||
.visMain{
|
||||
height: 750px; /* 设置div的高度 */
|
||||
width: 1554px; /* 设置div的宽度 */
|
||||
margin: auto;
|
||||
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/背景.png');
|
||||
background-size: 100% 100%;
|
||||
.leftMain{
|
||||
position: absolute;
|
||||
// height: 200px;
|
||||
width: 462px;
|
||||
left: 80px;
|
||||
margin-top: 20px;
|
||||
// border: 1px solid red;
|
||||
.leftText{
|
||||
position: absolute;
|
||||
top: 21%;
|
||||
left: 18%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 19px;
|
||||
font-family: '微软雅黑';
|
||||
font-weight: 600;
|
||||
}
|
||||
.leftSmallWindow{
|
||||
position: absolute;
|
||||
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
|
||||
width: 100%;
|
||||
height: 253px;
|
||||
margin-top: 32px;
|
||||
img{
|
||||
margin-left: 7px;
|
||||
height: 40px;
|
||||
margin-top: 12px;
|
||||
|
||||
}
|
||||
.font2{
|
||||
font-family: 'FZCYJ';
|
||||
font-size: 25px;
|
||||
color: yellow;
|
||||
}
|
||||
.font1{
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 103px;
|
||||
}
|
||||
.font3{
|
||||
margin-right: 90px;
|
||||
}
|
||||
// border: 1px solid black;
|
||||
}
|
||||
}
|
||||
.top{
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.earth{
|
||||
position: relative;
|
||||
width: 502px;
|
||||
height: 504px;
|
||||
margin: auto;
|
||||
margin-top: 111px;
|
||||
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/地球.png') no-repeat;
|
||||
background-size: 95% 95%;
|
||||
background-position: center;
|
||||
animation: rotate 45s linear infinite;
|
||||
img{
|
||||
animation: rotate2 40s linear infinite;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}}
|
||||
@keyframes rotate2 {
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}}
|
||||
</style>
|
||||
Loading…
Reference in New Issue