<template>
  <div class="container-box">
    <!--    <div class="btn-box"></div>-->
    <div class="tool-box">
      <el-button size="small" type="primary" style="margin-bottom: 15px" @click="gotoInfoExtract">图谱管理</el-button>
      <el-image
          class="img-item"
          :src="coverImg"
          :preview-src-list="srcList">
      </el-image>
    </div>
    <el-row :gutter="30">
      <el-col :span="12">
        <div class="block series-box">
          <div class="block-label">实体数量</div>
          <div class="count-box">{{ count.nodeCount }}个</div>
          <!--          <div class="btn-box">管 理</div>-->
        </div>
      </el-col>
      <el-col :span="12">
        <div class="block commodity-box">
          <div class="block-label">三元组数量</div>
          <div class="count-box">{{ count.relationCount }}个</div>
          <!--          <div class="btn-box">管 理</div>-->
        </div>
      </el-col>
    </el-row>
    <div>
      <el-button size="small" type="primary" @click="clearAll" style="float: left;margin-right: 15px">清空数据
      </el-button>
      <el-upload
          class="upload-demo"
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
          :limit="10"
          accept=".xls,.xlsx"
          :file-list="fileList">
        <el-button size="small" type="primary">导 入</el-button>
        <label slot="tip" class="el-upload__tip" style="margin-left: 25px">只能上传.xls/.xlsx文件</label>
      </el-upload>
    </div>
    <el-row :gutter="20" style="margin-top: 15px">
      <el-col :span="12">
        <div class="graph-box">
          <graph ref="graph"></graph>
        </div>
      </el-col>
      <el-col :span="12">
        <el-table :data="list" border style="width: 100%" height="500">
          <el-table-column prop="name" label="概念名称" width="130"></el-table-column>
          <el-table-column prop="properties" label="属性">
            <template slot-scope="scope">
              <el-tag v-for="tag in scope.row.properties" :key="tag" style="margin-right: 5px;margin-bottom: 5px">{{
                  tag
                }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import request from '@/utils/request614';
import graph from "@/components/graph/Graph614";
import coverImg from "@/assets/image/icon/tupian.png";
import aImg from "@/assets/image/614/1a.jpg";
import bImg from "@/assets/image/614/1b.jpg";

var _this;
export default {
  components: {
    'graph': graph,
  },
  name: "indexPage",
  data() {
    return {
      count: {
        nodeCount: 0,
        relationCount: 0
      },
      fileList: [],
      list: [
        {
          name: '军种',
          properties: ['编号', '名称']
        }, {
          name: '数控系统',
          properties: ['编号', '名称', '型号', '最新交付日期', '发动机', '状态', '工作总寿命', '总工作时间', '工作时间翻修期'
            , '翻修期累积时间', '日历翻修期', '下次翻修日期']
        }, {
          name: '发动机',
          properties: ['编号', '名称', '安装时间', '安装位置', '总工作时间', '总空中工作时间', '型号']
        }, {
          name: '故障信息',
          properties: ['编号', '名称', '故障件编号', '故障件型号', '故障件名称', '环境特点', '故障原因', '故障工作时间',
            '发生时间', '发现时机', '故障场所', '处理时间', '处理方式', '故障处理措施', '是否归零', '是否重复故障',
            '是否责任故障', '是否已处理', '故障现象', '排故进度']
        }, {
          name: '故障案例',
          properties: ['编号', '名称', '关键词', '排故进程', '故障分析', '故障总结', '经验教训']
        }, {
          name: '原飞机',
          properties: ['编号', '名称']
        }, {
          name: '部件',
          properties: ['编号', '名称', '型号', '编号码', '日期']
        }, {
          name: '地点',
          properties: ['编号', '名称']
        }, {
          name: '飞机',
          properties: ['编号', '名称']
        },
      ],
      coverImg: coverImg,
      srcList: [
        aImg,
        bImg
      ]
    }
  },
  mounted() {
    _this = this;
    _this.queryCount();

    _this.$refs['graph'].initGraph({
      nodes: [
        {
          id: "1",
          label: '军种',
          _label: 'armyType'
        }, {
          id: "2",
          label: '数控系统',
          _label: 'control'
        }, {
          id: "3",
          label: '发动机',
          _label: 'engine'
        }, {
          id: "4",
          label: '故障信息',
          _label: 'fault'
        }, {
          id: "5",
          label: '故障案例',
          _label: 'faultCase'
        }, {
          id: "6",
          label: '原飞机',
          _label: 'oriPlane'
        }, {
          id: "7",
          label: '部件',
          _label: 'part'
        }, {
          id: "8",
          label: '发生地',
          _label: 'place'
        }, {
          id: "9",
          label: '飞机',
          _label: 'plane'
        }
      ],
      edges: [
        {
          source: '3',
          target: '8',
          label: '所在地'
        }, {
          source: '3',
          target: '6',
          label: '原装配'
        }, {
          source: '3',
          target: '9',
          label: '现装配'
        }, {
          source: '3',
          target: '1',
          label: '隶属'
        }, {
          source: '3',
          target: '2',
          label: '数控于'
        }, {
          source: '4',
          target: '9',
          label: '故障飞机'
        }, {
          source: '4',
          target: '3',
          label: '故障发动机'
        }, {
          source: '4',
          target: '8',
          label: '故障发生地'
        }, {
          source: '4',
          target: '2',
          label: '故障控制系统'
        }, {
          source: '2',
          target: '7',
          label: '配套部件'
        }, {
          source: '2',
          target: '8',
          label: '所在地'
        }, {
          source: '5',
          target: '9',
          label: '故障案例飞机'
        }
      ]
    }, true, null, true);
  },
  methods: {
    gotoInfoExtract() {
      this.$router.push("/614/infoExtract");
    },
    queryCount() {
      request({
        url: '/neo4j/get_count',
        method: 'post',
        data: {}
      }).then(res => {
        _this.count.nodeCount = res.data.nodeCount;
        _this.count.relationCount = res.data.relationCount;
      });
    },
    handleFileChange(file) {
      _this.fileList = [file];
      let formData = new FormData();
      formData.append("file", file.raw);
      request({
        url: '/neo4j/read_excel',
        method: 'put',
        data: formData
      }).then(res => {
        _this.$message.success("导入成功");
      });
    },
    clearAll() {
      _this.$confirm('此操作将永久清空数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: '/neo4j/clear_all',
          method: 'post',
        }).then(res => {
          _this.$message.success("清空成功");
        });
      });
    }
  }
}
</script>

