Skip to content

G
gavel-hafms-vue
Commit 3fb2a5a0 authored by 李苏's avatar 李苏 💬
Browse files
Options

大屏demo界面，需要npm i插件 拉common

parent fc36fe89
Show whitespace changes
Inline Side-by-side
Showing with 731 additions and 2 deletions
package-lock.json
View file @ 3fb2a5a0
{
"name": "GavelDmg",
"name": "gavel-budgetms-vue",
"version": "0.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "GavelDmg",
"name": "gavel-budgetms-vue",
"version": "0.0.1",
"license": "MIT",
"dependencies": {
......@@ -75,6 +75,7 @@
"@vue/compiler-sfc": "^3.3.4",
"@vue/composition-api": "^1.7.1",
"animate.css": "^4.1.1",
"echarts": "^4.9.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"jquery": "^3.6.1",
......@@ -22048,6 +22049,7 @@
"@vue/compiler-sfc": "^3.3.4",
"@vue/composition-api": "^1.7.1",
"animate.css": "^4.1.1",
"echarts": "^4.9.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"jquery": "^3.6.1",
public/index.html
View file @ 3fb2a5a0
......@@ -5,8 +5,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<title><%= webpackConfig.name %></title>
<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d3320f95543a851e89e2148de351d2f4"></script> -->
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>
html,
......
src/router/index.js
View file @ 3fb2a5a0
......@@ -291,6 +291,19 @@ export const powerRoutes=[
name:'kshdp',
path:"kshdp"
},
{
component:'hzcxbb/szkb/index',
hidden:false,
meta:{
"title": "数字看板",
"icon": "",
"noCache": false,
"link": null,
"mkid":'test',
},
name:'szkb',
path:"szkb"
},
// {
// component:'hzcxbb/ysspzl/index',
// hidden:false,
......
src/views/hzcxbb/szkb/index.vue 0 → 100644
View file @ 3fb2a5a0
<template>
<div id="szkb">
<div class="title">
大数据展示平台
</div>
<div class="main">
<div class="first">
<div class="itemtitle itemtitlebg1">
主题1
</div>
<div class="itemmain boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
<div class="full">
<span class="com-count-title">
小标题
</span>
</div>
</div>
</div>
<div class="second">
<div class="itemtitle maintitle " style="">
淮安总览
</div>
<!-- 地图-->
<div class="itemmain boxall ">
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
<div class="full" ref="szkbmap" v-echartResize="()=>{
szkbmapCharts.resize()
}">
</div>
</div>
</div>
<div class="third">
<div class="itemtitle itemtitlebg2">
主题3
</div>
<div class="itemmain boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
<div class="full">
<span class="com-count-title">
小标题
</span>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="first">
<div class="itemmainb boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
<div class="full itembg ">
<span class="com-count-title">
小标题
</span>
</div>
</div>
</div>
<div class="second">
<div class="itemmainb boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
<div class="full ">
<span class="com-count-title">
vue轮播表格
</span>
<div class="com-count-body">
<!-- 标题-->
<div class="lbbt">
<div class="flex1 text-center ">
学校
</div>
<div class="flex1 text-center ">
年纪
</div>
<div class="flex1 text-center ">
班级
</div>
<div class="flex1 text-center ">
分数
</div>
<div class="flex1 text-center ">
androl
</div>
</div>
<vueSeamless :class-option="optionSingleHeight" :data="listData" class="lbbody" style="overflow: hidden;">
<div class="full lbtit" >
<div style="line-height: 25px;display: flex;" v-for="item in listData">
<div style="color: #fff ;" v-text="item.title"></div>
<div style="color: #fff ;" v-text="item.title"></div>
<div style="color: #fff ;" v-text="item.title"></div>
<div style="color: #fff ;" v-text="item.title"></div>
<div style="color: #fff ;" v-text="item.title"></div>
</div>
</div>
</vueSeamless>
</ul>
</div>
</div>
</div>
</div>
<div class="third">
<div class="itemmainb boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
<div class="full ">
<span class="com-count-title">
测试图例
</span>
<div ref="sdt" v-echartResize="()=>{
sdtCharts.resize()
}" class="com-count-body">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import vueSeamless from 'vue-seamless-scroll'
import huaian from "common/src/assets/mapJson/huaian.json"
export default {
computed: {
optionSingleHeight() {
return {
singleHeight: 25
}
}
},
components: {
vueSeamless
},
mounted() {
this.$nextTick(() => {
document.getElementById("szkb").addEventListener('dblclick', function(e) {
fullScreen(document.getElementById("szkb"));
}, false);
/* 初始化地图*/
this.szkbmapCharts = this.initSzkbmapCharts()
this.sdtCharts=this.initsdt()
this.szkbmapCharts.on("click", function(params) {
console.log(`${params.name}`)
});
})
},
data() {
return {
listData: [{
data: 112,
title: '百度'
},
{
data: 112,
title: '谷歌'
},
{
data: 112,
title: '高德'
},
{
data: 112,
title: '医院'
},
{
data: 112,
title: '测试'
},
{
data: 112,
title: '呵呵'
},
{
data: 112,
title: '测速3'
},
{
data: 112,
title: '价格'
},
{
data: 112,
title: '苏州'
},
{
data: 112,
title: '测试1'
},
{
data: 112,
title: '测试2'
}
]
}
},
methods: {
initsdt(){
const charts = this.$echarts.init(this.$refs["sdt"]);
const option = {
legend: {
bottom: 10,
textStyle: {
color: '#61d2f7' // 设置图例项字体颜色为红色
},
left:'center',
itemWidth:9,
itemHeight:9,
data: ['2018溢价率', '2019溢价率']
},
xAxis: {
axisLine: { // 改变x轴颜色
show:false,
lineStyle: {
color: '#26D9FF',
}
},
axisTick: {
show: false
},
axisLabel: { // 改变x轴字体颜色和大小
textStyle: {
color: "#333",
fontSize: 12
},
},
splitLine: {
show:false,
},
},
yAxis: {
name:'%',
nameTextStyle: {
color: '#61d2f7',
padding: [0, 25, 0, 0]
},
axisLine: { // 改变y轴颜色
lineStyle: {
color: '#61d2f7'
}
},
axisTick: {
show: false
},
axisLabel: { // 改变y轴字体颜色和大小
//formatter: '{value} m³ ', // 给y轴添加单位
textStyle: {
color: "#61d2f7",
fontSize: 12
},
},
splitLine: {
lineStyle: {
color: "#61d2f7"
}
},
},
series: [{
name: '2018溢价率',
type: 'scatter',
itemStyle: {
color: "#3E9FFF",
},
symbolSize: 12,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
}, {
name: '2019溢价率',
type: 'scatter',
itemStyle: {
color: "#F7B500",
},
symbolSize: 12,
data: [
[9.0, 5.04],
[11.0, 7.95],
[12.0, 8.58],
[5.0, 11.81],
[7.0, 12.33],
[11.0, 7.96],
[7.0, 9.24],
[6.0, 8.26],
[10.0, 11.84],
[7.0, 3.82],
[6.0, 4.68]
],
}]
}
charts.setOption(option);
return charts
},
initSzkbmapCharts() {
const charts = this.$echarts.init(this.$refs["szkbmap"]);
const option = {
// 背景颜色
series: [
{
name: "淮安",
type: "map",
geoIndex: 0,
data: this.dataList,
},
],
// 提示浮窗样式
tooltip: {
show: true,
trigger: "item",
alwaysShowContent: false,
hideDelay: 100,
triggerOn: "mousemove",
enterable: true,
textStyle: {
color: "#DADADA",
fontSize: "12",
width: 20,
height: 30,
overflow: "break",
},
formatter: function (params) {
// 格式化提示浮窗内容
return params.name + ": " + (params.value||'未设置');
},
showDelay: 100,
},
// 地图配置
geo: {
zoom: 1.2,
map: "huaian",
label: {
// 通常状态下的样式
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "#fff",
},
},
},
// 地图区域的样式设置
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, 1)",
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
},
};
// 地图注册，第一个参数的名字必须和option.geo.map一致
this.$echarts.registerMap("huaian", huaian)
charts.setOption(option);
return charts
},
}
}
function fullScreen(element) {
const elem = element || document.documentElement;
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen) {
elem.requestFullscreen();
} else if (elem.msExitFullscreen) {
elem.msExitFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
<style lang="scss" scoped>
@import url("szkb.scss");
</style>
src/views/hzcxbb/szkb/szkb.scss 0 → 100644
View file @ 3fb2a5a0
#szkb{
.com-count-title{
transform: translateY(10px);
font-size: 1vw;
color:#3aafe8;
line-height: 2vh;
font-weight: 600;
&::before{
content: '';
height: .5vw;
width: .5vw;
display: inline-block;
background-color: #bde4ff;
border-radius: 50%;
margin-bottom: .1vh;
}
}
.com-count-body{
font-size: .65vw;
height: calc(100% - 2vh);
width: 100%;
}
.itembg{
background-image: url(./static/itembg.png);
background-size: 100% 100%;
}
background-image: url(./static/bg.png);
background-size: 100% 100%;
height: 100vh;
width: 100vw;
.title{
background-image: url(./static/bg_top.png);
background-size: 100% 100%;
height: 8vh;
width: 100%;
text-align: center;
line-height: 8vh;
color: #bde4ff;
font-size: 1.8vw;
font-weight: 700;
}
.main{
height: 58vh;
width: 100%;
display: flex;
.first{
height: 100%;
width: 30%;
padding:0.5vh;
}
.second{
height: 100%;
width: 40%;
padding:0.5vh;
}
.third{
height: 100%;
width: 30%;
padding:0.5vh;
}
}
.bottom{
display: flex;
height: 39vh;
width: 100%;
margin-top: 1vh;
.first{
height: 100%;
width: 30%;
padding:0.5vh;
}
.second{
height: 100%;
width: 40%;
padding:0.5vh;
}
.third{
height: 100%;
width: 30%;
padding:0.5vh;
}
}
}
.itemtitle{
margin-top: 1vh;
margin-bottom: 1vh;
height: 5vh;
width: 100%;
line-height: 5vh;
font-size: 1.28vw;
text-align: center;
color: #bde4ff;
font-weight: 700;
}
.itemtitleb{
margin-top: 1vh;
margin-bottom: 1vh;
height: 4vh;
width: 100%;
line-height: 4vh;
font-size: 1.28vw;
text-align: center;
color: #bde4ff;
font-weight: 700;
}
.maintitle{
width: 60%;margin-right: 20%;margin-left: 20%;border-radius: 30px;
background-color:rgba(58,175,232,.6) ;
border-radius: 18px;
}
.itemtitlebg1{
background: linear-gradient(to right,#3aafe8,rgba(48,82,174,0));
}
.itemtitlebg2{
background: linear-gradient(to left,#3aafe8,rgba(48,82,174,0));
}
.itemtitlebg3{
background: linear-gradient(to left,rgba(48,82,174,0) ,#3aafe8 30% ,rgba(48,82,174,0));
}
.itemmain{
height:51vh;
width: 100%;
}
.itemmainb{
height:32vh;
width: 100%;
}
.boxall {
border: 1px solid #3486da;
background: rgba(0,70,190,.1);
padding: .6vw;
position: relative;
margin-bottom: 0.25rem;
z-index: 10;
.i1{
border-right: 3px solid #3486da;
right: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
top: -2px;
}
.i2{
border-left: 3px solid #3486da;
left: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
top: -2px;
}
.i3{
border-right: 3px solid #3486da;
right: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
bottom: -2px;
transform: rotate(90deg);
}
.i4{
border-left: 3px solid #3486da;
left: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
bottom: -2px;
transform: rotate(-90deg);
}
.lbbt{
height: 4vh;
width: 100%;
font-size: .9vw;
display: flex;
line-height: 4vh;
color: #61d2f7;
}
.flex1{
flex: 1;
}
.lbbody{
height: calc(100% - 4vh);
}
.lbbody div{
flex: 1;
line-height: 25px;
font-size: 13px;
text-align: center;
}
.lbtit > :nth-child(odd) {
-webkit-box-shadow: #07417a 0px 0px 10px;
-moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
}
.lbtit > :nth-child(even) {
-webkit-box-shadow: #3486da 0px 0px 10px;
-moz-box-shadow: #3486da 0px 0px 10px;
box-shadow: inset 0 0 30px #3486da;
/*position: relative;*/
}
}
src/views/hzcxbb/test/index.vue 0 → 100644
View file @ 3fb2a5a0
<template>
<div id="map-location" class="min_full">
</div>
</template>
<script>
export default{
mounted() {
this.$nextTick(()=>{
this.cloudMap = new AMap.Map('map-location', {
center: [120.59241 , 31.30356 ],//设置地图中心点坐标
resizeEnable: true,
mapStyle: 'amap://styles/def937553c471693ab838e31fdbc6d82',
viewMode: '3D', // 模式
showBuildingBlock: true,
pitch: 75, // 仰角
zoom: 17 // 缩放
})
})
},
data() {
return{
cloudMap:{}
}
},
methods:{
}
}
</script>
<style scoped lang="scss">
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment