1.增加船只直观图展示功能

master
董哲奇 1 year ago
parent c9ce3d6fb1
commit 91a5eb31eb

@ -0,0 +1,58 @@
import request from '@/utils/request'
export function getCzFdBase(data) {
return request({
url: '/api/dmCzfddyb/getCzFdBase',
method: 'post',
data
})
}
export function getList(data) {
return request({
url: '/api/dmCzfddyb/getList',
method: 'post',
data
})
}
// 上传制作图
export function upload(data) {
const param = new FormData()
param.append('file', data.file)
param.append('czbh', data.czbh)
param.append('isupload', data.isupload)
return request({
url: '/api/dmCzfddyb/upload',
method: 'post',
headers: { 'Content-Type': 'multipart/form-data' },
data: param
})
}
export function getTpBase(data) {
return request({
url: '/api/dmCzfddyb/getTpBase',
method: 'post',
data
})
}
export function findTPxqjh(data) {
return request({
url: '/api/tpb/findTPxqjh',
method: 'post',
data
})
}
export function findTppsQk(data) {
return request({
url: '/api/tpb/findTppsQk',
method: 'post',
data
})
}
export function getListFdMx(data) {
return request({
url: '/api/dmCzfddyb/getListFdMx',
method: 'post',
data
})
}

@ -0,0 +1,31 @@
import request from '@/utils/request'
export function getXqdwcjcdList(data) {
return request({
url: '/api/dmXqdwcjcd/getXqdwcjcdList',
method: 'post',
data
})
}
export function saveXqdwcjcd(data) {
return request({
url: '/api/dmXqdwcjcd/saveXqdwcjcd',
method: 'post',
data
})
}
export function updateXqdwcjcd(data) {
return request({
url: '/api/dmXqdwcjcd/updateXqdwcjcd',
method: 'post',
data
})
}
export function delXqdwcjcd(data) {
return request({
url: '/api/dmXqdwcjcd/delXqdwcjcd',
method: 'post',
data
})
}