<style scoped lang="scss">
.tool-box {
  overflow: hidden;

  .img-item {
    float: right;
    width: 95px;
    height: 25px;
    cursor: pointer;
  }
}

.graph-box {
  border: 1px solid #dcdddf;
  width: 100%;
  height: 500px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

div {
  box-sizing: border-box;
}

.box-card .el-card__body {
  padding: 0;
}

.btn-box {
  width: 130px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #4da8fc;
  font-size: 21px;
  font-weight: bold;

  cursor: pointer;
}

.container-box {
  padding: 30px;


  .block {
    border: 1px solid rgb(231, 231, 231);
    padding: 25px 30px;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 15px;


  }

  .series-box, .commodity-box {
    color: #fff;


    .block-label {
      font-size: 25px;
      float: left;
      line-height: 50px;
      height: 50px;
    }

    .count-box {
      font-size: 35px;
      float: right;
      line-height: 50px;
      height: 50px;
    }

    .btn-box:hover {
      transform: scale(1.04);
    }
  }

  .series-box {
    background-color: rgb(108, 180, 246);

    .btn-box {
      color: rgb(108, 180, 246);
    }

  }

  .commodity-box {
    background-color: rgb(251, 174, 94);

    .btn-box {
      color: rgb(251, 174, 94);
    }
  }
}
</style>
