shenzhen-dev #2
BIN
src/assets/images/largeMachinery/concreteImg.png
Normal file
BIN
src/assets/images/largeMachinery/concreteImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
@ -157,7 +157,12 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
path: "/waterMonitor",
|
||||
name: "用水监测",
|
||||
component: () => import("@/views/sevenLargeScreen/greenConstruct/waterMonitor/index.vue")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/concreteMixingPlant",
|
||||
name: "混凝土拌合站",
|
||||
component: () => import("@/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/index.vue")
|
||||
},
|
||||
],
|
||||
meta: {
|
||||
title: "七参数大屏"
|
||||
|
||||
@ -213,7 +213,11 @@ let menuList = ref([
|
||||
{
|
||||
menuName: "升降机监测",
|
||||
companyPath: "/elevatorMonitoring"
|
||||
}
|
||||
},
|
||||
{
|
||||
menuName: "混凝土拌合站",
|
||||
companyPath: "/concreteMixingPlant"
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
@ -0,0 +1,539 @@
|
||||
<template>
|
||||
<Card title="实时数据">
|
||||
<div class="loadometer-bottom-center">
|
||||
<div class="loadometer-content">
|
||||
<div class="tab-list">
|
||||
<div>序号</div>
|
||||
<div>配比名称</div>
|
||||
<div>施工地点</div>
|
||||
<div>浇筑部位</div>
|
||||
<div>实际方量（m³）</div>
|
||||
<div>水胶比</div>
|
||||
<div>出料时间</div>
|
||||
<div style="text-align: right">状态</div>
|
||||
</div>
|
||||
|
||||
<el-scrollbar class="list-box">
|
||||
<div v-for="(item, index) in list" class="list-style" :key="item.id" @click="openDialog">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>{{ item.waterNum }}</div>
|
||||
<div>{{ item.carNum }}</div>
|
||||
<div>{{ item.tradeName }}</div>
|
||||
<div>{{ item.tradeName }}</div>
|
||||
<div>{{ item.specs }}</div>
|
||||
<div>{{ item.tareTime }}</div>
|
||||
<div style="text-align: right">{{ item.status }}</div>
|
||||
</div>
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 点击弹框 -->
|
||||
<div class="political-outlook" v-show="dialogShowTime">
|
||||
<div class="dialog-icon"><img src="@/assets/images/titleIcon.png" alt="" /></div>
|
||||
<div class="dialog-title"><i>生产数据详情</i></div>
|
||||
<el-icon @click="dialogShowTime=false" class="closeBtn"><Close /></el-icon>
|
||||
<div class="dataInfo">
|
||||
<div class="left">
|
||||
<div>任务单号<span>task_no_5855</span></div>
|
||||
<div>施工地点<span>K35+639张湾特大桥</span></div>
|
||||
<div>设备名称<span>混凝土01</span></div>
|
||||
<div>操作员<span style="margin-left: 24%">李伟</span></div>
|
||||
<div>强度等级<span>C35</span></div>
|
||||
<div>实际方量（m³）<span style="margin-left: 8%">54</span></div>
|
||||
<div>状态<span style="margin-left: 28%; color: yellow">初级超标</span></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div>工程名称<span>钦州港金谷港区金鼓江作业区11号</span></div>
|
||||
<div>浇筑部位<span>右辐70#8-2桩基</span></div>
|
||||
<div>设备编号<span>111</span></div>
|
||||
<div>出料时间<span style="margin-left: 20%">2023.07.05 13:76:24</span></div>
|
||||
<div>施工配合比<span style="margin-left: 17%">C35</span></div>
|
||||
<div>搅拌时长<span style="margin-left: 20%">01时02分09秒</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dataList">
|
||||
<div class="tabList">
|
||||
<div>序号</div>
|
||||
<div>材料名称</div>
|
||||
<div>理论用量（kg）</div>
|
||||
<div>施工用量（kg）</div>
|
||||
<div>实际用量（kg）</div>
|
||||
<div>误差（%）</div>
|
||||
</div>
|
||||
|
||||
<div class="listBox">
|
||||
<el-scrollbar style="height: 95%">
|
||||
<div v-for="(item, index) in listDialog" class="listStyle" :key="item.id" >
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.sex }}</div>
|
||||
<div>{{ item.nation }}</div>
|
||||
<div>{{ item.birthday }}</div>
|
||||
<div>{{ item.education }}</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="notoDta" v-if="listDialog.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
let dialogShowTime = ref(false as any);
|
||||
const list = ref([
|
||||
{
|
||||
id: 1,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
|
||||
{
|
||||
id: 8,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
waterNum: "LS2836494",
|
||||
carNum: "苏EJ4277",
|
||||
tradeName: "钢筋",
|
||||
specs: "10cm",
|
||||
tareTime: "2023-01-01 12:00:00",
|
||||
grossTime: "2023-01-01 12:00:00",
|
||||
status: "正常"
|
||||
}
|
||||
]);
|
||||
const listDialog = ref([
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
},
|
||||
{
|
||||
name: "水泥",
|
||||
sex: 1243,
|
||||
nation: 1243,
|
||||
education: 1243,
|
||||
birthday: -77.05
|
||||
}
|
||||
]);
|
||||
|
||||
//打开弹框
|
||||
const openDialog = () => {
|
||||
dialogShowTime.value = true;
|
||||
console.log("点击", dialogShowTime.value);
|
||||
};
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loadometer-bottom-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.loadometer-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.tab-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
line-height: 30px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 11.5%;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
height: 90%;
|
||||
cursor: pointer;
|
||||
.list-style:nth-child(even) {
|
||||
background: rgba(39, 88, 192, 0.06);
|
||||
}
|
||||
.list-style {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 10%;
|
||||
line-height: 27px;
|
||||
font-size: 12px;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 11.5%;
|
||||
}
|
||||
}
|
||||
.list-style:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
.political-outlook {
|
||||
width: 45%;
|
||||
height: 155%;
|
||||
position: absolute;
|
||||
top: -90%;
|
||||
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.dialog-icon {
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
top: 3%;
|
||||
width: 5%;
|
||||
height: 5%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.dialog-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
margin-left: 6%;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
font-family: "OPPOSans-Bold";
|
||||
margin-top: 2.5%;
|
||||
}
|
||||
.closeBtn {
|
||||
color: #ccc;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
left: 96%;
|
||||
top: 2%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dataInfo {
|
||||
height: 45%;
|
||||
margin: 0 5%;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
.left {
|
||||
width: 50%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
div {
|
||||
margin: 5% 0;
|
||||
span {
|
||||
margin-left: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 50%;
|
||||
float: right;
|
||||
height: 100%;
|
||||
div {
|
||||
margin: 5% 0;
|
||||
span {
|
||||
margin-left: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataList {
|
||||
color: #fff;
|
||||
height: 48%;
|
||||
margin: 0 5%;
|
||||
.tabList {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #7b86a3;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
line-height: 30px;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
div {
|
||||
width: 20%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
height: 91%;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #fff;
|
||||
height: 12%;
|
||||
line-height: 25px;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
text-align: center;
|
||||
div {
|
||||
width: 20%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
top: 75%;
|
||||
width: 12%;
|
||||
margin: 5% -40%;
|
||||
left: 120%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<Card title="各配比产量（m³）">
|
||||
<div class="load-top-left">
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
|
||||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">近30日</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="concreteEchartsBottomLeft" ref="concreteEchartsBottomLeft" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import symbolIcon from "@/assets/images/toxicGasMonitor/lineIcon.png";
|
||||
import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getMonthData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
// x轴
|
||||
let twenty_four_time = ref([
|
||||
"00:00",
|
||||
"02:00",
|
||||
"04:00",
|
||||
"06:00",
|
||||
"08:00",
|
||||
"10:00",
|
||||
"12:00",
|
||||
"14:00",
|
||||
"16:00",
|
||||
"18:00",
|
||||
"20:00",
|
||||
"22:00",
|
||||
"24:00"
|
||||
] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("" as any);
|
||||
// Y轴数据
|
||||
let yData1 = ref([22, 22, 19, 23, 34, 33, 31, 22, 18, 19, 24, 29, 25] as any);
|
||||
let yData2 = ref([12, 12, 10, 13, 20, 23, 21, 12, 13, 10, 13, 21, 17] as any);
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
legend:{
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
left: "5%",
|
||||
bottom: "92%",
|
||||
itemGap: 20,
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
name: {
|
||||
width: 100,
|
||||
verticalAlign: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
width: 70,
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||||
borderColor: "#010306",
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
}
|
||||
// formatter: function (params) {
|
||||
// // console.log("tooltip", params);
|
||||
// return (
|
||||
// params[0].name +
|
||||
// "<br/>" +
|
||||
// params[0].marker +
|
||||
// " " +
|
||||
// params[0].seriesName +
|
||||
// ": " +
|
||||
// params[0].value +
|
||||
// "<br/>" +
|
||||
// params[1].marker +
|
||||
// " " +
|
||||
// params[1].seriesName +
|
||||
// ": " +
|
||||
// params[1].value
|
||||
// );
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
bottom: "12%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: twenty_four_time.value
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: unit.value,
|
||||
nameGap: 30,
|
||||
nameTextStyle: {
|
||||
align: "right", // 将 Y 轴名称文字右对齐
|
||||
verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
|
||||
padding: [0, 15, 0, 0], // 设置名称文字的内边距，调整位置
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
type: "value",
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon2}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "配比1",
|
||||
type: "line",
|
||||
color: "#4AC0F3",
|
||||
data: yData1.value
|
||||
},
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "配比2",
|
||||
type: "line",
|
||||
color: "#81F279",
|
||||
data: yData2.value
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", yData.value);
|
||||
let concreteEchartsBottomLeft = echarts.init(document.getElementById("concreteEchartsBottomLeft"));
|
||||
concreteEchartsBottomLeft.setOption(option.value);
|
||||
}
|
||||
onMounted(async () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.load-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 3%;
|
||||
padding-top: 3%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: 2%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.week {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
padding: 0 6%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<Card title="生产质量统计">
|
||||
<div class="load-top-right">
|
||||
<div id="materialStatisticsT" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { noop } from "@vueuse/core";
|
||||
let rangeTime = ref("" as any);
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 75,
|
||||
show: true,
|
||||
name: "正常",
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#82FBEA",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 63,
|
||||
show: true,
|
||||
name: "初级超标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#e8c15c",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "中级超标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "orange"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "高级超标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#eb6266"
|
||||
}
|
||||
}
|
||||
},
|
||||
// {
|
||||
// value: 30,
|
||||
// show: true,
|
||||
// name: "用电材料",
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: "#EC6266"
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// value: 30,
|
||||
// show: true,
|
||||
// name: "木材",
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: "#81F279"
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
]);
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
drawEchart();
|
||||
});
|
||||
|
||||
function drawEchart() {
|
||||
let max = 0;
|
||||
dataList.value.map(item => {
|
||||
max = max + item.value;
|
||||
});
|
||||
let echartsTest = echarts.init(document.getElementById("materialStatisticsT"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: max,
|
||||
subtext: "数量统计",
|
||||
x: "45%",
|
||||
y: "28%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal",
|
||||
textAlign: "center",
|
||||
fontFamily: "sadigitalNumber"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 14,
|
||||
lineHeight: 40,
|
||||
fontWeight: "normal",
|
||||
textAlign: "center"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
left: "25%",
|
||||
bottom: "5%",
|
||||
itemGap: 20,
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
width: 100,
|
||||
verticalAlign: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
width: 70,
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (var i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
var value = dataList.value[i].value;
|
||||
var percentage = value + "%";
|
||||
return "{name| " + data + "} {gap| }" + "{value| " + value + " " + percentage + "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["52%", "35%"],
|
||||
radius: "55%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["52%", "35%"],
|
||||
radius: "47%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["37%", "40%"],
|
||||
center: ["52%", "35%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["32%", "33%"],
|
||||
center: ["52%", "35%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.load-top-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.num {
|
||||
width: 66px;
|
||||
text-align: center;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: calc(100vw * 24 / 1920);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 18%;
|
||||
z-index: 9;
|
||||
}
|
||||
// .styleImg {
|
||||
// left: 6%;
|
||||
// top: 17%;
|
||||
// width: 40%;
|
||||
// position: absolute;
|
||||
// height: 60%;
|
||||
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
// background-size: cover;
|
||||
// }
|
||||
.select-right {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: -1%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.week {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
padding: 0 6%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
background: #0d2956;
|
||||
}
|
||||
::v-deep .el-range-separator {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
::v-deep .el-range-input {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="distribution-box">
|
||||
<div class="top">
|
||||
<div class="topLeft">
|
||||
<TopLeft></TopLeft>
|
||||
</div>
|
||||
<div class="topCenter">
|
||||
<TopCenter></TopCenter>
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<TopRight></TopRight>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomLeft">
|
||||
<BottomLeft></BottomLeft>
|
||||
</div>
|
||||
<div class="bottomCenter">
|
||||
<BottomCenter></BottomCenter>
|
||||
</div>
|
||||
<div class="bottomRight">
|
||||
<BottomRight></BottomRight>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopLeft from "@/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue";
|
||||
import TopCenter from "@/views/sevenLargeScreen/digitalConstruction/loadometerManage/topCenter.vue";
|
||||
import TopRight from "@/views/sevenLargeScreen/digitalConstruction/loadometerManage/topRight.vue";
|
||||
import BottomLeft from "@/views/sevenLargeScreen/digitalConstruction/loadometerManage/bottomLeft.vue";
|
||||
import BottomCenter from "@/views/sevenLargeScreen/digitalConstruction/loadometerManage/bottomCenter.vue";
|
||||
import BottomRight from "@/views/sevenLargeScreen/digitalConstruction/loadometerManage/bottomRight.vue";
|
||||
export default {
|
||||
components: { TopLeft, TopCenter, TopRight, BottomLeft, BottomRight, BottomCenter }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distribution-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.top {
|
||||
height: 55%;
|
||||
display: flex;
|
||||
margin-bottom: 1%;
|
||||
.topLeft {
|
||||
width: 26%;
|
||||
// background-color: orchid;
|
||||
}
|
||||
.topCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topRight {
|
||||
width: 26%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 40%;
|
||||
display: flex;
|
||||
.bottomLeft {
|
||||
width: 26%;
|
||||
}
|
||||
.bottomCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomRight {
|
||||
width: 26%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="distribution-box">
|
||||
<div class="top">
|
||||
<div class="topLeft">
|
||||
<TopLeft></TopLeft>
|
||||
</div>
|
||||
<div class="topCenter">
|
||||
<TopCenter></TopCenter>
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<TopRight></TopRight>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomLeft">
|
||||
<BottomLeft></BottomLeft>
|
||||
</div>
|
||||
<div class="bottomCenter">
|
||||
<BottomCenter></BottomCenter>
|
||||
</div>
|
||||
<div class="bottomRight">
|
||||
<BottomRight></BottomRight>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import TopLeft from "@/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/topLeft.vue";
|
||||
import TopCenter from "@/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/topCenter.vue";
|
||||
import TopRight from "@/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/topRight.vue";
|
||||
import BottomLeft from "@/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/bottomLeft.vue";
|
||||
import BottomCenter from "@/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/bottomCenter.vue";
|
||||
import BottomRight from "@/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/bottomRight.vue";
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distribution-box {
|
||||
width: 100%;
|
||||
height: 102%;
|
||||
.top {
|
||||
height: 47.5%;
|
||||
display: flex;
|
||||
margin-bottom: 1%;
|
||||
.topLeft {
|
||||
width: 26%;
|
||||
// background-color: orchid;
|
||||
}
|
||||
.topCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topRight {
|
||||
width: 26%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 47.5%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.bottomLeft {
|
||||
width: 26%;
|
||||
}
|
||||
.bottomCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.bottomRight {
|
||||
width: 26%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<Card title="实时监测">
|
||||
<div class="water-top-center">
|
||||
<div class="left-box">
|
||||
<div class="water-icon">
|
||||
<img src="@/assets/images/largeMachinery/concreteImg.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="yesterday-use">
|
||||
<div class="text">日产量(m³)</div>
|
||||
<div class="num">1024</div>
|
||||
</div>
|
||||
<div class="yesterday-chain">
|
||||
<div class="text">总产量(m³)</div>
|
||||
<div class="num">1024</div>
|
||||
</div>
|
||||
<div class="month-use">
|
||||
<div class="text">日盘数</div>
|
||||
<div class="num">1024</div>
|
||||
</div>
|
||||
<div class="month-chain">
|
||||
<div class="text">总盘数</div>
|
||||
<div class="num">1024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.water-top-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
.left-box {
|
||||
width: 50%;
|
||||
|
||||
.water-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
width: 50%;
|
||||
margin-left: 3%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
.yesterday-use {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-top: 10%;
|
||||
margin-right: 15%;
|
||||
background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
font-size: 16px;
|
||||
color: #65d7f9;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-5deg);
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
margin-top: 7%;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.yesterday-chain {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-top: 10%;
|
||||
margin-right: 15%;
|
||||
background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
font-size: 16px;
|
||||
color: #65d7f9;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-5deg);
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
margin-top: 7%;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.month-use {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-right: 15%;
|
||||
background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-5deg);
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
margin-top: 7%;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.month-chain {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
margin-top: 5%;
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-5deg);
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
margin-top: 7%;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<Card title="各设备产量（m³）">
|
||||
<div class="load-top-left">
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
|
||||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">近30日</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="concreteEcharts" ref="concreteEcharts" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import symbolIcon from "@/assets/images/toxicGasMonitor/lineIcon.png";
|
||||
import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getMonthData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
// x轴
|
||||
let twenty_four_time = ref([
|
||||
"00:00",
|
||||
"02:00",
|
||||
"04:00",
|
||||
"06:00",
|
||||
"08:00",
|
||||
"10:00",
|
||||
"12:00",
|
||||
"14:00",
|
||||
"16:00",
|
||||
"18:00",
|
||||
"20:00",
|
||||
"22:00",
|
||||
"24:00"
|
||||
] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("" as any);
|
||||
// Y轴数据
|
||||
let yData1 = ref([22, 22, 19, 23, 34, 33, 31, 22, 18, 19, 24, 29, 25] as any);
|
||||
let yData2 = ref([12, 12, 10, 13, 20, 23, 21, 12, 13, 10, 13, 21, 17] as any);
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
legend:{
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
left: "5%",
|
||||
bottom: "92%",
|
||||
itemGap: 20,
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
name: {
|
||||
width: 100,
|
||||
verticalAlign: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
width: 70,
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||||
borderColor: "#010306",
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
}
|
||||
// formatter: function (params) {
|
||||
// // console.log("tooltip", params);
|
||||
// return (
|
||||
// params[0].name +
|
||||
// "<br/>" +
|
||||
// params[0].marker +
|
||||
// " " +
|
||||
// params[0].seriesName +
|
||||
// ": " +
|
||||
// params[0].value +
|
||||
// "<br/>" +
|
||||
// params[1].marker +
|
||||
// " " +
|
||||
// params[1].seriesName +
|
||||
// ": " +
|
||||
// params[1].value
|
||||
// );
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
bottom: "12%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: twenty_four_time.value
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: unit.value,
|
||||
nameGap: 30,
|
||||
nameTextStyle: {
|
||||
align: "right", // 将 Y 轴名称文字右对齐
|
||||
verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
|
||||
padding: [0, 15, 0, 0], // 设置名称文字的内边距，调整位置
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
type: "value",
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon2}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "混凝土1",
|
||||
type: "line",
|
||||
color: "#4AC0F3",
|
||||
data: yData1.value
|
||||
},
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "混凝土2",
|
||||
type: "line",
|
||||
color: "#81F279",
|
||||
data: yData2.value
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", yData.value);
|
||||
let concreteEcharts = echarts.init(document.getElementById("concreteEcharts"));
|
||||
concreteEcharts.setOption(option.value);
|
||||
}
|
||||
onMounted(async () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.load-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 3%;
|
||||
padding-top: 3%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: 2%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.week {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
padding: 0 6%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<Card title="原材料用量统计">
|
||||
<div class="load-top-right">
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
|
||||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">近30日</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="materialStatistics" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { noop } from "@vueuse/core";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getMonthData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
let rangeTime = ref("" as any);
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 75,
|
||||
show: true,
|
||||
name: "水",
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#82FBEA",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 63,
|
||||
show: true,
|
||||
name: "水泥1",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#4CC4F8",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "水泥2",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6375C7"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "砂1",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EEA959"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "砂2",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EC6266"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "碎石1",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#81F279"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "碎石2",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#dfd738"
|
||||
}
|
||||
}
|
||||
},
|
||||
]);
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
drawEchart();
|
||||
});
|
||||
|
||||
function drawEchart() {
|
||||
let max = 0;
|
||||
dataList.value.map(item => {
|
||||
max = max + item.value;
|
||||
});
|
||||
let echartsTest = echarts.init(document.getElementById("materialStatistics"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: max,
|
||||
subtext: "材料总数",
|
||||
x: "22%",
|
||||
y: "42%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal",
|
||||
textAlign: "center",
|
||||
fontFamily: "sadigitalNumber"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 14,
|
||||
lineHeight: 40,
|
||||
fontWeight: "normal",
|
||||
textAlign: "center"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
left: "55%",
|
||||
bottom: "15%",
|
||||
itemGap: 20,
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
width: 100,
|
||||
verticalAlign: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
width: 70,
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data: any) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (let i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
let value = dataList.value[i].value;
|
||||
return "{name| " + data + "}" + "{value| " + value + "}" + " ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["28%", "50%"],
|
||||
radius: "55%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["28%", "50%"],
|
||||
radius: "47%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["37%", "40%"],
|
||||
center: ["28%", "50%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["32%", "33%"],
|
||||
center: ["28%", "50%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.load-top-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.num {
|
||||
width: 66px;
|
||||
text-align: center;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: calc(100vw * 24 / 1920);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 18%;
|
||||
z-index: 9;
|
||||
}
|
||||
// .styleImg {
|
||||
// left: 6%;
|
||||
// top: 17%;
|
||||
// width: 40%;
|
||||
// position: absolute;
|
||||
// height: 60%;
|
||||
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
// background-size: cover;
|
||||
// }
|
||||
.select-right {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: -1%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.week {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
padding: 0 6%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
background: #0d2956;
|
||||
}
|
||||
::v-deep .el-range-separator {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
::v-deep .el-range-input {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -100,7 +100,8 @@ function draw() {
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
barMinHeight: 10,
|
||||
// barMinHeight: 10,
|
||||
barWidth: 80,
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "5%",
|
||||
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
||||
@ -110,17 +111,13 @@ function draw() {
|
||||
//barBorderRadius: 5,
|
||||
//渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#071b34"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#7bf0e1"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3a787f"
|
||||
color: "rgba(130, 251, 234, 0)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(130, 251, 234, 1)"
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
@ -100,7 +100,8 @@ function draw() {
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
barMinHeight: 10,
|
||||
// barMinHeight: 10,
|
||||
barWidth: 80,
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "5%",
|
||||
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
||||
@ -110,17 +111,13 @@ function draw() {
|
||||
//barBorderRadius: 5,
|
||||
//渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#071b34"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#7bf0e1"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3a787f"
|
||||
color: "rgba(130, 251, 234, 0)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(130, 251, 234, 1)"
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
@ -100,7 +100,8 @@ function draw() {
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
barMinHeight: 10,
|
||||
// barMinHeight: 10,
|
||||
barWidth: 80,
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "5%",
|
||||
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
||||
@ -110,17 +111,13 @@ function draw() {
|
||||
//barBorderRadius: 5,
|
||||
//渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#071b34"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#7bf0e1"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3a787f"
|
||||
color: "rgba(130, 251, 234, 0)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(130, 251, 234, 1)"
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
@ -100,7 +100,8 @@ function draw() {
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
barMinHeight: 10,
|
||||
// barMinHeight: 10,
|
||||
barWidth: 80,
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "5%",
|
||||
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
||||
@ -110,17 +111,13 @@ function draw() {
|
||||
//barBorderRadius: 5,
|
||||
//渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#071b34"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#7bf0e1"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3a787f"
|
||||
color: "rgba(130, 251, 234, 0)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(130, 251, 234, 1)"
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
@ -118,7 +118,8 @@ function draw(xData:any,yData:any) {
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
barMinHeight: 10,
|
||||
// barMinHeight: 10,
|
||||
barWidth: 80,
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "5%",
|
||||
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
||||
@ -128,17 +129,13 @@ function draw(xData:any,yData:any) {
|
||||
//barBorderRadius: 5,
|
||||
//渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#071b34"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#7bf0e1"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3a787f"
|
||||
color: "rgba(130, 251, 234, 0)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(130, 251, 234, 1)"
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user