add 预警

src/api/graph/monitor.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getMonitorByNum(num) {
+	return request({
+		method: 'get',
+		url: `/knowledge/monitor/searchByNum/${num}`
+	})
+}

src/views/index.vue

@@ -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>
-