You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
773 lines
22 KiB
773 lines
22 KiB
<template>
|
|
<div>
|
|
<ContentWrap class="search">
|
|
<el-form
|
|
:inline="true"
|
|
:model="queryParams"
|
|
class="demo-form-inline"
|
|
style="margin-bottom: -17px"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="项目名称" style="width: calc(20% - 32px)">
|
|
<el-select
|
|
v-model="queryParams.proCode"
|
|
placeholder="请选择项目"
|
|
clearable
|
|
filterable
|
|
style="width: 100%"
|
|
@change="detectionProjectChange"
|
|
>
|
|
<el-option v-for=" (item) in projectList" :key="item" :label="item.name" :value="item.code" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="物料编码" style="width: calc(20% - 32px)">
|
|
<el-select
|
|
v-model="queryParams.itemCode"
|
|
placeholder="请选择物料编码"
|
|
clearable
|
|
filterable
|
|
style="width: 100%"
|
|
@change="detectionItemChange"
|
|
>
|
|
<el-option v-for=" (item) in itemList" :key="item" :label="item.code" :value="item.code" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="检测模版类型" style="width: calc(20% - 36px)">
|
|
<el-select
|
|
v-model="queryParams.detectionType"
|
|
placeholder="请选择检测模版类型"
|
|
clearable
|
|
filterable
|
|
style="width: 100%"
|
|
@change="detectionItemChange"
|
|
>
|
|
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.ITEMBASIC_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="检测项" style="width: calc(20% - 32px)">
|
|
<el-select
|
|
v-model="queryParams.detectionItemContentId"
|
|
placeholder="请选择检测项"
|
|
clearable
|
|
filterable
|
|
style="width: 100%"
|
|
@change="deItemChange"
|
|
>
|
|
<el-option v-for=" (item) in detectionItemList" :key="item" :label="item.name" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="检测点位" style="width: calc(20% - 32px)" v-if="isShow">
|
|
<el-select
|
|
v-model="queryParams.lineNumber"
|
|
placeholder="请选择行号类型"
|
|
clearable
|
|
style="width: 100%"
|
|
@change="lineNumberChange"
|
|
>
|
|
<el-option v-for="lines in lineNumberList" :key="lines.lineNumber" :label="lines.name" :value="lines.lineNumber" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="检测日期" style="width: calc(35% - 32px)">
|
|
<el-date-picker
|
|
v-model="queryParams.detectionDate"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
placeholder="请选择日期"
|
|
clearable
|
|
value-format="YYYY-MM-DD"
|
|
@change="deDateChange"
|
|
/>
|
|
</el-form-item>
|
|
<!-- <el-form-item>
|
|
<el-button type="info" plain @click="handleQuery">
|
|
<Icon class="mr-5px" icon="ep:search" />
|
|
搜索
|
|
</el-button>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
</ContentWrap>
|
|
<ContentWrap class="search">
|
|
<div class="title">制程能力指数（CPK）</div>
|
|
<div class="cpk" v-loading="pnaLoading">
|
|
<div class="cpk-item">
|
|
<div class="cpk-item-1">
|
|
<div class="cpk-item-label">CP</div>
|
|
<div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.cp : '' }}</div>
|
|
</div>
|
|
<div class="cpk-item-1">
|
|
<div class="cpk-item-label">CPK</div>
|
|
<div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.cpk : '' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="cpk-item">
|
|
<div class="cpk-item-1">
|
|
<div class="cpk-item-label">PP</div>
|
|
<div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.pp : '' }}</div>
|
|
</div>
|
|
<div class="cpk-item-1">
|
|
<div class="cpk-item-label">PPK</div>
|
|
<div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.ppk : '' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="cpk-item1">
|
|
<div class="cpk-item-2">
|
|
<div class="cpk-item-label"><span>零件号</span> <span>{{ datas.tzrv != null? datas.tzrv.itemCode : '' }}</span></div>
|
|
<div class="cpk-item-label"><span>检测内容</span> <span>{{ datas.tzrv != null? datas.tzrv.detectionItemContents : '' }}</span></div>
|
|
</div>
|
|
<div class="cpk-item-2">
|
|
<div class="cpk-item-label"><span>公差上限</span> <span>{{ datas.tzrv != null? datas.tzrv.detectionItemUpLimit : '' }}</span></div>
|
|
<div class="cpk-item-label"><span>公差下限</span> <span>{{ datas.tzrv != null? datas.tzrv.detectionItemDownLimt : '' }}</span></div>
|
|
</div>
|
|
<div class="cpk-item-2">
|
|
<div class="cpk-item-label"><span>X中值</span> <span>{{ datas.tzrv != null? datas.tzrv.xavg : '' }}</span></div>
|
|
<div class="cpk-item-label"><span>R中值</span> <span>{{ datas.tzrv != null? datas.tzrv.ravg : '' }}</span></div>
|
|
</div>
|
|
<div class="cpk-item-2">
|
|
<div class="cpk-item-label"><span>UCLx</span> <span>{{ datas.tzrv != null? datas.tzrv.uclx : '' }}</span></div>
|
|
<div class="cpk-item-label"><span>LCLx</span> <span>{{ datas.tzrv != null? datas.tzrv.lclx : '' }}</span></div>
|
|
</div>
|
|
<div class="cpk-item-2">
|
|
<div class="cpk-item-label"><span>UCLr</span> <span>{{ datas.tzrv != null? datas.tzrv.ucln : '' }}</span></div>
|
|
<div class="cpk-item-label"><span>LCLr</span> <span>{{ datas.tzrv != null? datas.tzrv.lcln : '' }}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table border="1" width="100%" align="center" border-collapse="collapse" v-loading="tabLoading">
|
|
<tr class="td-bg">
|
|
<td colspan="2">样本</td>
|
|
<td>1</td>
|
|
<td>2</td>
|
|
<td>3</td>
|
|
<td>4</td>
|
|
<td>5</td>
|
|
<td>6</td>
|
|
<td>7</td>
|
|
<td>8</td>
|
|
<td>9</td>
|
|
<td>10</td>
|
|
<td>11</td>
|
|
<td>12</td>
|
|
<td>13</td>
|
|
<td>14</td>
|
|
<td>15</td>
|
|
<td>16</td>
|
|
<td>17</td>
|
|
<td>18</td>
|
|
<td>19</td>
|
|
<td>20</td>
|
|
<td>21</td>
|
|
<td>22</td>
|
|
<td>23</td>
|
|
<td>24</td>
|
|
<td>25</td>
|
|
</tr>
|
|
<tr v-for="(item , index) in datas.tvList" :key="item">
|
|
<td v-if="index == 0" rowspan="8" class="td-bg">检测记录</td>
|
|
<td v-if="index == 5" class="td-bg">合计值</td>
|
|
<td v-else-if="index == 6" class="td-bg">平均值</td>
|
|
<td v-else-if="index == 7" class="td-bg">极差值</td>
|
|
<td v-else class="td-bg">{{ index + 1 }}</td>
|
|
<td v-for="(it) in item" :key="it">{{ it }}</td>
|
|
<!-- <td>{{ item.twoDv }}</td>
|
|
<td>{{ item.thrDv }}</td>
|
|
<td>{{ item.fouDv }}</td>
|
|
<td>{{ item.fivDv }}</td> -->
|
|
</tr>
|
|
</table>
|
|
</ContentWrap>
|
|
<ContentWrap class="search">
|
|
<div class="tabs">
|
|
<div class="title" :class="tabIndex == 0 ? 'active' : ''" @click="changTabIndex(0)">控制图</div>
|
|
<div class="title" :class="tabIndex == 1 ? 'active' : ''" @click="changTabIndex(1)">CPK分析图</div>
|
|
<div class="title" :class="tabIndex == 2 ? 'active' : ''" @click="changTabIndex(2)">样本运行图</div>
|
|
<div class="title" :class="tabIndex == 3 ? 'active' : ''" @click="changTabIndex(3)">均值运行图</div>
|
|
</div>
|
|
<div class="charts" v-show="tabIndex == 0">
|
|
<div id="myEcharts1" :style="{ width: '50%', height: '300px' }" v-loading="ec1Loading"></div>
|
|
<div id="myEcharts2" :style="{ width: '50%', height: '300px' }" v-loading="ec2Loading"></div>
|
|
</div>
|
|
<div class="charts" v-show="tabIndex == 1">
|
|
<!-- <div id="myEcharts3" :style="{ width: '80vw', height: '300px' }" v-loading="ec3Loading"></div> -->
|
|
<ZtfbView ref="myEcharts3Ref" v-loading="ec3Loading" />
|
|
</div>
|
|
<div class="charts" v-show="tabIndex == 2">
|
|
<div id="myEcharts4" :style="{ width: '80vw', height: '300px' }" v-loading="ec4Loading"></div>
|
|
</div>
|
|
<div class="charts" v-show="tabIndex == 3">
|
|
<div id="myEcharts5" :style="{ width: '80vw', height: '300px' }" v-loading="ec5Loading"></div>
|
|
</div>
|
|
</ContentWrap>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import * as echarts from 'echarts'
|
|
import * as ZlnalysisAPI from '@/api/tjanalysis/zlanalysis'
|
|
import * as ProjecAPI from '@/api/spc/project'
|
|
import * as ItembasicApi from '@/api/spc/itembasic'
|
|
import * as TemplateItemDetailsApi from '@/api/spc/templateItemDetails'
|
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
import {formatDate} from '@/utils/formatTime'
|
|
import ZtfbView from './components/ztfbview.vue'
|
|
|
|
let echart = echarts
|
|
const myEcharts3Ref = ref()
|
|
|
|
// 项目列表
|
|
const projectList = ref()
|
|
// 物料列表
|
|
const itemList = ref()
|
|
// 检测项列表
|
|
const detectionItemList = ref()
|
|
|
|
// 色差行号列表
|
|
const lineNumberList = ref()
|
|
const isShow = ref(false);
|
|
const pnaLoading = ref(true)
|
|
const tabLoading = ref(true)
|
|
const ec1Loading = ref(true)
|
|
const ec2Loading = ref(true)
|
|
const ec3Loading = ref(true)
|
|
const ec4Loading = ref(true)
|
|
const ec5Loading = ref(true)
|
|
|
|
|
|
const queryParams = reactive({
|
|
proCode: '',
|
|
itemCode: '',
|
|
detectionType: '',
|
|
detectionItemContentId: null,
|
|
detectionDate: [formatDate(new Date() , 'YYYY-MM-DD'),formatDate(new Date() , 'YYYY-MM-DD')],
|
|
//detectionDate: [],
|
|
ecTab: '1',
|
|
lineNumber:''
|
|
})
|
|
|
|
const datas = reactive({
|
|
tvList : null,
|
|
tzrv: null,
|
|
echatrtData: null,
|
|
ranData: null
|
|
})
|
|
|
|
const tabIndex = ref(0)
|
|
|
|
// 设置延期未交付数据
|
|
function setChart1(datavv) {
|
|
console.info("datavv",datavv)
|
|
let chart = echart.init(document.getElementById('myEcharts1'), 'light')
|
|
// 把配置和数据放这里
|
|
chart.setOption({
|
|
title: {
|
|
text: 'MEAN CHART'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: datavv != null? datavv.legend : [],
|
|
top: '0',
|
|
right: '3%'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: '15%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: datavv != null? datavv.xDatas : []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: datavv != null? datavv.legend[0] : '',
|
|
data: datavv != null? datavv.yDatas[0] : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: datavv != null? datavv.legend[1] : '',
|
|
data: datavv != null? datavv.yDatas[1] : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: datavv != null? datavv.legend[2] : '',
|
|
data: datavv != null? datavv.yDatas[2] : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: datavv != null? datavv.legend[3] : '',
|
|
data: datavv != null? datavv.yDatas[3] : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: datavv != null? datavv.legend[4] : '',
|
|
data: datavv != null? datavv.yDatas[4] : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: datavv != null? datavv.legend[5] : '',
|
|
data: datavv != null? datavv.yDatas[5] : [],
|
|
type: 'line'
|
|
}
|
|
]
|
|
})
|
|
|
|
window.onresize = function () {
|
|
//自适应大小
|
|
chart.resize()
|
|
}
|
|
}
|
|
function setChart2(rangeData) {
|
|
let chart = echart.init(document.getElementById('myEcharts2'), 'light')
|
|
// 把配置和数据放这里
|
|
chart.setOption({
|
|
title: {
|
|
text: 'RANGE CHART'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: rangeData != null ? rangeData.legend : [],
|
|
top: '0',
|
|
right: '3%'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: '15%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: rangeData != null ? rangeData.xDatas : []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: rangeData != null ? rangeData.legend[0] : '',
|
|
data: rangeData != null ? rangeData.yDatas[0] : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: rangeData != null ? rangeData.legend[1] : '',
|
|
data: rangeData != null ? rangeData.yDatas[1] : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: rangeData != null ? rangeData.legend[2] : '',
|
|
data: rangeData != null ? rangeData.yDatas[2] : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: rangeData != null ? rangeData.legend[3] : '',
|
|
data: rangeData != null ? rangeData.yDatas[3] : [],
|
|
type: 'line'
|
|
}
|
|
]
|
|
})
|
|
window.onresize = function () {
|
|
//自适应大小
|
|
chart.resize()
|
|
}
|
|
}
|
|
function setChart3(ztData) {
|
|
if (ztData != null) {
|
|
myEcharts3Ref.value.open(ztData.datas , ztData.downLimit , ztData.upLimit)
|
|
}else{
|
|
myEcharts3Ref.value.open([] , null , null)
|
|
}
|
|
}
|
|
function setChart4(ybData) {
|
|
let chart = echart.init(document.getElementById('myEcharts4'), 'light')
|
|
// 把配置和数据放这里
|
|
chart.setOption({
|
|
// title: {
|
|
// text: '样本运行图'
|
|
// },
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['标准上限', '标准下限'],
|
|
top: '0',
|
|
right: '3%'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: '15%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ybData != null ? ybData.xDatas : []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '检测值',
|
|
data: ybData != null ? ybData.yDatas : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: '标准上限',
|
|
data: ybData != null ? ybData.bzsx : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: '标准下限',
|
|
data: ybData != null ? ybData.bzxx : [],
|
|
type: 'line'
|
|
},
|
|
]
|
|
})
|
|
window.onresize = function () {
|
|
//自适应大小
|
|
chart.resize()
|
|
}
|
|
}
|
|
function setChart5(jzData) {
|
|
let chart = echart.init(document.getElementById('myEcharts5'), 'light')
|
|
// 把配置和数据放这里
|
|
chart.setOption({
|
|
// title: {
|
|
// text: '均值运行图'
|
|
// },
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['均值上限', '均值下限'],
|
|
top: '0',
|
|
right: '3%'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: '15%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: jzData != null ? jzData.xDatas : []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '均值',
|
|
data: jzData != null ? jzData.yDatas : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: '均值上限',
|
|
data: jzData != null ? jzData.jzsx : [],
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: '均值下限',
|
|
data: jzData != null ? jzData.jzxx : [],
|
|
type: 'line'
|
|
}
|
|
]
|
|
})
|
|
window.onresize = function () {
|
|
//自适应大小
|
|
chart.resize()
|
|
}
|
|
}
|
|
|
|
|
|
const detectionProjectChange = async()=> {
|
|
if(queryParams.proCode==''){
|
|
|
|
}
|
|
queryParams.detectionItemContentId = null
|
|
const _detectionItemList = await TemplateItemDetailsApi.selectDetectionItems(queryParams.itemCode , queryParams.detectionType)
|
|
if (_detectionItemList != null && _detectionItemList.length > 0) {
|
|
detectionItemList.value = _detectionItemList
|
|
queryParams.detectionItemContentId = _detectionItemList[0].value
|
|
}
|
|
initData()
|
|
}
|
|
|
|
const detectionItemChange = async()=> {
|
|
detectionItemList.value = null
|
|
queryParams.detectionItemContentId = null
|
|
isShow.value=false
|
|
const _detectionItemList = await TemplateItemDetailsApi.selectDetectionItems(queryParams.itemCode , queryParams.detectionType)
|
|
if (_detectionItemList != null && _detectionItemList.length > 0) {
|
|
detectionItemList.value = _detectionItemList
|
|
queryParams.detectionItemContentId = _detectionItemList[0].value
|
|
if(queryParams.detectionType =='CHROMATIC_ABERRATION'){//色差显示行号下拉选
|
|
lineNumberList.value = await TemplateItemDetailsApi.selectDetectionLineNumber(queryParams.itemCode , queryParams.detectionType)
|
|
queryParams.lineNumber = lineNumberList.value[0].lineNumber
|
|
isShow.value = true;
|
|
}
|
|
}
|
|
initData()
|
|
}
|
|
|
|
const deItemChange = async(value)=> {
|
|
queryParams.detectionItemContentId = value
|
|
initData()
|
|
}
|
|
|
|
const lineNumberChange = async(value)=> {
|
|
queryParams.lineNumber = value
|
|
initData()
|
|
}
|
|
|
|
const deDateChange = async (value) => {
|
|
initData()
|
|
}
|
|
|
|
const changTabIndex = async (tIndexV) => {
|
|
ec1Loading.value = true
|
|
ec2Loading.value = true
|
|
ec3Loading.value = true
|
|
ec4Loading.value = true
|
|
ec5Loading.value = true
|
|
tabIndex.value = tIndexV
|
|
queryParams.ecTab = tIndexV
|
|
const dvDatas = await ZlnalysisAPI.getZcnlEcharts(queryParams)
|
|
if (dvDatas != null) {
|
|
if (tIndexV == 0) {
|
|
setChart1(dvDatas.menMap)
|
|
setChart2(dvDatas.ranMap)
|
|
ec1Loading.value = false
|
|
ec2Loading.value = false
|
|
} else if (tIndexV == 1) {
|
|
setChart3(dvDatas.ztMap)
|
|
ec3Loading.value = false
|
|
} else if (tIndexV == 2) {
|
|
setChart4(dvDatas.ybMap)
|
|
ec4Loading.value = false
|
|
} else if (tIndexV == 3) {
|
|
setChart5(dvDatas.jzMap)
|
|
ec5Loading.value = false
|
|
}
|
|
}else{
|
|
setChart3(null);
|
|
ec1Loading.value = false
|
|
ec2Loading.value = false
|
|
ec3Loading.value = false
|
|
ec4Loading.value = false
|
|
ec5Loading.value = false
|
|
}
|
|
}
|
|
|
|
const initData = async () => {
|
|
await resetDats()
|
|
const _datas = await ZlnalysisAPI.getZcnlInfos(queryParams)
|
|
changTabIndex(0)
|
|
if (_datas != null) {
|
|
datas.tvList = _datas.tvList
|
|
datas.tzrv = _datas.tzrv
|
|
setChart1(_datas.menMap)
|
|
setChart2(_datas.ranMap)
|
|
}
|
|
|
|
pnaLoading.value = false
|
|
tabLoading.value = false
|
|
ec1Loading.value = false
|
|
ec2Loading.value = false
|
|
}
|
|
|
|
const initQuerys = async () => {
|
|
const dictOptions = await getIntDictOptions(DICT_TYPE.ITEMBASIC_TYPE)//查询物料类型
|
|
if (dictOptions != null && dictOptions.length > 0) {
|
|
queryParams.detectionType = dictOptions[0].value + ''
|
|
}
|
|
const _projectList = await ProjecAPI.selectAllPros()
|
|
if (_projectList != null && _projectList.length > 0) {
|
|
projectList.value = _projectList
|
|
}
|
|
const _itemList = await ItembasicApi.selectItems()
|
|
if (_itemList != null && _itemList.length > 0) {
|
|
itemList.value = _itemList
|
|
queryParams.itemCode = _itemList[0].code
|
|
}
|
|
|
|
const _detectionItemList = await TemplateItemDetailsApi.selectDetectionItems(queryParams.itemCode , queryParams.detectionType)
|
|
if (_detectionItemList != null && _detectionItemList.length > 0) {
|
|
|
|
detectionItemList.value = _detectionItemList
|
|
queryParams.detectionItemContentId = _detectionItemList[0].value
|
|
}
|
|
|
|
if(queryParams.detectionType =='CHROMATIC_ABERRATION'){//色差显示行号下拉选
|
|
lineNumberList.value = await TemplateItemDetailsApi.selectDetectionLineNumber(queryParams.itemCode , queryParams.detectionType)
|
|
if(lineNumberList.value!=null&&lineNumberList.value.length>0){
|
|
queryParams.lineNumber = lineNumberList.value[0].lineNumber
|
|
}
|
|
isShow.value = true;
|
|
|
|
}
|
|
|
|
initData()
|
|
}
|
|
|
|
function resetDats() {
|
|
pnaLoading.value = true
|
|
tabLoading.value = true
|
|
ec1Loading.value = true
|
|
ec2Loading.value = true
|
|
ec3Loading.value = true
|
|
ec4Loading.value = true
|
|
ec5Loading.value = true
|
|
|
|
setChart1(null)
|
|
setChart2(null)
|
|
setChart4(null)
|
|
setChart5(null)
|
|
|
|
datas.tvList = null
|
|
datas.tzrv = null
|
|
datas.echatrtData = null
|
|
datas.ranData = null
|
|
}
|
|
|
|
onMounted(async () => {
|
|
initQuerys()
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.search {
|
|
background: white;
|
|
}
|
|
::v-deep.el-form-item--default .el-form-item__label {
|
|
padding: 0px 20px !important;
|
|
background: rgb(53, 158, 256) !important;
|
|
color: white !important;
|
|
}
|
|
.title {
|
|
margin-bottom: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
.cpk {
|
|
display: flex;
|
|
align-items: center;
|
|
.cpk-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 10%;
|
|
margin-right: 10px;
|
|
background: rgb(235, 243, 255);
|
|
border: 1px solid rgb(44, 135, 255);
|
|
height: 60px;
|
|
justify-content: center;
|
|
.cpk-item-1 {
|
|
text-align: center;
|
|
margin: 0px 10px;
|
|
.cpk-item-label {
|
|
color: #a8a8a8;
|
|
font-size: 12px;
|
|
}
|
|
.cpk-item-value {
|
|
color: #000000;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
.cpk-item1 {
|
|
background: rgb(245, 245, 245);
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
height: 60px;
|
|
.cpk-item-2 {
|
|
.cpk-item-label {
|
|
color: #a8a8a8;
|
|
font-size: 12px;
|
|
span {
|
|
&:nth-child(1) {
|
|
width: 60px;
|
|
display: inline-block;
|
|
text-align: right;
|
|
margin-right: 6px;
|
|
}
|
|
&:nth-child(2) {
|
|
margin-right: 6px;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
table {
|
|
width: 100%;
|
|
/*居中*/
|
|
margin: 20px auto 0px;
|
|
/*边框*/
|
|
/* border: 1px solid black; */
|
|
|
|
border-collapse: collapse;
|
|
/*设置背景颜色*/
|
|
/* background-color: #bfa; */
|
|
}
|
|
|
|
/*
|
|
* 设置边框
|
|
*/
|
|
td,
|
|
th {
|
|
border: 1px solid rgb(200, 200, 200);
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/*
|
|
* 设置隔行变色
|
|
*/
|
|
// tbody > tr:nth-child(even) {
|
|
// background-color: #bfa;
|
|
// }
|
|
|
|
/*
|
|
* 鼠标移入到tr以后，改变颜色
|
|
*/
|
|
// tr:hover {
|
|
// background-color: #ff0;
|
|
// }
|
|
.td-bg {
|
|
background: rgb(231, 244, 248);
|
|
}
|
|
.tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
> div {
|
|
height: 30px;
|
|
cursor: pointer;
|
|
}
|
|
.active {
|
|
color: rgb(44, 135, 255);
|
|
font-weight: bold;
|
|
border-bottom: 2px solid rgb(44, 135, 255);
|
|
}
|
|
}
|
|
.charts {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|