|
|
@@ -1,91 +1,521 @@
|
|
|
<template>
|
|
|
- <div class="app-container home">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :sm="24" :lg="12" style="padding-left: 20px">
|
|
|
- <h2>知识图谱系统框架</h2>
|
|
|
+ <div>
|
|
|
+ <el-form ref="form" :model="form" label-width="80px" style="margin-left: 20%;margin-top: 20px;" @submit.native.prevent>
|
|
|
+ <el-form-item label="机号">
|
|
|
+ <el-input v-model="searchNum" style=" width: 50%;" placeholder="请输入内容" @keyup.enter.native="search" @clear="search" clearable> </el-input>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <span></span>
|
|
|
+ </el-form>
|
|
|
+ <el-row style="margin: 20px;">
|
|
|
+ <el-col :span="3" v-for="(items,indexs) in numList" :key="items.id" @click.native="showDrawer(items)">
|
|
|
+ <el-card shadow="hover" @click="showDrawer(items)">
|
|
|
+ <span style="font-size: 25px;display: block;">机号</span>
|
|
|
+ <span class="span1" :style="{color: items.color1}">{{items.num}}</span>
|
|
|
+ <span>状态：<span :style="{color: items.color2}">{{items.name}}</span></span>
|
|
|
+ </el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+
|
|
|
+ <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" center>
|
|
|
+ <div>
|
|
|
+ <el-form ref="form" :model="form">
|
|
|
+ <el-form-item label="机号">
|
|
|
+ <!-- <el-input v-model="form.num" style=" width: 90%;" placeholder="请输入内容"> </el-input> -->
|
|
|
+ {{ form.number }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-row :gutter='24'>
|
|
|
+ <el-col :span='20'>
|
|
|
+ <div class="demo-image__preview">
|
|
|
+ <!-- <el-image style="width: 540px; height: 160px" :src="url">
|
|
|
+ </el-image> -->
|
|
|
+ <img src="../assets/knowledge/1.jpg" style="width: 540px; height: 160px">
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='4'>
|
|
|
+ <h2>机号：{{ form.number }}</h2>
|
|
|
+ <h2>机型：02</h2>
|
|
|
+ <h2>隶属：03</h2>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter='24' style="text-align: center;">
|
|
|
+ <el-col :span='12'>
|
|
|
+ <h2>当月故障发生数量：20</h2>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <h2>当月故障完结数量：20</h2>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div v-for="item in list" :key='item.id'>
|
|
|
+ <el-row :gutter='24'>
|
|
|
+ <el-col :span='8' style='text-align: right;' @click.native="getDra(item.id,item.name)">
|
|
|
+ <h2 @click="drawer = false">{{item.name}}</h2>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='8'>
|
|
|
+ <el-progress :text-inside="true" :stroke-width="26" :percentage="item.per" style="margin-top: 20px;"
|
|
|
+ :color='item.color'>
|
|
|
+ </el-progress>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='8' style="text-align: center;">
|
|
|
+ <el-checkbox v-model="item.checked" style="margin-top: 20px;">预警</el-checkbox>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter='24'>
|
|
|
+ <el-col :span="24" style="text-align: center;">
|
|
|
+ <h2>当月故障记录</h2>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column fixed prop="date" label="序号" width='100' align='center'>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="案例名" align='center'>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="province" label="平台" align='center'>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="结果" width="200" align='center'>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="primary" round>浏览</el-button>
|
|
|
+ <el-button type="danger" round>删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-drawer :title="name" :visible.sync="drawer" :direction="direction" :before-close="handleClose1" size='50%'>
|
|
|
+ <div>
|
|
|
+ <el-form ref="form" :model="form">
|
|
|
+ <el-form-item label="机号" style="margin-left: 15px;">
|
|
|
+ <el-input v-model="form.name2" style=" width: 90%;" placeholder="请输入内容"> </el-input>
|
|
|
+ <el-button type="primary" icon="el-icon-search"></el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-row :gutter='24'>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <div class="demo-image__preview">
|
|
|
+ <!-- <el-image style="width: 540px; height: 160px" :src="url">
|
|
|
+ </el-image> -->
|
|
|
+ <img src="../assets/knowledge/1.jpg" style="width: 540px; height: 160px">
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <h2>机号：1</h2>
|
|
|
+ <h2>机型：2</h2>
|
|
|
+ <h2>隶属：3</h2>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter='24' style="text-align: center;">
|
|
|
+ <el-col :span='12'>
|
|
|
+ <h2>当月故障发生数量：20</h2>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <h2>当月故障完结数量：20</h2>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter='24'>
|
|
|
+ <div id="chart"></div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- name: "Index",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 版本号
|
|
|
- version: "3.8.4",
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goTarget(href) {
|
|
|
- window.open(href, "_blank");
|
|
|
+ import * as echarts from "echarts";
|
|
|
+ // import { getMotitorByNum } from '@/api/graph/monitor'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ drawer: false,
|
|
|
+ name: '',
|
|
|
+ direction: 'rtl',
|
|
|
+ searchNum: '',
|
|
|
+ form: {
|
|
|
+ number: '',
|
|
|
+ name: '',
|
|
|
+ name1: '',
|
|
|
+ name2: ''
|
|
|
+ },
|
|
|
+ list: [{
|
|
|
+ id: 1,
|
|
|
+ name: '飞控系统健康状况',
|
|
|
+ per: 70,
|
|
|
+ color: '#f56c6c',
|
|
|
+ checked: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '航电系统健康状况',
|
|
|
+ per: 60,
|
|
|
+ color: '#e6a23c',
|
|
|
+ checked: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: '机械系统健康状况',
|
|
|
+ per: 50,
|
|
|
+ color: '#5cb87a',
|
|
|
+ checked: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: '火控系统健康状况',
|
|
|
+ per: 40,
|
|
|
+ color: '#1989fa',
|
|
|
+ checked: 0
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableData: [{
|
|
|
+ date: '1',
|
|
|
+ name: 'admin',
|
|
|
+ province: '专业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2',
|
|
|
+ name: 'admin',
|
|
|
+ province: '专业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '3',
|
|
|
+ name: 'admin',
|
|
|
+ province: '专业',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ mockList: [{
|
|
|
+ id: 1,
|
|
|
+ num: '01',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ num: '02',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ num: '03',
|
|
|
+ name: '故障',
|
|
|
+ color1: 'red',
|
|
|
+ color2: 'red',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ num: '04',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ num: '05',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ num: '06',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ num: '07',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ num: '08',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ num: '09',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ num: '10',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 11,
|
|
|
+ num: '11',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 12,
|
|
|
+ num: '12',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 13,
|
|
|
+ num: '13',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 14,
|
|
|
+ num: '14',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 15,
|
|
|
+ num: '15',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 16,
|
|
|
+ num: '16',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 17,
|
|
|
+ num: '17',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 18,
|
|
|
+ num: '18',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 19,
|
|
|
+ num: '19',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 20,
|
|
|
+ num: '20',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 21,
|
|
|
+ num: '21',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 22,
|
|
|
+ num: '22',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 23,
|
|
|
+ num: '23',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 24,
|
|
|
+ num: '24',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 25,
|
|
|
+ num: '25',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 26,
|
|
|
+ num: '26',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 27,
|
|
|
+ num: '27',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 28,
|
|
|
+ num: '28',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 29,
|
|
|
+ num: '29',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 30,
|
|
|
+ num: '30',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 31,
|
|
|
+ num: '31',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 32,
|
|
|
+ num: '32',
|
|
|
+ name: '健康',
|
|
|
+ color1: 'yellow',
|
|
|
+ color2: 'yellow',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ numList: []
|
|
|
+ }
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.home {
|
|
|
- blockquote {
|
|
|
- padding: 10px 20px;
|
|
|
- margin: 0 0 20px;
|
|
|
- font-size: 17.5px;
|
|
|
- border-left: 5px solid #eee;
|
|
|
- }
|
|
|
- hr {
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- border: 0;
|
|
|
- border-top: 1px solid #eee;
|
|
|
- }
|
|
|
- .col-item {
|
|
|
- margin-bottom: 20px;
|
|
|
+ created() {
|
|
|
+ this.search();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getChart()
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getChart() {
|
|
|
+ //组件一加载就渲染折线图
|
|
|
+ //初始化
|
|
|
+ let myChart = echarts.init(document.getElementById("chart"));
|
|
|
+ //创建配置项
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '系统',
|
|
|
+ left: 'center',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: ['2018', '2019', '2020',
|
|
|
+ '2021', '2022'
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ //data替换成后端的数据
|
|
|
+ {
|
|
|
+ data: [50, 300, 700, 40, 12],
|
|
|
+ type: "line",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ // 设置配置项
|
|
|
+ myChart.setOption(option)
|
|
|
+ },
|
|
|
+ getPopup(e) {
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ getDra(e, name) {
|
|
|
+ this.drawer = true
|
|
|
+ this.name = name + '介绍'
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.dialogVisible = false
|
|
|
+ },
|
|
|
+ handleClose1(done) {
|
|
|
+ this.drawer = false
|
|
|
+ },
|
|
|
+ showDrawer(item){
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.form.number = item.num
|
|
|
+ },
|
|
|
+ search(){
|
|
|
+ if(!this.searchNum){
|
|
|
+ this.numList = this.mockList
|
|
|
+ }else{
|
|
|
+ let list = [];
|
|
|
+ for(let item of this.mockList){
|
|
|
+ if(item.num == this.searchNum){
|
|
|
+ list.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.numList = list;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+</script>
|
|
|
|
|
|
- ul {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
+<style>
|
|
|
+ @font-face {
|
|
|
+ font-family: "FZZhiYi-M12S";
|
|
|
+ src: url("../assets/knowledge/ziti.ttf");
|
|
|
+ font-weight: normal;
|
|
|
+ font-style: normal;
|
|
|
}
|
|
|
|
|
|
- font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
- font-size: 13px;
|
|
|
- color: #676a6c;
|
|
|
- overflow-x: hidden;
|
|
|
-
|
|
|
- ul {
|
|
|
- list-style-type: none;
|
|
|
+ #chart {
|
|
|
+ width: 1200px;
|
|
|
+ height: 600px;
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
|
|
|
- h4 {
|
|
|
- margin-top: 0px;
|
|
|
+ .span1 {
|
|
|
+ display: block;
|
|
|
+ font-family: FZZhiYi-M12S;
|
|
|
+ font-size: 45px;
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 26px;
|
|
|
- font-weight: 100;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- b {
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
+ margin: 20px 0;
|
|
|
}
|
|
|
|
|
|
- .update-log {
|
|
|
- ol {
|
|
|
- display: block;
|
|
|
- list-style-type: decimal;
|
|
|
- margin-block-start: 1em;
|
|
|
- margin-block-end: 1em;
|
|
|
- margin-inline-start: 0;
|
|
|
- margin-inline-end: 0;
|
|
|
- padding-inline-start: 40px;
|
|
|
- }
|
|
|
+ .el-card {
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 50px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ background-image: url("../assets/knowledge/预警数量.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
|
|
-
|
allen
