mt-fe-group/11-mes-new
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb
2022-11-11 14:05:56 +08:00
parent c88648e8d2
commit ec12c84830
12 changed files with 338 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/views/3DOverview/components/LeftContentOrder.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="left-content-equipment-check">
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
<div class="el-table-wrapper fix-table">
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
<div class="left-content-order fix-table">
<techy-table :page="1" :limit="8" :show-index="false" :table-config="tableProps" :table-data="tableData" />
<!--
<el-table
key="LeftContentOrder1"
border
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
height="100%"
>
<el-table-column
label="订单编号"
@@ -38,7 +38,8 @@
</template>
</el-table-column>
</el-table>
</div>
</div> -->
<!-- <div class="el-table-wrapper">
<el-table
key="LeftContentOrder2"
@@ -56,33 +57,60 @@
</template>
<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'
import TechyTable from './TechyTable.vue'
const ProcessCircle = {
name: 'ProcessCircle',
props: {
injectData: {
type: Object,
default: () => ({})
}
},
mounted() {
console.log('finished', this.injectData.finished)
},
methods: {},
render: function(h) {
return h('el-progress', {
'class': {
'lb-progress-bar': true
},
props: {
type: 'circle',
percentage: this.injectData.finished,
width: 14,
'stroke-width': 2,
color: '#47FF27'
},
style: {
color: 'blue'
}
})
}
}
const tableProps = [
{ prop: 'orderCode', label: '订单编码', align: 'center', 'min-width': 120 },
{ prop: 'clientName', label: '客户名称', align: 'center', 'min-width': 100 },
{ prop: 'specs', label: '规格', align: 'center', 'min-width': 90 },
{ prop: 'finished', label: '完成度', align: 'center', 'min-width': 80, subcomponent: ProcessCircle }
]
const tableData = [
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 }
// { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
// { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
]
const tableData2 = [
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
// { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 },
{ orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
]
export default {
name: 'LeftContentOrder',
components: {},
components: { TechyTable },
data() {
return { tableData, tableData2 }
return { tableData, tableProps }
},
created() {},
mounted() {},
@@ -97,18 +125,14 @@ export default {
text-align: left;
}
.left-content-equipment-check {
display: flex;
gap: calc(100vw / 1920 * 16);
.left-content-order {
height: calc(100% - 3vh);
overflow: auto;
}
/*
.el-table-wrapper {
flex: 1;
}
.left-content-equipment-check > div {
overflow: hidden;
overflow-x: auto;
height: 100%;
}
.el-table-wrapper >>> * {
@@ -160,13 +184,16 @@ export default {
.el-table-wrapper >>> tbody > tr:nth-child(even) {
background: rgba(76, 97, 123, 0.2);
}
*/
.lb-progress-bar {
left: 30px;
display: flex;
.left-content-order >>> .el-progress-circle {
position: relative;
left: calc(24px * var(--beilv));
}
.lb-progress-bar >>> .el-progress__text {
color: #fff9;
left: -85%;
.left-content-order >>> .el-progress__text {
font-size: inherit;
left: calc(-2px * var(--beilv));
color: #ffffff50 !important;
}
</style>

20
src/views/3DOverview/components/LeftContentPublicConsume.vue
View File

@@ -27,7 +27,7 @@
<div>
<TechyBox class="water-consume">
<div class="header-part ">
<div class="header-part">
<img src="./assets/consume/s.png" width="32" height="32" alt="water" />
<span>水</span>
</div>
@@ -92,7 +92,7 @@
</TechyBox>
</div>
<div style="flex: 1;">
<div style="height: 1px; flex: 1;">
<TechyBox class="dian-consume">
<div class="header-part">
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
@@ -104,7 +104,7 @@
</TechyBox>
</div>
<div style="flex: 1;">
<div style="height: 1px; flex: 1;">
<TechyBox class="elec-consume">
<div class="header-part">
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
@@ -146,7 +146,7 @@ export default {
'water elec-gen elec-gen gas'; */
display: flex;
flex-direction: column;
gap: calc(100vmin / 1920 * 16);
gap: calc(8px * var(--beilv));
}
.water-area {
@@ -167,19 +167,19 @@ export default {
} */
.techy-box {
padding: calc(100vmin / 1920 * 16);
padding: calc(16px * var(--beilv));
display: flex;
}
.header-part {
height: 100%;
width: calc(100vmin / 1920 * 96);
width: calc(56px * var(--beilv));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* overflow: hidden; */
margin-right: 16px;
margin-right: calc(16px * var(--beilv));
position: relative;
}
@@ -187,15 +187,15 @@ export default {
content: '';
position: absolute;
top: 0;
right: -8px;
width: 1px;
right: calc(-8px * var(--beilv));
width: calc(1px * var(--beilv));
height: 100%;
background: linear-gradient(to bottom, transparent, #fff9, transparent);
}
.header-part > span {
color: #fffc;
font-size: 0.8em;
font-size: calc(12px * var(--beilv));
}
.content-part {

1
src/views/3DOverview/components/RightContentProductRate.vue
View File

@@ -245,7 +245,6 @@ export default {
},
mounted() {
this.$nextTick(() => {
console.log('here...')
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})

42
src/views/3DOverview/components/TechyAnalysisBar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="quality-analysis-bar" :class="`border-${color}`">
<div class="placeholder-block-wrapper">
<div class="justify-end">
<div class="flex justify-end">
<div class="placeholder-block" :class="`block-${color}-1`" />
<div class="placeholder-block" :class="`block-${color}-2`" />
<div class="placeholder-block" :class="`block-${color}-3`" />
@@ -22,7 +22,7 @@ export default {
filters: {
amountFilter: val => {
const sVal = val.toString()
return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal
return sVal.length > 7 ? sVal.slice(0, 6) + '...' : sVal
}
},
props: {
@@ -57,45 +57,43 @@ export default {
.quality-analysis-bar {
border-radius: 2px;
padding: 2px;
padding: calc(2px * var(--beilv));
display: flex;
}
.border-green {
border: 1px solid #35abad;
border: 2px solid #35abad;
}
.border-blue {
border: 1px solid #49b2ff;
border: 2px solid #49b2ff;
}
.border-orange {
border: 1px solid #ffb94d;
border: 2px solid #ffb94d;
}
.border-pink {
border: 1px solid #ed879f;
border: 2px solid #ed879f;
}
.placeholder-block-wrapper {
flex-grow: 1;
overflow: hidden;
min-width: 32px;
min-width: calc(32px * var(--beilv));
position: relative;
display: flex;
justify-content: center;
}
.placeholder-block-wrapper > div {
width: 200px;
width: calc(300px * var(--beilv));
position: absolute;
top: 0;
right: 0;
display: flex;
}
.placeholder-block {
width: 20px;
height: 20px;
margin-left: 3px;
/* border-radius: 1px; */
width: calc(20px * var(--beilv));
height: calc(20px * var(--beilv));
margin-left: calc(3px * var(--beilv));
}
.block-green-5 {
@@ -175,24 +173,24 @@ export default {
.quality-analysis-bar__name {
text-align: center;
white-space: nowrap;
white-space: normal;
overflow-wrap: break-word;
overflow: hidden;
color: white;
display: inline-block;
padding: 3px 8px;
font-size: 14px;
line-height: 12px;
padding: calc(3px * var(--beilv)) calc(8px * var(--beilv));
font-size: calc(14px * var(--beilv));
line-height: calc(12px * var(--beilv));
}
.quality-analysis-bar__amount {
color: rgba(255, 255, 255, 0.725);
display: inline-block;
/* min-width: 35%; */
width: 50%;
width: 35%;
text-align: left;
padding: 3px 0;
font-size: 14px;
line-height: 12px;
padding: calc(3px * var(--beilv)) 0;
font-size: calc(14px * var(--beilv));;
line-height: calc(12px * var(--beilv));;
}
</style>

4
src/views/3DOverview/components/TechyHeader.vue
View File

@@ -122,7 +122,7 @@ export default {
margin-left: calc(12px * var(--beilv));
font-size: calc(29px * var(--beilv));
line-height: calc(41px * var(--beilv));
letter-spacing: calc(2.23px * var(--beilv));
letter-spacing: calc(4px * var(--beilv));
text-shadow: 0px 0px calc(11px * var(--beilv)) rgba(221, 237, 255, 0.34);
}
@@ -134,7 +134,7 @@ export default {
color: #49e1de;
letter-spacing: calc(0.8px * var(--beilv));
position: absolute;
bottom: calc(12px * var(--beilv));
bottom: calc(18px * var(--beilv));
}
.date {

186
src/views/3DOverview/components/TechyTable.vue
View File

@@ -7,15 +7,14 @@
-->
<template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
<el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
<el-table-column
v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
:width="70 * beilv"
align="center"
/>
<el-table-column
v-for="(item, index) in renderTableHeadList"
:key="item.prop"
@@ -23,10 +22,14 @@
v-bind="item"
>
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :key="index" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
<component
:is="item.subcomponent"
v-if="item.subcomponent"
:key="index"
:inject-data="{ ...scope.row, ...item }"
@emitData="emitData"
/>
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
@@ -107,82 +110,101 @@ export default {
methods: {
emitData(val) {
this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(76,97,123,0.2)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
}
}
}
}
</script>
<style lang="scss">
@import "~@/styles/index.scss";
<style scoped>
.visual-base-table-container >>> ::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
.visual-base-table-container >>> ::-webkit-scrollbar-track {
background-color: #14243f;
border-radius: 0;
}
.visual-base-table-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #5bc4bf9f;
position: relative;
}
.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
/* .visual-base-table-container {
min-width: 30vw;
} */
.visual-base-table-container {
.el-table {
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
// new
.el-table {
width: 100%;
.el-table__header-wrapper table, .el-table__body-wrapper table {
width: 100% !important;
}
.el-table__body, .el-table__footer, .el-table__header {
table-layout: auto;
}
}
height: 100%;
}
.setting {
text-align: right;
padding: 15px;
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
/* .visual-base-table-container >>> .el-table {
min-width: 120%;
} */
/* 清除默认样式 */
.visual-base-table-container >>> th.gutter {
display: none;
}
.visual-base-table-container >>> table {
background: transparent;
}
.visual-base-table-container >>> .el-table,
.visual-base-table-container >>> th,
.visual-base-table-container >>> tr {
background: unset;
}
/* 设置设计稿样式 */
.visual-base-table-container >>> .el-table::before,
.visual-base-table-container >>> .el-table--group::after,
.visual-base-table-container >>> .el-table--border::after,
.visual-base-table-container >>> .el-table--border::after {
background: unset;
}
.visual-base-table-container >>> table * {
border-color: #0d1728;
border-width: calc(1px * var(--beilv));
}
.visual-base-table-container >>> td {
padding: calc(5px * var(--beilv));
}
.visual-base-table-container >>> td span {
color: #ffffff50;
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
}
.visual-base-table-container >>> thead th {
padding: 0;
}
.visual-base-table-container >>> thead th .cell {
color: #fff;
font-size: calc(14px * var(--beilv));
line-height: calc(14px * var(--beilv));
padding: calc(6px * var(--beilv));
white-space: nowrap;
}
.visual-base-table-container >>> .el-table__body tr:hover > td {
background-color: #42537130;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e90;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #20376090;
}
</style>