446 lines
14 KiB
Plaintext
446 lines
14 KiB
Plaintext
<template>
|
||
<div class="dashboard-editor-container" id="test">
|
||
<el-row :gutter="32">
|
||
<el-col :xs="24" :sm="24" :lg="5">
|
||
<div class="chart-wrapper">
|
||
<el-row>
|
||
<el-col :xs="24" :sm="24" :lg="24">
|
||
<div class="chart-wrapper">
|
||
<div style="font-weight: 600">我的任务</div>
|
||
<el-collapse accordion>
|
||
<el-collapse-item
|
||
v-for="(item, index) in taskArr"
|
||
:key="index"
|
||
>
|
||
<template slot="title">
|
||
<svg
|
||
class="icon"
|
||
style="font-size: 20px"
|
||
aria-hidden="true"
|
||
>
|
||
<use xlink:href="#icon-renwu"></use></svg
|
||
>工单: {{ item.oider }}
|
||
</template>
|
||
<div>
|
||
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
|
||
</div>
|
||
<div>
|
||
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :lg="24">
|
||
<div class="chart-wrapper">
|
||
<div style="font-weight: 600">预警信息</div>
|
||
<div
|
||
v-for="(item, index) in taskArr"
|
||
:key="index"
|
||
style="
|
||
background:#eed79a;
|
||
border-radius: 10px;
|
||
margin: 5px;
|
||
"
|
||
>
|
||
<div style="display: flex">
|
||
<svg
|
||
class="icon"
|
||
style="font-size: 30px; height: 60px"
|
||
aria-hidden="true"
|
||
>
|
||
<use xlink:href="#icon-xitongbaojing"></use>
|
||
</svg>
|
||
<div>
|
||
<span
|
||
style="
|
||
font-size: 20px;
|
||
color: green;
|
||
display: inline-block;
|
||
padding-top: 8px;
|
||
"
|
||
>{{ item.id }}</span
|
||
>
|
||
<span style="display: block">{{ item.oider }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :lg="24">
|
||
<div class="chart-wrapper">
|
||
<div style="font-weight: 600">通知公告</div>
|
||
<div
|
||
v-for="(item, index) in taskText"
|
||
:key="index"
|
||
style="
|
||
background:#ecebeb;
|
||
border-radius: 10px;
|
||
margin: 5px;
|
||
"
|
||
>
|
||
<div style="display: flex">
|
||
<svg
|
||
class="icon"
|
||
style="font-size: 30px; height: 50px; width: 50px"
|
||
aria-hidden="true"
|
||
>
|
||
<use xlink:href="#icon-tongzhi"></use>
|
||
</svg>
|
||
<div>
|
||
<span
|
||
style="
|
||
font-size: 20px;
|
||
color: green;
|
||
display: inline-block;
|
||
padding-top: 8px;
|
||
"
|
||
>{{ item.title }}</span
|
||
>
|
||
<span style="display: block">{{ item.text }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :lg="19">
|
||
<div class="chart-wrapper">
|
||
<panel-group />
|
||
</div>
|
||
<div class="chart-wrapper">
|
||
<el-row :gutter="32">
|
||
<swiper ref="mySwiper" :options="swiperOptions">
|
||
<swiper-slide v-for="(item, index) in classInfoArr" :key="index">
|
||
<div class="classInfo">
|
||
<div>{{ index + 1 }}号线</div>
|
||
<p>生产工单:{{ item.order }}</p>
|
||
<p>产品编码:{{ item.code }}</p>
|
||
<p>产品名称:{{ item.name }}</p>
|
||
<class-info
|
||
:index="index"
|
||
:insideArr="item.insideArr"
|
||
:outSideArr="item.outSideArr"
|
||
:ref="'myEchart-' + index"
|
||
/>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="chart-wrapper">
|
||
<el-row :gutter="32">
|
||
<el-col :xs="24" :sm="24" :lg="16">
|
||
<div class="chart-wrapper">
|
||
<goods-counts />
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :lg="8">
|
||
<div class="chart-wrapper">
|
||
<PassThrough />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="chart-wrapper">
|
||
<el-row :gutter="32">
|
||
<el-col :xs="24" :sm="24" :lg="16">
|
||
<div class="chart-wrapper">
|
||
<line-chart :chart-data="lineChartData" />
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :lg="8">
|
||
<div class="chart-wrapper">
|
||
<bad-reason />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import LineChart from "./dashboard/LineChart";
|
||
import BadReason from "./dashboard/BadReason.vue";
|
||
import GoodsCounts from "./dashboard/GoodsCounts.vue";
|
||
import PassThrough from "./dashboard/PassThrough.vue";
|
||
import PanelGroup from "./dashboard/PanelGroup.vue";
|
||
import ClassInfo from "./dashboard/ClassInfo.vue";
|
||
|
||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||
import SwiperCore, { Autoplay } from "swiper";
|
||
import "swiper/swiper.min.css";
|
||
|
||
import echarts from "echarts";
|
||
|
||
SwiperCore.use([Autoplay]);
|
||
const lineChartData = {
|
||
newVisitis: {
|
||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||
actualData: [120, 82, 91, 154, 162, 140, 145],
|
||
},
|
||
};
|
||
export default {
|
||
name: "Index",
|
||
components: {
|
||
ClassInfo,
|
||
Swiper,
|
||
SwiperSlide,
|
||
LineChart,
|
||
BadReason,
|
||
GoodsCounts,
|
||
PassThrough,
|
||
PanelGroup,
|
||
},
|
||
data() {
|
||
return {
|
||
taskArr: [
|
||
{ id: 1, oider: 1234 },
|
||
{ id: 2, oider: 2345 },
|
||
{ id: 3, oider: 234678 },
|
||
],
|
||
taskText: [
|
||
{
|
||
title: "公告",
|
||
text: "为庆祝我们党的百年华诞，继承和发扬党的光荣传统，带领公司广大干部职工，增强爱党爱国强企意识，经公司研究，将在本周五开展一次党史知识竞赛。",
|
||
},
|
||
{
|
||
title: "公告",
|
||
text: "为庆祝我们党的百年华诞，继承和发扬党的光荣传统，带领公司广大干部职工，增强爱党爱国强企意识，经公司研究，将在本周五开展一次党史知识竞赛。",
|
||
},
|
||
|
||
{
|
||
title: "公告",
|
||
text: "为庆祝我们党的百年华诞，继承和发扬党的光荣传统，带领公司广大干部职工，增强爱党爱国强企意识，经公司研究，将在本周五开展一次党史知识竞赛。",
|
||
},
|
||
],
|
||
classInfoArr: [
|
||
{
|
||
order: "12d34",
|
||
code: "fe445",
|
||
name: "测试D-1",
|
||
insideArr: [
|
||
{ value: 135, name: "合格", selected: true },
|
||
{ value: 179, name: "不合格" },
|
||
],
|
||
outSideArr: [
|
||
{ value: 135, name: "已完成" },
|
||
{ value: 110, name: "未完成" },
|
||
],
|
||
},
|
||
{
|
||
order: "12d34",
|
||
code: "fe445",
|
||
name: "测试D-2",
|
||
insideArr: [
|
||
{ value: 335, name: "合格", selected: true },
|
||
{ value: 679, name: "不合格" },
|
||
],
|
||
outSideArr: [
|
||
{ value: 335, name: "已完成" },
|
||
{ value: 310, name: "未完成" },
|
||
],
|
||
},
|
||
{
|
||
order: "12d34",
|
||
code: "fe445",
|
||
name: "测试D-3",
|
||
insideArr: [
|
||
{ value: 335, name: "合格", selected: true },
|
||
{ value: 679, name: "不合格" },
|
||
],
|
||
outSideArr: [
|
||
{ value: 365, name: "已完成" },
|
||
{ value: 910, name: "未完成" },
|
||
],
|
||
},
|
||
{
|
||
order: "12d34",
|
||
code: "fe445",
|
||
name: "测试D-3",
|
||
insideArr: [
|
||
{ value: 335, name: "合格", selected: true },
|
||
{ value: 679, name: "不合格" },
|
||
],
|
||
outSideArr: [
|
||
{ value: 335, name: "已完成" },
|
||
{ value: 310, name: "未完成" },
|
||
],
|
||
},
|
||
{
|
||
order: "12d34",
|
||
code: "fe445",
|
||
name: "测试D-1",
|
||
insideArr: [
|
||
{ value: 335, name: "合格", selected: true },
|
||
{ value: 679, name: "不合格" },
|
||
],
|
||
outSideArr: [
|
||
{ value: 335, name: "已完成" },
|
||
{ value: 310, name: "未完成" },
|
||
],
|
||
},
|
||
{
|
||
order: "199033",
|
||
code: "hje445",
|
||
name: "测试D-2",
|
||
insideArr: [
|
||
{ value: 395, name: "不合格", selected: true },
|
||
{ value: 699, name: "合格" },
|
||
],
|
||
outSideArr: [
|
||
{ value: 395, name: "已完成" },
|
||
{ value: 310, name: "未完成" },
|
||
],
|
||
},
|
||
],
|
||
swiperOptions: {
|
||
slidesPerView: 5,
|
||
loop: true,
|
||
autoplay: {
|
||
delay: 3000, //1秒切换一次
|
||
},
|
||
// Some Swiper option/callback...
|
||
},
|
||
chart: [],
|
||
lineChartData: lineChartData.newVisitis,
|
||
|
||
};
|
||
},
|
||
computed: {
|
||
// swiper() {
|
||
// return this.$refs.mySwiper.$swiper;
|
||
// }
|
||
},
|
||
created(){
|
||
|
||
let refreshFlag=window.sessionStorage.getItem('refreshFlag');
|
||
//生产模式进入系统默认刷新一次缓存
|
||
if(refreshFlag!="true" && [process.env.VUE_APP_BASE_API]=='/prod-api' )
|
||
{
|
||
// this.clickDeleteHeader()
|
||
this.clickRefresh()
|
||
window.sessionStorage.setItem('refreshFlag',"true")
|
||
}
|
||
|
||
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
var elementResizeDetectorMaker = require("element-resize-detector");
|
||
var erd = elementResizeDetectorMaker();
|
||
var erdUltraFast = elementResizeDetectorMaker({
|
||
strategy: "scroll", //<- For ultra performance.
|
||
callOnAdd: true,
|
||
debug: true,
|
||
});
|
||
//监听id为test的元素 大小变化
|
||
erd.listenTo(document.getElementById("test"), function (element) {
|
||
var width = element.offsetWidth;
|
||
var height = element.offsetHeight;
|
||
console.log(width,"进入")
|
||
|
||
if (width ==1482) {
|
||
console.log("swiper重新渲染不行呀")
|
||
}
|
||
});
|
||
let meterChart = document.getElementsByClassName("meterChart");
|
||
Array.from(meterChart).forEach((item) => {
|
||
let index = item.getAttribute("data-index");
|
||
let isInit = item.getAttribute("_echarts_instance_"); //echarts渲染的标志，判断
|
||
if (!isInit) {
|
||
let myEchart = this.$refs[`myEchart-${index}`];
|
||
if (myEchart.length || myEchart[0].option) {
|
||
let chart = echarts.init(item, "macarons");
|
||
chart.setOption(myEchart[0].option);
|
||
this.chart.push(chart);
|
||
}
|
||
}
|
||
});
|
||
// console.log(meterChart, this.$refs)
|
||
});
|
||
},
|
||
methods: {
|
||
clickDeleteHeader()
|
||
{
|
||
this.$sys.deleteUserHead().then(data=>{
|
||
if ((data.code && data.code ==200) || (data.data && data.data.code && data.data.code == 200)) {
|
||
// this.$message.success("用户表头配置初始化成功");
|
||
}
|
||
})
|
||
localStorage.setItem("header",JSON.stringify(require('./../api/tableConfig/tableConfig').configure));
|
||
},
|
||
//刷新缓存
|
||
clickRefresh(){
|
||
this.$dictType.getAllDict().then(_data=>{
|
||
let resp=_data.config?_data.data:_data
|
||
console.log(resp,'resp')
|
||
if (resp.code == '200') {
|
||
// this.$message.success("刷新成功");
|
||
let temp=JSON.parse(JSON.stringify(resp.data))
|
||
|
||
temp.forEach(item=>{
|
||
item.text=item.groupText
|
||
item.key=item.groupKey
|
||
item.group=item.groupCode
|
||
})
|
||
console.log(temp,'temp')
|
||
localStorage.setItem("dictType",JSON.stringify(temp));
|
||
// this.$dictType.clearKeyCache().then();
|
||
}
|
||
});
|
||
},
|
||
handleSetLineChartData(type) {
|
||
this.lineChartData = lineChartData[type];
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
if (!this.chart.length) {
|
||
return;
|
||
}
|
||
this.chart.forEach((item) => item.dispose());
|
||
this.chart = [];
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.classInfo {
|
||
border: 1px solid #36a3f7;
|
||
> div:nth-of-type(1) {
|
||
height: 40px;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
line-height: 40px;
|
||
border-bottom: 1px solid #36a3f7;
|
||
}
|
||
}
|
||
.dashboard-editor-container {
|
||
padding: 32px;
|
||
background-color: rgb(240, 242, 245);
|
||
position: relative;
|
||
|
||
.chart-wrapper {
|
||
background: #fff;
|
||
padding: 16px 16px 0;
|
||
margin-bottom: 32px;
|
||
}
|
||
.order-list {
|
||
height: 40px;
|
||
background: greenyellow;
|
||
margin: 5px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.chart-wrapper {
|
||
padding: 8px;
|
||
}
|
||
}
|
||
</style>
|