添加 8项 案例信息

resources/js/router/index.js

@@ -26,6 +26,7 @@ import historyRoutes from './modules/history.js';
 import monitorRoutes from './modules/monitor.js';
 import userdeviceRoutes from './modules/userdevice';
 import alarmOrderRoutes from './modules/alarm-order';
+import meetemergency from './modules/meetemergency';
 
 /**
  * Sub-menu only appear when children.length>=1
@@ -157,6 +158,7 @@ export const asyncRoutes = [
   adminRoutes,
   userdeviceRoutes,
   alarmOrderRoutes,
+  meetemergency,
   // {
   //   path: '/userdevice',
   //   component: Layout,

resources/js/router/modules/meetemergency.js

+import Layout from '@/layout';
+
+const meetemergencyRoutes = {
+  path: '/meetemergency',
+  component: Layout,
+  redirect: '/meetemergency/index',
+  name: 'users',
+  alwaysShow: true,
+  meta: {
+    title: '应急辅助决策',
+    icon: 'nested',
+    permissions: ['view menu admin'],
+  },
+  children: [
+    {
+      path: 'index',
+      component: () => import('@/views/meetemergency/index'),
+      name: 'meetemergency',
+      meta: { title: '应急预案', icon: 'nested', permissions: ['manage admin'] },
+    },
+    {
+      path: 'ziyuan',
+      component: () => import('@/views/meetemergency/ziyuan'),
+      name: 'meetemergency1',
+      meta: { title: '专家库', icon: 'chart', permissions: ['manage admin'] },
+    }, {
+      path: 'infozhuanjia',
+      component: () => import('@/views/meetemergency/infozhuanjia'),
+      name: 'meetemergency2',
+      hidden: true,
+      meta: { title: '专家详情', icon: 'chart', permissions: ['manage admin'] },
+    }, {
+      path: 'anli',
+      component: () => import('@/views/meetemergency/anli'),
+      name: 'anli',
+      meta: { title: '案例库', icon: 'chart', permissions: ['manage admin'] },
+    }, {
+      path: 'zhishi',
+      component: () => import('@/views/meetemergency/zhishi'),
+      name: 'zhishi',
+      meta: { title: '知识库', icon: 'chart', permissions: ['manage admin'] },
+    }],
+};
+export default meetemergencyRoutes;

resources/js/views/meetemergency/anli.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-form ref="query" style="display: inline-block;">
+        <el-input placeholder="案例名称" clearable style="width: 200px;" class="filter-item" name="userskk" />
+        <el-input placeholder="案例id" clearable style="width: 200px;" class="filter-item" name="userskk" />
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search">
+          {{ $t('table.search') }}
+        </el-button>
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-plus">
+          {{ $t('table.add') }}
+        </el-button>
+      </el-form>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-download">
+        {{ $t('table.export') }}
+      </el-button>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-upload">
+        导入
+      </el-button>
+    </div>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
+      <el-table-column prop="name" label="案例名称" width="120"></el-table-column>
+      <el-table-column prop="province" label="案例类型" width="120"></el-table-column>
+      <el-table-column prop="city" label="案例是否执行" width="120"></el-table-column>
+      <el-table-column prop="address" label="案例执行地址" width="300"></el-table-column>
+      <el-table-column prop="zip" label="案例内容" width="120"></el-table-column>
+      <el-table-column fixed="right" label="操作" width="150">
+        <template slot-scope="scope">
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import waves from '@/directive/waves'; // 水波纹效果
+export default {
+  directives: { waves },
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '一级应急案例',
+        province: '一级案例',
+        city: '案例执行',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: '石家庄第三期案例',
+      }, {
+        date: '2016-05-04',
+        name: '二级应急案例',
+        province: '二级应急案例',
+        city: '案例取消',
+        address: '上海市普陀区金沙江路 1517 弄',
+        zip: '石家庄第三期案例',
+      }, {
+        date: '2016-05-01',
+        name: '三级级应急案例',
+        province: '三级级应急案例',
+        city: '案例执行',
+        address: '上海市普陀区金沙江路 1519 弄',
+        zip: '石家庄第三期案例',
+      }, {
+        date: '2016-05-03',
+        name: '四级级级应急案例',
+        province: '四级级级应急案例',
+        city: '案例取消',
+        address: '上海市普陀区金沙江路 1516 弄',
+        zip: '石家庄第三期案例',
+      }],
+    };
+  },
+  methods: {
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+    handleClick(row) {
+      console.log(row);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/views/meetemergency/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-form ref="query" style="display: inline-block;">
+        <el-input placeholder="预案名称" clearable style="width: 200px;" class="filter-item" name="userskk" />
+        <el-input placeholder="预案模板id" clearable style="width: 200px;" class="filter-item" name="userskk" />
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search">
+          {{ $t('table.search') }}
+        </el-button>
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-plus">
+          {{ $t('table.add') }}
+        </el-button>
+      </el-form>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-download">
+        {{ $t('table.export') }}
+      </el-button>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-upload">
+        导入
+      </el-button>
+    </div>
+    <div>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column label="发布日期" width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.date }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预案版本号" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.id }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预案类别" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.leibie }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="单位名称" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.infodanwei }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="使用领域" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.shiyong }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="关联事件" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.guanlian }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="事件级别" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.shjianjibei }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预案内容" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.yuaninfo }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预案名称" width="180">
+          <template slot-scope="scope">
+            <el-popover trigger="hover" placement="top">
+              <p>预案名称: {{ scope.row.name }}</p>
+              <p>预案信息: {{ scope.row.address }}</p>
+              <div slot="reference" class="name-wrapper">
+                <el-tag size="medium">{{ scope.row.name }}</el-tag>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="280px">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查询</el-button>
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import waves from '@/directive/waves'; // 水波纹效果
+export default {
+  directives: { waves },
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '一级预案',
+        address: '上海市普陀区金沙江路 1518 弄一级预案',
+        id: 1,
+        leibie: '预案1',
+        infodanwei: '石家庄哈哈哈公司',
+        shiyong: '报警使用',
+        guanlian: '石家庄xxx爆炸',
+        shjianjibei: '1级',
+        yuaninfo: '哈哈哈哈我是预案内容也不知道写点啥',
+      }, {
+        date: '2016-05-04',
+        name: '二级预案',
+        address: '上海市普陀区金沙江路 1517 弄二级预案',
+        id: 2,
+        leibie: '预案1',
+        infodanwei: '石家庄酒水公司',
+        shiyong: '消防使用',
+        guanlian: '石家庄xxx爆炸',
+        shjianjibei: '1级',
+        yuaninfo: '哈哈哈哈我是预案内容也不知道写点啥',
+      }, {
+        date: '2016-05-01',
+        name: '三级预案',
+        address: '上海市普陀区金沙江路 1519 弄三级预案',
+        id: 3,
+        leibie: '预案3',
+        infodanwei: '石家庄花露水公司',
+        shiyong: '火灾使用',
+        guanlian: '石家庄xxx爆炸',
+        shjianjibei: '3级',
+        yuaninfo: '哈哈哈哈我是预案内容也不知道写点啥',
+      }, {
+        date: '2016-05-03',
+        name: '四级预案',
+        address: '上海市普陀区金沙江路 1516 弄四级预案',
+        id: 4,
+        leibie: '预案2',
+        infodanwei: '石家庄花神公司',
+        shiyong: '报警使用',
+        guanlian: '石家庄xxx爆炸',
+        shjianjibei: '5级',
+        yuaninfo: '哈哈哈哈我是预案内容也不知道写点啥',
+      }],
+    };
+  },
+  methods: {
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/views/meetemergency/infozhuanjia.vue

+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="datainfo" label-width="80px">
+      <el-form-item label="专家名称">
+        <el-input v-model="datainfo.name" :disabled="true" style="width:30%"></el-input>
+      </el-form-item>
+      <el-form-item label="专家详情">
+        <el-input v-model="datainfo.info" :disabled="true" style="width:60%"></el-input>
+      </el-form-item>
+      <el-form-item label="专家图片">
+        <el-image style="width: 100px; height: 100px" :src="datainfo.img" fit="contain"></el-image>
+      </el-form-item>
+      <el-form-item label="专家评分">
+        <el-rate v-model="value" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
+      </el-form-item>
+      <el-form-item label="专家年龄">
+        <el-input v-model="datainfo.id" :disabled="true" style="width:30%"></el-input>
+      </el-form-item>
+      <el-form-item label="联系电话">
+        <el-input v-model="value2" :disabled="true" style="width:30%"></el-input>
+      </el-form-item>
+      <el-form-item label="通讯地址">
+        <el-input v-model="value3" :disabled="true" style="width:30%"></el-input>
+      </el-form-item>
+      <el-form-item label="电子邮箱">
+        <el-input v-model="value4" :disabled="true" style="width:30%"></el-input>
+      </el-form-item>
+    </el-form>
+    <el-timeline>
+      <el-timeline-item timestamp="2018/4/12" placement="top">
+        <el-card>
+          <h4>工作经历</h4>
+          <p>{{ datainfo.name }}在北京xxx公司工作一年</p>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item timestamp="2018/4/3" placement="top">
+        <el-card>
+          <h4>学习经历</h4>
+          <p>{{ datainfo.name }}在北京清华大学学习</p>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item timestamp="2018/10/2" placement="top">
+        <el-card>
+          <h4>学术成果</h4>
+          <p>{{ datainfo.name }}在石家庄建家园工作</p>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item timestamp="2018/12/2" placement="top">
+        <el-card>
+          <h4>工作业绩</h4>
+          <p>{{ datainfo.name }}在石家庄建家园工作获得一等金</p>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item timestamp="2019/12/2" placement="top">
+        <el-card>
+          <h4>奖金</h4>
+          <p>{{ datainfo.name }}在技术上有突破获得奖金</p>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      datainfo: '',
+      value: '3.7',
+      value2: '1561293822',
+      value3: '石家庄合肥市南宫县',
+      value4: '1662663232@163.com',
+    };
+  },
+  mounted() {
+    this.datainfo = this.$route.query;
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/views/meetemergency/zhishi.vue

+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="标题">
+        <el-input v-model="form.name" style="width: 50%"></el-input>
+      </el-form-item>
+      <el-form-item label="详情">
+        <el-input v-model="form.name" style="width: 50%"></el-input>
+      </el-form-item>
+      <el-upload class="upload-demo" style="width: 50%; margin-left: 350px;" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过500kb</div>
+      </el-upload>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">立即创建</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import waves from '@/directive/waves'; // 水波纹效果
+export default {
+  directives: { waves },
+  data() {
+    return {
+      form: {
+        name: '',
+      },
+    };
+  },
+  methods: {
+    onSubmit(index, row) {
+      console.log('submit!');
+    },
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/views/meetemergency/ziyuan.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-form ref="query" style="display: inline-block;">
+        <el-input placeholder="专家名称" clearable style="width: 200px;" class="filter-item" name="userskk" />
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search">
+          {{ $t('table.search') }}
+        </el-button>
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-plus">
+          {{ $t('table.add') }}
+        </el-button>
+      </el-form>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-download">
+        {{ $t('table.export') }}
+      </el-button>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-upload">
+        导入
+      </el-button>
+    </div>
+    <div>
+      <el-row>
+        <el-col v-for="(o, index) in tableData" :key="index + 1" :span="5" :offset="index > 0 ? 2 : 0">
+          <el-card :body-style="{ padding: '0px' }">
+            <img :src="o.img" class="image">
+            <div style="padding: 14px;">
+              <span>{{ o.name }}</span>
+              <div class="bottom clearfix">
+                <time class="time">{{ o.info }}</time>
+                <el-button type="text" class="button" @click="addDevice(o.id, o.name, o.info, o.img)">查看详情</el-button>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import waves from '@/directive/waves'; // 水波纹效果
+export default {
+  directives: { waves },
+  data() {
+    return {
+      currentDate: new Date(),
+      tableData: [{
+        name: '李庄家',
+        info: '李庄家毕业于石家庄工程学院有先进的工作计划和工作经验对报警器这方面有一定的了解',
+        img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1689867663,2720378664&fm=26&gp=0.jpg',
+        id: 1,
+      }, {
+        name: '刘专家',
+        info: '刘专家毕业于北京电影有先进的工作计划和工作经验对报警器这,对设备对接有足够的经验',
+        img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3295650107,2085001310&fm=26&gp=0.jpg',
+        id: 2,
+      }, {
+        name: '赵专家',
+        info: '赵专家毕业于北京大学有足够的it方面的经验,对物联网,互联网有一定的经验',
+        img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608445510168&di=1a33e116c5169fd5010f866d12f77ada&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn12%2F435%2Fw640h595%2F20180506%2F6105-hacuuvt9423634.jpg',
+        id: 3,
+      }, {
+        name: '菅专家',
+        info: '菅专家毕业于杭州科技学院有足够的it方面的经验,对物联网,互联网有一定的经验,对报警设备对设备线路有经验',
+        img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=205530922,171182159&fm=26&gp=0.jpg',
+        id: 4,
+      }, {
+        name: '冯专家',
+        info: '冯专家毕业于杭州科技学院有足够的it方面的经验,对物联网,互联网有一定的经验,对报警设备对设备线路有经验',
+        img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3329910816,3196132831&fm=26&gp=0.jpg',
+        id: 5,
+      }, {
+        name: '好专家',
+        info: '好专家毕业于杭州科技学院有足够的it方面的经验,对物联网,互联网有一定的经验,对报警设备对设备线路有经验',
+        img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2409559085,2443372796&fm=26&gp=0.jpg',
+        id: 6,
+      }],
+    };
+  },
+  methods: {
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+    // 专家详情 o.id, o.name, o.info, o.img
+    addDevice(id, name, info, img) {
+      console.log(id);
+      this.$router.push({ path: '/meetemergency/infozhuanjia',
+        query: { id: id, name: name, info: info, img: img },
+      });
+    },
+  },
+};
+</script>
+
+<style>
+  .time {
+      font-size: 13px;
+      color: #999;
+    }
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+  .button {
+    padding: 0;
+    float: right;
+  }
+  .image {
+    width: 100%;
+    display: block;
+  }
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+  .clearfix:after {
+      clear: both
+  }
+</style>