@ -0,0 +1,270 @@
<template>
<!-- 总览-->
<el-container style="width: 100%;height:90.9vh;background-color: rgba(138,43,226,0.68)">
<el-row style="width: 100%">
<el-col :span="3">
<div style="padding: 15px;margin-top: 80px">
<div class="group-btn">
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
1
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
2
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
3
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
4
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
5
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
6
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
7
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
</div>
</el-col>
<el-col :span="21">
<el-header style="width: 100%; height: 35px;font-size: 12px;">
<el-form :inline="true" style="margin-top: 25px">
<el-row>
<el-col :span="4">
<el-form-item>
<el-input v-model="queryParam.dcCh" placeholder="船号"/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-date-picker v-model="queryParam.beginTime" value-format="yyyy/MM" format="yyyy/MM/dd" type="date" placeholder="日期"/>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item>
<el-date-picker v-model="queryParam.endTime" value-format="yyyy/MM/dd" format="yyyy/MM/dd" type="date" placeholder="结束时间"/>
</el-form-item>
</el-col>-->
<!-- <el-col :span="12" style="text-align: left">
<el-button type="success">对比</el-button>
<el-button type="success">全选</el-button>
<el-button type="success">确定</el-button>
</el-col>-->
</el-row>
</el-form>
</el-header>
<div class="rg-table-box" style="width:100%;height:88vh;overflow-y: auto;">
<div v-for="(item,index) in ks">
<Content :data="data" :deptName="item" :type="'mp'" :myStyle="{headImgWidth:'70%'}" :users="cqUsers[item]||0"/>
</div>
</div>
</el-col>
</el-row>
<!-- <div style="width: 100%">
<div style="width: 100%;height: 60vh;background-color: yellow"></div>
<div style="width: 100%;height: 30.9vh;background-color: blue"></div>
</div>-->
</el-container>
<!-- <div class="dashboard-editor-container" style="background-color: blueviolet;">
<div class=" clearfix" style="width: 100%;height: 60vh;background-color: yellow">
<pan-thumb :image="avatar" style="float: left">
&lt;!&ndash; Your roles:
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>&ndash;&gt;
</pan-thumb>
<div class="info-container">
<span class="display_name">{{ name }}</span>
&lt;!&ndash;<span style="font-size:20px;padding-top:20px;display:inline-block;">大连船舶重工集团舾装有限公司</span>&ndash;&gt;
</div>
</div>
<div>
<img :src="emptyGif" class="emptyGif">
</div>
</div>-->
</template>
<script>
import {mapGetters} from 'vuex'
import PanThumb from '@/components/PanThumb'
import XEUtils from 'xe-utils'
import {dictALL} from '@/api/user'
import Template from "@/views/dashboard/components/Template.vue";
import Content from "@/views/dashboard/components/Content.vue";
export default {
name: 'Dashboard',
components: {Content, Template, PanThumb },
data() {
return {
ks: ['资料', '上料', '1跨', '2跨', '3跨', '4跨', '5跨', '6跨', '7跨'],
data: {},
cqData:{},
cqUsers: {},
totalUsers:{},
queryParam:{
dcCh:'',
beginTime:'',
endTime:'',
}
}
},
computed: {
...mapGetters([
'name',
'avatar',
'roles',
'dictMapList'
])
},
created(){
// this.initDict();
this.initData()
},
methods:{
initData(){
let i =0
for (const item of this.ks) {
if (!this.data[item]){
this.data[item]=[]
}
if (!this.cqData[item]){
this.cqData[item]=[]
}
if (!this.cqUsers[item]){
this.cqUsers[item]=0
}
let totalUser=XEUtils.random(1,10)
this.totalUsers[item]=totalUser
if ('准备室'===item){
totalUser=1
this.totalUsers[item]=totalUser
}
for (let j = 0; j < totalUser; j++) {
++i
const cq=XEUtils.random(0, 1);
const data={
ks:item,
yhdm:'设备'+j,
name:'设备'+j,
headImage:'static/img/btn_em.35e6aa07.jpg',
gzl:XEUtils.random(0, 100),
cq:cq
}
if (cq){
this.cqUsers[item]+=1
this.cqData[item].push(data)
}else {
this.data[item].push(data)
}
}
}
},
}
}
</script>
<style lang="scss" scoped>
.arrow-right {
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left:16px solid yellowgreen;
position: relative;
top: -3.45vh;
left: 7.555vw;
}
.group-btn {
width: 80%;
height:32px;
color: white;
line-height:32px;
font-size:16px;
margin-top:15px;
text-align:center;
background-color: yellowgreen
}
.emptyGif {
display: block;
width: 45%;
margin: 0 auto;
}
.dashboard-editor-container {
background-color: #e3e3e3;
min-height: 100vh;
padding: 50px 60px 0px;
.pan-info-roles {
font-size: 12px;
font-weight: 700;
color: #333;
display: block;
}
.info-container {
position: relative;
margin-left: 190px;
height: 150px;
line-height: 200px;
.display_name {
font-size: 48px;
line-height: 48px;
color: #212121;
position: absolute;
top: 25px;
}
}
}
.rg-table-box::-webkit-scrollbar {
/*整体样式*/
width: 0;
}
.rg-table-box::-webkit-scrollbar-track {
/*轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #ededed;
border-radius: 10px;
}
.rg-table-box::-webkit-scrollbar-thumb {
/*滚动条小方块*/
border-radius: 10px;
background-color: #2e75d3;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
</style>

File diff suppressed because it is too large Load Diff

@ -1,135 +1,35 @@
<template>
<!-- 总览-->
<el-container style="width: 100%;height:90.9vh;background-color: rgba(138,43,226,0.68)">
<el-row style="width: 100%">
<el-col :span="3">
<div style="padding: 15px;margin-top: 80px">
<div class="group-btn">
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
1
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
2
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
3
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
4
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
5
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
6
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
7
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
</div>
</el-col>
<el-col :span="21">
<el-header style="width: 100%; height: 35px;font-size: 12px;">
<el-form :inline="true" style="margin-top: 25px">
<el-row>
<el-col :span="4">
<el-form-item>
<el-input v-model="queryParam.dcCh" placeholder="船号"/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-date-picker v-model="queryParam.beginTime" value-format="yyyy/MM" format="yyyy/MM/dd" type="date" placeholder="日期"/>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item>
<el-date-picker v-model="queryParam.endTime" value-format="yyyy/MM/dd" format="yyyy/MM/dd" type="date" placeholder="结束时间"/>
</el-form-item>
</el-col>-->
<!-- <el-col :span="12" style="text-align: left">
<el-button type="success">对比</el-button>
<el-button type="success">全选</el-button>
<el-button type="success">确定</el-button>
</el-col>-->
</el-row>
</el-form>
</el-header>
<div class="rg-table-box" style="width:100%;height:88vh;overflow-y: auto;">
<div v-for="(item,index) in ks">
<Content :data="data" :deptName="item" :type="'mp'" :myStyle="{headImgWidth:'70%'}" :users="cqUsers[item]||0"/>
</div>
</div>
</el-col>
</el-row>
<!-- <div style="width: 100%">
<div style="width: 100%;height: 60vh;background-color: yellow"></div>
<div style="width: 100%;height: 30.9vh;background-color: blue"></div>
</div>-->
</el-container>
<!-- <div class="dashboard-editor-container" style="background-color: blueviolet;">
<div class=" clearfix" style="width: 100%;height: 60vh;background-color: yellow">
<pan-thumb :image="avatar" style="float: left">
&lt;!&ndash; Your roles:
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>&ndash;&gt;
</pan-thumb>
<div class="info-container">
<span class="display_name">{{ name }}</span>
&lt;!&ndash;<span style="font-size:20px;padding-top:20px;display:inline-block;">大连船舶重工集团舾装有限公司</span>&ndash;&gt;
</div>
</div>
<div>
<img :src="emptyGif" class="emptyGif">
</div>
</div>-->
<div class="dashboard-editor-container" style="background-color: #f6fbff;">
<Czfdzgtcx />
<!-- <div class=" clearfix">-->
<!-- <pan-thumb :image="avatar" style="float: left">-->
<!-- &lt;!&ndash; Your roles:-->
<!-- <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>&ndash;&gt;-->
<!-- </pan-thumb>-->
<!-- <div class="info-container">-->
<!-- <span class="display_name">{{ name }}</span>-->
<!-- &lt;!&ndash;<span style="font-size:20px;padding-top:20px;display:inline-block;">大连船舶重工集团舾装有限公司</span>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <img :src="emptyGif" class="emptyGif">-->
<!-- </div>-->
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
import XEUtils from 'xe-utils'
import {dictALL} from '@/api/user'
import Template from "@/views/dashboard/components/Template.vue";
import Content from "@/views/dashboard/components/Content.vue";
import { dictALL} from '@/api/user'
import Czfdzgtcx from "@/views/dashboard/components/fd/czfdzgtcx.vue";
export default {
name: 'Dashboard',
components: {Content, Template, PanThumb },
components: {Czfdzgtcx, PanThumb },
data() {
return {
ks: ['资料', '上料', '1跨', '2跨', '3跨', '4跨', '5跨', '6跨', '7跨'],
data: {},
cqData:{},
cqUsers: {},
totalUsers:{},
queryParam:{
dcCh:'',
beginTime:'',
endTime:'',
}
}
},
computed: {
@ -141,48 +41,10 @@ export default {
])
},
created(){
// this.initDict();
this.initData()
this.initDict();
},
methods:{
initData(){
let i =0
for (const item of this.ks) {
if (!this.data[item]){
this.data[item]=[]
}
if (!this.cqData[item]){
this.cqData[item]=[]
}
if (!this.cqUsers[item]){
this.cqUsers[item]=0
}
let totalUser=XEUtils.random(1,10)
this.totalUsers[item]=totalUser
if ('准备室'===item){
totalUser=1
this.totalUsers[item]=totalUser
}
for (let j = 0; j < totalUser; j++) {
++i
const cq=XEUtils.random(0, 1);
const data={
ks:item,
yhdm:'设备'+j,
name:'设备'+j,
headImage:'static/img/btn_em.35e6aa07.jpg',
gzl:XEUtils.random(0, 100),
cq:cq
}
if (cq){
this.cqUsers[item]+=1
this.cqData[item].push(data)
}else {
this.data[item].push(data)
}
}
}
},
//
initDict(){
dictALL().then(res=>{
@ -199,28 +61,6 @@ export default {
</script>
<style lang="scss" scoped>
.arrow-right {
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left:16px solid yellowgreen;
position: relative;
top: -3.45vh;
left: 7.555vw;
}
.group-btn {
width: 80%;
height:32px;
color: white;
line-height:32px;
font-size:16px;
margin-top:15px;
text-align:center;
background-color: yellowgreen
}
.emptyGif {
display: block;
width: 45%;
@ -230,52 +70,25 @@ export default {
.dashboard-editor-container {
background-color: #e3e3e3;
min-height: 100vh;
padding: 50px 60px 0px;
.pan-info-roles {
font-size: 12px;
font-weight: 700;
color: #333;
display: block;
}
.info-container {
position: relative;
margin-left: 190px;
height: 150px;
line-height: 200px;
.display_name {
font-size: 48px;
line-height: 48px;
color: #212121;
position: absolute;
top: 25px;
}
padding: 50px 60px 0px;
.pan-info-roles {
font-size: 12px;
font-weight: 700;
color: #333;
display: block;
}
.info-container {
position: relative;
margin-left: 190px;
height: 150px;
line-height: 200px;
.display_name {
font-size: 48px;
line-height: 48px;
color: #212121;
position: absolute;
top: 25px;
}
}
.rg-table-box::-webkit-scrollbar {
/*整体样式*/
width: 0;
}
.rg-table-box::-webkit-scrollbar-track {
/*轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #ededed;
border-radius: 10px;
}
.rg-table-box::-webkit-scrollbar-thumb {
/*滚动条小方块*/
border-radius: 10px;
background-color: #2e75d3;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
</style>

Loading…
Cancel
Save