forked from software/MusicRoadUI
用户和音乐下拉框切换
parent
d49d5bfe07
commit
ec2636e62e
Binary file not shown.
|
After Width: | Height: | Size: 428 B |
Binary file not shown.
|
After Width: | Height: | Size: 467 B |
Binary file not shown.
|
After Width: | Height: | Size: 232 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 423 B |
Binary file not shown.
|
After Width: | Height: | Size: 500 B |
Binary file not shown.
|
After Width: | Height: | Size: 421 B |
Binary file not shown.
|
After Width: | Height: | Size: 469 B |
Binary file not shown.
|
After Width: | Height: | Size: 332 B |
@ -1,74 +0,0 @@
|
|||||||
var chartDom = document.getElementById('carEcharts');
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option = {
|
|
||||||
color: ["#2f89cf"],
|
|
||||||
title: {
|
|
||||||
text: '车辆来源地',
|
|
||||||
textStyle: {
|
|
||||||
color: "rgba(66,232,224)",
|
|
||||||
fontSize: "14"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {},
|
|
||||||
grid: {
|
|
||||||
left: '7%',
|
|
||||||
right: '7%',
|
|
||||||
bottom: '5%',
|
|
||||||
top:"9%",
|
|
||||||
containLabel:false,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
show:false,
|
|
||||||
type: 'value',
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
splitLine:{show: false},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['江苏', '山东', '北京', '河北', '河南', '山西'],
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: "white",
|
|
||||||
fontSize: "14"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
splitLine:{show: false},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
type: 'bar',
|
|
||||||
data: [19, 29, 39, 44, 49, 69],
|
|
||||||
barWidth: "25%",
|
|
||||||
label:{
|
|
||||||
show:true,
|
|
||||||
position:"right",
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
barBorderRadius: 5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
// 把配置给实例对象
|
|
||||||
myChart.setOption(option);
|
|
||||||
window.addEventListener("resize", function() {
|
|
||||||
myChart.resize();
|
|
||||||
});
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,52 +1,122 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="panel line">
|
<div class="panel line">
|
||||||
<div class="titleBg">
|
<div class="titleBg">
|
||||||
<h2>车辆信息统计</h2>
|
<h2>车辆信息统计</h2>
|
||||||
|
</div>
|
||||||
|
<div class="carBar">
|
||||||
|
<div class="carBox carBorder">
|
||||||
|
<span class="carSpan">全部服务车辆</span>
|
||||||
|
<div class="carImg">
|
||||||
|
<span class="carNumber">159</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="carBar">
|
</div>
|
||||||
<div class="carBox carBorder">
|
<div class="carBox carBorder">
|
||||||
<span class="carSpan">全部服务车辆</span>
|
<span class="carSpan">近一月服务车辆</span>
|
||||||
<div class="carImg">
|
<div class="carImg">
|
||||||
<span class="carNumber">159</span>
|
<span class="carNumber">108</span>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carBox carBorder">
|
|
||||||
<span class="carSpan">近一月服务车辆</span>
|
|
||||||
<div class="carImg">
|
|
||||||
<span class="carNumber">108</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carBox">
|
|
||||||
<span class="carSpan">近一周服务车辆</span>
|
|
||||||
<div class="carImg">
|
|
||||||
<span class="carNumber">59</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="carEcharts"></div>
|
|
||||||
<div class="panel-footer"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="carBox">
|
||||||
|
<span class="carSpan">近一周服务车辆</span>
|
||||||
|
<div class="carImg">
|
||||||
|
<span class="carNumber">59</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="carEcharts"></div>
|
||||||
|
<div class="panel-footer"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import flexible from "@/layout/flexible.js";
|
import flexible from "@/layout/flexible.js";
|
||||||
export default{
|
export default {
|
||||||
methods: {
|
mounted() {
|
||||||
|
var echarts = require("echarts");
|
||||||
|
var chartDom = document.getElementById("carEcharts");
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option = {
|
||||||
|
color: ["#2f89cf"],
|
||||||
|
title: {
|
||||||
|
text: "车辆来源地",
|
||||||
|
textStyle: {
|
||||||
|
color: "rgba(66,232,224)",
|
||||||
|
fontSize: "14"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: "7%",
|
||||||
|
right: "7%",
|
||||||
|
bottom: "5%",
|
||||||
|
top: "9%",
|
||||||
|
containLabel: false
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: false,
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["江苏", "山东", "北京", "河北", "河南", "山西"],
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: "white",
|
||||||
|
fontSize: "14"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: { show: false }
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "bar",
|
||||||
|
data: [19, 29, 39, 44, 49, 69],
|
||||||
|
barWidth: "25%",
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "right"
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// 把配置给实例对象
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize", function() {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
},
|
},
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
methods: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style >
|
<style >
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,39 +1,226 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="panel line1">
|
<div class="panel line1">
|
||||||
<div class="titleBg">
|
<div class="titleBg">
|
||||||
<h2>设备管理</h2>
|
<h2>设备管理</h2>
|
||||||
|
</div>
|
||||||
|
<div class="buttonBox">
|
||||||
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="editDevice">新增</el-button>
|
||||||
|
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice">删除</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="deviceBox">
|
||||||
|
<div class="deviceMsg" v-for="i in 150" :key="i">
|
||||||
|
<el-popover placement="right" width="250" trigger="click">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="iconBox">
|
||||||
|
<img src="../../../assets/images/位置.png" class="iconImg" alt />
|
||||||
|
</div>
|
||||||
|
<span class="span1 span2">位置</span>
|
||||||
|
<span class="span1 span3">001</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="iconBox">
|
||||||
|
<img src="../../../assets/images/网络.png" class="iconImg" alt />
|
||||||
|
</div>
|
||||||
|
<span class="span1 span4">IP地址</span>
|
||||||
|
<span class="span1 span5">192.168.88.88</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="iconBox">
|
||||||
|
<img src="../../../assets/images/音符.png" class="iconImg" alt />
|
||||||
|
</div>
|
||||||
|
<span class="span1 span2">音符</span>
|
||||||
|
<span class="span1 span3">1</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="iconBox">
|
||||||
|
<img src="../../../assets/images/音量.png" class="iconImg" alt />
|
||||||
|
</div>
|
||||||
|
<span class="span1 span2">音量</span>
|
||||||
|
<span class="span1 span3">50%</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="iconBox">
|
||||||
|
<img src="../../../assets/images/设置.png" class="iconImg" alt />
|
||||||
|
</div>
|
||||||
|
<span class="span1">设备状态</span>
|
||||||
|
<span class="span1">正常</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="iconBox">
|
||||||
|
<img src="../../../assets/images/时间.png" class="iconImg" alt />
|
||||||
|
</div>
|
||||||
|
<span class="span1">创建时间</span>
|
||||||
|
<span class="span1">2022.02.22</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="iconBox">
|
||||||
|
<img src="../../../assets/images/创建人.png" class="iconImg" alt />
|
||||||
|
</div>
|
||||||
|
<span class="span1 span6">创建人</span>
|
||||||
|
<span class="span1 span7">张大大</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<div class="shadows" slot="reference"></div>
|
||||||
|
</el-popover>
|
||||||
|
|
||||||
|
<div class="deleteIcon">
|
||||||
|
<img src="../../../assets/images/删除.png" class="deleteImg" alt />
|
||||||
</div>
|
</div>
|
||||||
<div class="chart"></div>
|
<span class="deviceStatus">正常</span>
|
||||||
<div class="panel-footer"></div>
|
<span class="deviceNumber">{{i}}</span>
|
||||||
|
|
||||||
|
<img src="../../../assets/images/喇叭.png" class="deviceImg" alt />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import flexible from "@/layout/flexible.js";
|
import flexible from "@/layout/flexible.js";
|
||||||
|
export default {
|
||||||
export default{
|
data() {
|
||||||
|
return {};
|
||||||
methods: {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
data(){
|
methods: {
|
||||||
return{
|
//新增按钮
|
||||||
|
editDevice() {},
|
||||||
|
//删除按钮
|
||||||
|
deleteDevice() {}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<style >
|
<style scoped>
|
||||||
|
.el-row {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.span1 {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.span2 {
|
||||||
|
letter-spacing: 27px;
|
||||||
|
}
|
||||||
|
.span3 {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: -8px;
|
||||||
|
}
|
||||||
|
.span4 {
|
||||||
|
letter-spacing: 5px;
|
||||||
|
}
|
||||||
|
.span5 {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 11px;
|
||||||
|
}
|
||||||
|
.span6 {
|
||||||
|
letter-spacing: 7px;
|
||||||
|
}
|
||||||
|
.span7 {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
.iconBox {
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
|
||||||
|
margin-right: -15px;
|
||||||
|
}
|
||||||
|
.iconImg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.buttonBox {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
}
|
||||||
|
#deviceBox {
|
||||||
|
margin-top: 0.17rem;
|
||||||
|
margin-left: 0rem;
|
||||||
|
margin-right: -0.125rem;
|
||||||
|
margin-bottom: 0rem;
|
||||||
|
height: 4rem;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.deviceMsg {
|
||||||
|
margin-left: 0rem;
|
||||||
|
margin-top: 0rem;
|
||||||
|
margin-right: 0.125rem;
|
||||||
|
margin-bottom: 0.17rem;
|
||||||
|
width: 79px;
|
||||||
|
height: 90px;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 14px;
|
||||||
|
background: #4a6cd5;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
border-radius: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.shadows {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 79px;
|
||||||
|
height: 90px;
|
||||||
|
cursor: pointer;
|
||||||
|
/* background:grey;
|
||||||
|
opacity: 0.4; */
|
||||||
|
}
|
||||||
|
.deviceStatus {
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.deviceNumber {
|
||||||
|
font-size: 12px;
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
top: 20%;
|
||||||
|
left: 40%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.deviceImg {
|
||||||
|
margin: -7px auto;
|
||||||
|
width: 34px;
|
||||||
|
height: 55px;
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.deleteIcon {
|
||||||
|
width: 8px;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.deleteImg {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue