581 lines
18 KiB
Plaintext
581 lines
18 KiB
Plaintext
<!-- 品质 -->
|
||
<script setup lang="ts">
|
||
import HomeHead from "@/views/home/components/HomeHead.vue";
|
||
// import HomeHeadSearch from "@/views/home/components/HomeHeadSearch.vue";
|
||
import { useDate } from "@/views/home/hooks/useDate";
|
||
import { useChart21 } from "./Quality";
|
||
import { useUserStore } from "@/stores/modules/user";
|
||
import { NModal ,useMessage} from "naive-ui";
|
||
import Amtion from '@/components/amtion.vue'
|
||
import {
|
||
topList,
|
||
actList,
|
||
highList,
|
||
badartList,
|
||
topStat,
|
||
} from "@/api/daikin/base";
|
||
// import { it } from "element-plus/es/locale/index.js";
|
||
const store = useUserStore();
|
||
const userCode = ["admin", "quality_dangdan", "tech_service"].includes(
|
||
store.user.roleCode
|
||
);
|
||
const message = useMessage()
|
||
// console.log(userCode);
|
||
const dataA = ref([]);
|
||
const dataB = ref([]);
|
||
const dataC = ref([]);
|
||
const dataD = ref([]);
|
||
const dataE = ref([]);
|
||
const { chartRef, option } = useChart21();
|
||
// const options = reactive(option);
|
||
|
||
async function getData() {
|
||
const { rows: _rowA } = await topList();
|
||
const { rows: _rowB } = await actList();
|
||
const { rows: _rowC } = await highList();
|
||
const { rows: _rowD } = await badartList();
|
||
|
||
dataA.value = _rowA;
|
||
dataB.value = _rowB;
|
||
dataC.value = _rowC;
|
||
dataD.value = _rowD;
|
||
// dataE.value = _rowE;
|
||
|
||
// options.series = _rowE
|
||
// _rowE.topItem.map((item, idx) => {
|
||
// if (idx < 10) {
|
||
// options.series[0].data[idx] = item.badSum;
|
||
// }
|
||
// });
|
||
// options.yAxis.data = _rowE.topItem.slice(0, 10).map(item => item.indexId)
|
||
}
|
||
getData();
|
||
const { day, week } = useDate();
|
||
const { push } = useRouter();
|
||
|
||
const tableData = [
|
||
{
|
||
date: "2016-05-03",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-02",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-04",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
{
|
||
date: "2016-05-01",
|
||
name: "xxx类别",
|
||
address: "卧龙电机XX批 次运输不良",
|
||
},
|
||
];
|
||
// 解析参数
|
||
const commandVal = (type, command) => {
|
||
return {
|
||
type: type,
|
||
command: command,
|
||
};
|
||
};
|
||
const handleCommand = (item) => {
|
||
console.log(item);
|
||
const { type, command } = item;
|
||
// window.open(command.url, "_blank");
|
||
};
|
||
// const openUrl = (url) => {
|
||
// console.log(url,111);
|
||
// // window.open(url, "_blank");
|
||
// };
|
||
const value1 = ref(null);
|
||
|
||
const src = ref('');
|
||
const srcType = ref()
|
||
const showModalRef2 =ref(false)
|
||
const openUrl = async (url)=>{
|
||
console.log(url)
|
||
|
||
if(!url) {
|
||
message.info("没有可预览文件！")
|
||
return
|
||
}
|
||
srcType.value = getLastSubstring(url)
|
||
if(['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'].includes(srcType.value)){
|
||
// src.value = filePath
|
||
// pdfShow.value = true
|
||
url='https://view.xdocin.com/view?src='+url
|
||
const screenWidth = window.screen.width;
|
||
const screenHeight = window.screen.height;
|
||
window.open(url, '', 'width=' + screenWidth + ',height=' + screenHeight + ',top=' + 0 + ',left=' + 0)
|
||
}
|
||
else{
|
||
message.error("文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！")
|
||
}
|
||
|
||
|
||
}
|
||
function getLastSubstring(str: string): string {
|
||
const lastIndex = str.lastIndexOf('.');
|
||
if (lastIndex !== -1) {
|
||
return str.substring(lastIndex + 1);
|
||
} else {
|
||
return '';
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<HomeHead class="top">
|
||
<template #content>
|
||
<!-- <HomeHeadSearch /> -->
|
||
</template>
|
||
</HomeHead>
|
||
<div class="h-full relative flex flex-col">
|
||
<el-button
|
||
v-if="userCode"
|
||
type="primary"
|
||
class="button"
|
||
@click="push({ name: 'QualityModify' })"
|
||
>管理</el-button
|
||
>
|
||
<div class="font-600 flex items-end mt30px">
|
||
<div class="text-36px">品质</div>
|
||
<div class="text-18px ml40px mr25px">{{ day }}</div>
|
||
<div class="text-18px">{{ week }}</div>
|
||
</div>
|
||
|
||
<div class="q-wrapper mt30px text-#142142 flex flex-wrap justify-between">
|
||
<div class="caver relative">
|
||
<div class="box-title">不良情报</div>
|
||
<div class="absolute right-0 top-30px w165px text-14px text-#B2B7BE">
|
||
{{ dataD.length > 0 ? "更新时间：" + dataD[0].createTime : "" }}
|
||
</div>
|
||
<div class="mt23px overflow-y-auto">
|
||
<el-table
|
||
:data="dataD"
|
||
stripe
|
||
height="740px"
|
||
style="width: 100%"
|
||
:header-cell-style="{
|
||
'text-align': 'center',
|
||
'background-color': '#417BEF',
|
||
color: '#fff',
|
||
height: '60px',
|
||
'margin-top': '20px',
|
||
'font-size': '18px',
|
||
}"
|
||
:cell-style="{ 'text-align': 'center', height: '70px' }"
|
||
>
|
||
<el-table-column prop="createTime" label="时间" width="110px" />
|
||
<el-table-column prop="cate" label="类别" width="100px" />
|
||
<el-table-column prop="title" label="详情" />
|
||
<el-table-column prop="filePathList" label="情报追踪">
|
||
<template #default="{ row, $index }">
|
||
<span
|
||
v-if="row.filePathList.length > 0"
|
||
class="text-#5695FF underline text-10px"
|
||
@click="openUrl(row.filePathList[0].url)"
|
||
>{{ row.filePathList[0].originalFileName }}</span
|
||
>
|
||
<el-dropdown
|
||
max-height="100px"
|
||
@command="handleCommand"
|
||
v-if="row.filePathList.length > 1"
|
||
>
|
||
<span class="el-dropdown-link mt5px">
|
||
<el-icon color="#097BC2" class="el-icon--right"
|
||
><CaretBottom
|
||
/></el-icon>
|
||
</span>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item
|
||
v-for="int in row.filePathList.slice(1)"
|
||
:command="commandVal('3', int)"
|
||
>文件{{ int.originalFileName }}</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="caver">
|
||
<div class="box-title">当月品质情报</div>
|
||
<div class="flex flex-wrap justify-between">
|
||
<!-- <div>
|
||
<div class="lquan bg1">
|
||
<span class="text-24px font-extrabold">{{
|
||
dataE.partSumCount
|
||
}}</span>
|
||
<span class="mt5px">部品件数</span>
|
||
</div>
|
||
<div class="lquan bg2">
|
||
<span class="text-24px font-extrabold">{{
|
||
dataE.badSumCount
|
||
}}</span>
|
||
<span class="mt5px">不良件数</span>
|
||
</div>
|
||
</div>-->
|
||
<div class="w100% h350px pt30px">
|
||
<VChart :option="option" />
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="mt23px overflow-y-auto">
|
||
<el-table
|
||
:data="dataA"
|
||
stripe
|
||
height="400px"
|
||
style="width: 100%"
|
||
:header-cell-style="{
|
||
'text-align': 'center',
|
||
'background-color': '#417BEF',
|
||
color: '#fff',
|
||
height: '60px',
|
||
'margin-top': '20px',
|
||
'font-size': '18px',
|
||
}"
|
||
:cell-style="{ 'text-align': 'center', height: '70px' }"
|
||
>
|
||
<el-table-column prop="monthStr" label="时间" width="70px" />
|
||
<el-table-column prop="indexId" label="供应商" width="" />
|
||
<el-table-column prop="partSum" label="数量" width="" />
|
||
<el-table-column prop="title" label="不良内容" width="">
|
||
<!-- <template #default="{ row, $index }">
|
||
<span
|
||
v-if="row.filePathList.length > 0"
|
||
class="text-#5695FF underline text-10px maxWidth150"
|
||
@click="openUrl(row.filePathList[0].url)"
|
||
>{{ row.filePathList[0].originalFileName }}</span
|
||
>
|
||
<el-dropdown
|
||
max-height="100px"
|
||
@command="handleCommand"
|
||
v-if="row.filePathList.length > 1"
|
||
>
|
||
<span class="el-dropdown-link mt5px">
|
||
<el-icon color="#097BC2" class="el-icon--right"
|
||
><CaretBottom
|
||
/></el-icon>
|
||
</span>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item
|
||
v-for="int in row.filePathList.slice(1)"
|
||
:command="commandVal('3', int)"
|
||
>文件{{ int.originalFileName }}</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="cate" label="类型" width="" />
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="caver">
|
||
<div class="flex flex-wrap">
|
||
<div class="h400px relative">
|
||
<div class="box-title">品质情报</div>
|
||
<div
|
||
class="absolute right-0 top-10px w165px text-14px text-#B2B7BE"
|
||
>
|
||
{{ dataC.length > 0 ? "更新时间：" + dataC[0].createTime : "" }}
|
||
</div>
|
||
<div class="mt23px overflow-y-auto">
|
||
<el-table
|
||
:data="dataC"
|
||
stripe
|
||
height="355px"
|
||
style="width: 100%"
|
||
:header-cell-style="{
|
||
'text-align': 'center',
|
||
'background-color': '#417BEF',
|
||
color: '#fff',
|
||
height: '60px',
|
||
'margin-top': '20px',
|
||
'font-size': '18px',
|
||
}"
|
||
:cell-style="{ 'text-align': 'center', height: '70px' }"
|
||
>
|
||
<el-table-column prop="createTime" label="时间" width="110px" />
|
||
<el-table-column prop="title" label="详情" width="110px" />
|
||
<el-table-column prop="source" label="来源" width="110px" />
|
||
<el-table-column
|
||
prop="createTime"
|
||
label="情报追踪"
|
||
width="120px"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<span
|
||
v-if="row.filePathList.length > 0"
|
||
class="text-#5695FF underline text-10px maxWidth150"
|
||
@click="openUrl(row.filePathList[0].url)"
|
||
>{{ row.filePathList[0].originalFileName }}</span
|
||
>
|
||
<el-dropdown
|
||
max-height="100px"
|
||
@command="handleCommand"
|
||
v-if="row.filePathList.length > 1"
|
||
>
|
||
<span class="el-dropdown-link mt5px">
|
||
<el-icon color="#097BC2" class="el-icon--right"
|
||
><CaretBottom
|
||
/></el-icon>
|
||
</span>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item
|
||
v-for="int in row.filePathList.slice(1)"
|
||
:command="commandVal('3', int)"
|
||
>文件{{ int.originalFileName }}</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<div class="box-title mt30px">活动进展</div>
|
||
<div
|
||
class="absolute right-0 top-40px w165px text-14px text-#B2B7BE"
|
||
>
|
||
{{ dataB.length > 0 ? "更新时间：" + dataB[0].createTime : "" }}
|
||
</div>
|
||
<div class="mt23px overflow-y-auto">
|
||
<el-table
|
||
:data="dataB"
|
||
stripe
|
||
height="300px"
|
||
style="width: 100%"
|
||
:header-cell-style="{
|
||
'text-align': 'center',
|
||
'background-color': '#417BEF',
|
||
color: '#fff',
|
||
height: '60px',
|
||
'margin-top': '20px',
|
||
'font-size': '18px',
|
||
}"
|
||
:cell-style="{ 'text-align': 'center', height: '70px' }"
|
||
>
|
||
<el-table-column prop="createTime" label="时间" width="150px" />
|
||
<el-table-column prop="title" label="内容" width="150px" />
|
||
|
||
<el-table-column
|
||
prop="createTime"
|
||
label="活动追踪"
|
||
width="150px"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<span
|
||
v-if="row.filePathList.length > 0"
|
||
class="text-#5695FF underline text-10px maxWidth150"
|
||
@click="openUrl(row.filePathList[0].url)"
|
||
>{{ row.filePathList[0].originalFileName }}</span
|
||
>
|
||
<el-dropdown
|
||
max-height="100px"
|
||
@command="handleCommand"
|
||
v-if="row.filePathList.length > 1"
|
||
>
|
||
<span class="el-dropdown-link mt5px">
|
||
<el-icon color="#097BC2" class="el-icon--right"
|
||
><CaretBottom
|
||
/></el-icon>
|
||
</span>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item
|
||
v-for="int in row.filePathList.slice(1)"
|
||
:command="commandVal('3', int)"
|
||
>文件{{ int.originalFileName }}</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<n-modal :mask-closable="true" v-model:show="showModalRef2">
|
||
<div class="w90% h90% ">
|
||
<Amtion :data="src" :datas="srcType"/>
|
||
</div>
|
||
|
||
</n-modal>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.maxWidth150 {
|
||
display: inline-block;
|
||
width: 60px;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.button {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 20px;
|
||
z-index: 500;
|
||
}
|
||
|
||
/* 非斑马纹颜色 */
|
||
/deep/.el-table tr {
|
||
background: #f4f4ff;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 1px;
|
||
}
|
||
.lquan {
|
||
display: flex;
|
||
width: 168px;
|
||
height: 168px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
color: #fff;
|
||
}
|
||
.bg1 {
|
||
background: url("./images/lquan.png");
|
||
}
|
||
.bg2 {
|
||
background: url("./images/lvquan.png");
|
||
}
|
||
.box-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
position: relative;
|
||
padding-left: 24px;
|
||
|
||
&::before {
|
||
content: " ";
|
||
display: block;
|
||
width: 8px;
|
||
height: 30px;
|
||
background-color: #003ab5;
|
||
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
}
|
||
|
||
.caver {
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #fff;
|
||
border-radius: 20px;
|
||
box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
|
||
width: 32%;
|
||
margin-bottom: 15px;
|
||
height: 835px;
|
||
}
|
||
|
||
.top {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: -92px;
|
||
}
|
||
|
||
.q-wrapper {
|
||
border-radius: 18px;
|
||
// border: 1px solid #E7EBF5;
|
||
// box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
|
||
overflow: hidden;
|
||
}
|
||
</style>
|