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>
|
||||
<div class="panel line">
|
||||
<div class="titleBg">
|
||||
<h2>车辆信息统计</h2>
|
||||
<div class="panel line">
|
||||
<div class="titleBg">
|
||||
<h2>车辆信息统计</h2>
|
||||
</div>
|
||||
<div class="carBar">
|
||||
<div class="carBox carBorder">
|
||||
<span class="carSpan">全部服务车辆</span>
|
||||
<div class="carImg">
|
||||
<span class="carNumber">159</span>
|
||||
</div>
|
||||
<div class="carBar">
|
||||
<div class="carBox carBorder">
|
||||
<span class="carSpan">全部服务车辆</span>
|
||||
<div class="carImg">
|
||||
<span class="carNumber">159</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 class="carBox carBorder">
|
||||
<span class="carSpan">近一月服务车辆</span>
|
||||
<div class="carImg">
|
||||
<span class="carNumber">108</span>
|
||||
</div>
|
||||
<div id="carEcharts"></div>
|
||||
<div class="panel-footer"></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>
|
||||
|
||||
<script>
|
||||
import flexible from "@/layout/flexible.js";
|
||||
export default{
|
||||
methods: {
|
||||
|
||||
export default {
|
||||
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>
|
||||
<style >
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,39 +1,226 @@
|
||||
<template>
|
||||
<div class="panel line1">
|
||||
<div class="titleBg">
|
||||
<h2>设备管理</h2>
|
||||
<div class="panel line1">
|
||||
<div class="titleBg">
|
||||
<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 class="chart"></div>
|
||||
<div class="panel-footer"></div>
|
||||
<span class="deviceStatus">正常</span>
|
||||
<span class="deviceNumber">{{i}}</span>
|
||||
|
||||
<img src="../../../assets/images/喇叭.png" class="deviceImg" alt />
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flexible from "@/layout/flexible.js";
|
||||
|
||||
export default{
|
||||
|
||||
methods: {
|
||||
|
||||
import flexible from "@/layout/flexible.js";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
methods: {
|
||||
//新增按钮
|
||||
editDevice() {},
|
||||
//删除按钮
|
||||
deleteDevice() {}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</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>
|
||||
Loading…
Reference in New Issue