完成无害化管理

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "cnpm": "^6.1.1",
     "core-js": "^3.3.2",
+    "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
     "moment": "^2.27.0",
     "vue": "^2.6.10",

src/api/antiepidemic.js

@@ -18,7 +18,7 @@ export const reqAdjustImmunePlan = (data) => ajax("post", "/farm-huyang/vplan/ad
 
 
 /* 免疫记录  ImmuneLog*/
-export const reqImmuneLogList = (data) => ajax("post", "/farm-huyang/pregnancy/list", data)
+export const reqImmuneLogList = (data) => ajax("post", "/farm-huyang/vrecord/list", data)
 
 
 /* 疾病登记  Illness*/

src/api/harmless.js

@@ -1,5 +1,9 @@
 import { ajax } from "../sdk/ajax";
 
 
-/* 登录 */
-export const reqLogin = (data) => ajax("post", "/core/auth/login", data)
+/* 无害化确认  Harmless*/
+export const reqHarmlessList = (data) => ajax("post", "/farm-huyang/harmless/list", data)
+
+export const reqAddHarmless = (data) => ajax("post", "/farm-huyang/harmless/add", data)
+
+export const reqCheckHarmless = (id) => ajax("post", "/farm-huyang/harmless/check", {id})

src/main.js

@@ -8,10 +8,11 @@ import store from './store'
 import vueModuleLoader from 'vue-module-loader'
 import localModule from './module'
 import './assets/css/reset.scss'
-
+import echarts from "echarts";
 import moment from 'moment'
 moment.locale('zh-cn');  // 汉化
 Vue.prototype.$moment = moment; 
+Vue.prototype.$echarts = echarts
 
 Vue.use(vueModuleLoader, { store }).use(ElementUI);
 

src/router/routes.js

@@ -1,6 +1,4 @@
 import Home from '../views/Home/Home.vue'
-/* 首页  */
-import Index from '@/views/index/Index.vue'
 /* 档案信息 */
 import firmInfo from '@/views/fileInfo/firmInfo.vue'
 import pastureInfo from '@/views/fileInfo/pastureInfo.vue'
@@ -69,11 +67,6 @@ export default [
 		path: '/home',
 		component: Home,
 		children: [
-			{
-				path: 'Index',
-				name: 'Index',
-				component: Index
-			},
 			/* 档案信息 */
 			{
 				path: 'firmInfo',

src/store/publicType.js

@@ -83,6 +83,12 @@ const drugStatus = [
     { label: "禁用", value: 0 },
     { label: "可用", value: 1 }
 ]
+
+// 无害化确认状态 (修改此处， 需要修改 [ harmless/harmlessConfirm.vue ] 下的列表操作)
+const harmlessConfirmStatus = [
+    { label: "未确认", value: 0 },
+    { label: "已确认", value: 1 }
+]
 /* workerList 员工列表  动态获取了 在home.vue中获取了 */
 /* areaList 栋舍信息  动态获取了 在home.vue中获取了 */
 /* drugBasicsList 基础药品列表   动态获取了 在home.vue中获取了 */
@@ -90,7 +96,7 @@ const drugStatus = [
 export default {
     seedSheedSource, seedSheedLevel, seedSheedStatus, seedColor, seedDensity,
     fetationStatus, estrusStatus, vaccineStyle, sheepType, cureStatus, periodOfValidityUnit
-    , drugStatus
+    , drugStatus, harmlessConfirmStatus
 }
 
 

src/views/Home/mencCofig.js

@@ -1,12 +1,5 @@
 
 export const menuData = [
-    // {
-    //     optionName: "首页",
-    //     iconClassName: "el-icon-s-home",
-    //     routerName: "Index",
-    //     index: '-1',
-    //     disabled: false
-    // },
     {
         optionName: "档案信息",
         iconClassName: "el-icon-files",

src/views/antiepidemic/immuneLog.vue

@@ -39,7 +39,7 @@
                     style="width: 100%"
                 >
                     <el-table-column prop="id" label="序号" width="80"></el-table-column>
-                    <el-table-column prop="vaccineDate" label="免疫日期"></el-table-column>
+                    <el-table-column prop="vaccineDate" label="免疫日期" width="180"></el-table-column>
                     <el-table-column prop="batch" label="批次号"></el-table-column>
                     <el-table-column prop="medicineName" label="疫苗名称"></el-table-column>
                     <el-table-column prop="medicineFactory" label="生产厂家"></el-table-column>
@@ -63,7 +63,6 @@
                         </template>
                     </el-table-column>
                     <el-table-column prop="remark" label="备注"></el-table-column>
-                    <el-table-column prop="target" label="免疫对象"></el-table-column>
                 </el-table>
 
                 <el-row type="flex" justify="end">
@@ -97,9 +96,9 @@ export default {
             tableData: [],
             totalPages: 0,
             target: this.$store.state["sheepType"][0].value,  // 按钮绑定的
-            sheepTypeArr: [this.$store.state["sheepType"][1].value],
+            sheepTypeArr: [this.$store.state["sheepType"][0].value],
             formData: {
-                vaccineStyle: this.$store.state["vaccineStyle"][1].value
+                vaccineStyle: this.$store.state["vaccineStyle"][0].value
             },
             isAdd: false,
             rules

src/views/harmless/charts/EColdStore.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="E-Cold-Store">
+        <div id="E-Cold-Store" style="height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "E-Cold-Store",
+    props: ["tagId"],
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("E-Cold-Store"));
+            // 指定图表的配置项和数据
+            let option = {
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b}: {c} ({d}%)"
+                },
+                legend: {
+                    orient: "horizontal",
+                    bottom: 10,
+                    textStyle: {
+                        fontSize: 15
+                    },
+                    itemWidth: 15,
+                    itemHeight: 15,
+                    data: [
+                        "未用容量",
+                        "已用容量"
+                    ]
+                },
+                color: [
+                    "#5DB1FF",
+                    "#FF8686"
+                ],
+                series: [
+                    {
+                        type: "pie",
+                        // 内外圈厚度
+                        radius: ["0%", "60%"],
+                        label: {
+                            formatter: "{bStyle|{b}：}{c}  ({d}%)  ",
+                            fontSize: 15,
+                            rich: {
+                                bStyle: {
+                                    fontSize: 16
+                                }
+                            }
+                        },
+                        data: [
+                            { value: 626, name: "未用容量" },
+                            { value: 1568, name: "已用容量" }
+                        ]
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.E-Cold-Store {
+    .chart {
+        width: 100%;
+    }
+}
+</style>

src/views/harmless/harmlessConfirm.vue

@@ -1,67 +1,47 @@
 <template>
     <div class="harmlessConfirm">
         <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">无害化确认</h2>
-
         <header id="header">
-            
-            <el-row type="flex">
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1区" value="11"></el-option>
-                        <el-option label="2区" value="22"></el-option>
-                    </el-select>
-                </el-col>
+            <el-row type="flex" :gutter="20">
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1舍" value="13"></el-option>
-                        <el-option label="2舍" value="24"></el-option>
-                    </el-select>
+                    <el-input v-model="search" placeholder="请输入"></el-input>
                 </el-col>
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="可用" value="15"></el-option>
-                        <el-option label="可用" value="26"></el-option>
-                    </el-select>
+                    <el-button type="primary" @click="getHarmlessList">查找</el-button>
                 </el-col>
                 <el-col :span="4">
-                    <el-button type="primary">查找</el-button>
-                </el-col>
-                <el-col :span="4">
-                    <el-button type="primary">新增</el-button>
+                    <el-button type="primary" @click="add">新增</el-button>
                 </el-col>
             </el-row>
         </header>
         <section>
             <article class="table">
                 <el-table
-                    ref="multipleTable"
                     :data="tableData"
                     tooltip-effect="dark"
                     style="width: 100%"
-                    @selection-change="handleSelectionChange"
                 >
-                    <el-table-column type="selection" width="55"></el-table-column>
-                    <el-table-column prop="a" label="屠宰批次"></el-table-column>
-                    <el-table-column prop="b" label="产品名称"></el-table-column>
-                    <el-table-column prop="c" label="排酸时间"></el-table-column>
-                    <el-table-column prop="d" label="排酸前重量"></el-table-column>
-                    <el-table-column prop="e" label="排酸后重量"></el-table-column>
-                    <el-table-column prop="f" label="排酸损耗"></el-table-column>
-                    <el-table-column prop="g" label="负责人员"></el-table-column>
-                    <!-- <el-table-column label="操作" width="150">
-                        <template slot-scope="scope">
-                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
-                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
-                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                    <el-table-column prop="id" label="序号"></el-table-column>
+                    <el-table-column prop="reportTime" label="申报时间"></el-table-column>
+                    <el-table-column prop="sheepId" label="羊只编号"></el-table-column>
+                    <el-table-column prop="number" label="数量"></el-table-column>
+                    <el-table-column prop="cause" label="原因"></el-table-column>
+                    <el-table-column prop="position" label="当前位置"></el-table-column>
+                    <el-table-column label="状态">
+                        <template v-slot="scope">
+                            <div v-for="item in $store.state['harmlessConfirmStatus']" :key="item.value">
+                                <span v-if="item.value == scope.row['status']">{{ item.label }}</span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="150">
+                        <template v-slot="scope" >
+                            <el-popconfirm title="是否确认已处理？" @onConfirm="check(scope.row)">
+                                <el-button v-if="scope.row['status'] == $store.state['harmlessConfirmStatus'][0].value" slot="reference" type="text" size="small">确认</el-button>
                             </el-popconfirm>
                         </template>
-                    </el-table-column> -->
+                    </el-table-column>
                 </el-table>
-                <div style="margin-top: 20px">
-                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
-                    <el-button @click="toggleSelection()">取消选择</el-button>
-                    <el-button @click="inStore">入待宰栏</el-button>
-                </div>
 
                 <el-row type="flex" justify="end">
                     <el-col :span="8" class="pagination">
@@ -69,97 +49,154 @@
                             @current-change="pageChange"
                             background
                             layout="prev, pager, next"
-                            :page-count="10"
+                            :page-count="Number(totalPages)"
                         ></el-pagination>
                     </el-col>
                 </el-row>
             </article>
         </section>
+
+        <el-dialog title="新增/编辑" :visible.sync="isShow" width="40%">
+            <el-row type="flex">
+                <el-col :span="20">
+                    <el-form ref="addHarmless" :model="formData" :rules="rules" label-width="140px">
+                        <el-form-item label="申报时间">
+                            <el-date-picker
+                                v-model="formData.reportTime"
+                                type="date"
+                                value-format="yyyy-MM-dd HH:mm:ss"
+                                placeholder="选择日期"
+                            ></el-date-picker>
+                        </el-form-item>
+                        <el-form-item label="羊只编号">
+                            <el-input v-model="formData.sheepId"></el-input>
+                        </el-form-item>
+                        <el-form-item label="数量">
+                            <el-input v-model.number="formData.number"></el-input>
+                        </el-form-item>
+                        <el-form-item label="原因">
+                            <el-input type="textarea" autosize v-model="formData.cause"></el-input>
+                        </el-form-item>
+                        <el-form-item label="当前位置">
+                            <el-input v-model="formData.position"></el-input>
+                        </el-form-item>
+                        <el-form-item label="状态">
+                            <el-radio-group v-model="formData.status">
+                                <el-radio
+                                    v-for="item in $store.state['harmlessConfirmStatus']"
+                                    :key="item.value"
+                                    :label="item.value"
+                                >{{ item.label }}</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="isShow=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('addHarmless')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import {
+    reqHarmlessList,
+    reqAddHarmless,
+    reqCheckHarmless
+} from "@/api/harmless.js";
 
-const pageSize = 10
-const tableData = [
-                {
-                    a: "15463",
-                    b: "胴体",
-                    c: "2020-07-14",
-                    d: "49kg",
-                    e: "48kg",
-                    f: "1.6%",
-                    g: "张小刚",
-                },
-                {
-                    a: "15463",
-                    b: "带骨羊前腿",
-                    c: "2020-07-14",
-                    d: "49kg",
-                    e: "48kg",
-                    f: "1.6%",
-                    g: "张小刚",
-                },
-                {
-                    a: "15463",
-                    b: "羔羊肉卷",
-                    c: "2020-07-14",
-                    d: "49kg",
-                    e: "48kg",
-                    f: "1.6%",
-                    g: "张小刚",
-                },
-                {
-                    a: "15463",
-                    b: "胴体",
-                    c: "2020-07-14",
-                    d: "49kg",
-                    e: "48kg",
-                    f: "1.6%",
-                    g: "张小刚",
-                },
-                {
-                    a: "15463",
-                    b: "羔羊肉卷",
-                    c: "2020-07-14",
-                    d: "49kg",
-                    e: "48kg",
-                    f: "1.6%",
-                    g: "张小刚",
-                },
-                
-                
-            ]
+const pageSize = 10;
+const rules = {};
 
 export default {
+    name: "harmlessConfirm",
     data() {
         return {
-            value: "",
-            multipleSelection: [],
-            page: 1,
-            tableData
+            search: "",
+            pageNum: 1,
+            tableData: [],
+            totalPages: 0,
+            isShow: false,
+            formData: {
+                reportTime: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
+                sheepId: "12,192,33",
+                number: 3,
+                cause: "运损",
+                position: "无害化冷库",
+                status: this.$store.state['harmlessConfirmStatus'][0].value
+            },
+            isAdd: false,
+            rules
         };
     },
-    created() {},
+    created() {
+        // 无害化确认列表
+        this.getHarmlessList();
+    },
     methods: {
-        toggleSelection(rows) {
-            if (rows) {
-                rows.forEach(row => {
-                    this.$refs.multipleTable.toggleRowSelection(row);
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    reqAddHarmless(this.formData)
+                        .then(res => {
+                            // 无害化确认列表
+                            this.getHarmlessList();
+                            this.$message.success("成功！");
+                            // this.isShow = false
+                        })
+                        .catch(err => {
+                            console.log(err);
+                            this.$message.error("失败！");
+                        });
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 无害化确认列表
+        getHarmlessList() {
+            reqHarmlessList({
+                searchStr: this.search,
+                pageSize,
+                pageNum: this.pageNum
+            })
+                .then(res => {
+                    this.tableData = res.content;
+                    this.totalPages = res.totalPages;
+                })
+                .catch(err => {
+                    console.log(err);
                 });
-            } else {
-                this.$refs.multipleTable.clearSelection();
-            }
         },
-        // 入待宰栏
-        inStore() {},
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
+        add() {
+            this.isShow = true;
+            // 有id是update 没id是add
+            delete this.formData.id;
+        },
+        check(row) {
+            reqCheckHarmless(row.id)
+                .then(res => {
+                    // 无害化确认列表
+                    this.getHarmlessList();
+                    if (res.code == "success") {
+                        this.$message.success(res.msg);
+                    }
+                    if (res.errCode == "delete failed") {
+                        this.$message.error(res.errMsg);
+                    }
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.$message.error("删除失败！");
+                });
         },
-        edit(row) {},
-        del(row) {},
         pageChange(p) {
             console.log(p);
+            this.pageNum = p;
+            // 无害化确认列表
+            this.getHarmlessList();
         }
     }
 };

src/views/harmless/intelligentHint.vue

@@ -1,30 +1,173 @@
 <template>
     <div class="intelligentHint">
-        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">智能提醒</h2>
-
-        <header id="header">
-            
-           
+        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">无害化确认</h2>
+        <header class="header">
+            <div class="left">
+                <E-Cold-Store class="chart_a"></E-Cold-Store>
+            </div>
+            <div class="right">
+                <div class="cell" v-for="item in tableData" :key="item.id">
+                    <h3 class="h3">
+                        <span class="title">无害化处理编号:</span>
+                        <span class="content">{{ item.id }}</span>
+                    </h3>
+                    <el-steps :active="C_a(item.status)">
+                        <el-step title="无害化申请"></el-step>
+                        <el-step title="无害化确认"></el-step>
+                        <el-step title="无害化处理"></el-step>
+                        <el-step title="生产无害化处理单"></el-step>
+                    </el-steps>
+                </div>
+                
+                
+            </div>
         </header>
+        <footer class="footer">
+            <el-carousel
+                height="150px"
+                :interval="5000"
+                direction="vertical"
+                indicator-position="none"
+            >
+                <el-carousel-item v-for="item in tableData" :key="item.id">
+                    <div :class="['item', 'item_'+ item.id%3]">
+                        <div class="left el-icon-mobile-phone"></div>
+                        <div class="right">
+                            <p class="top">帮助提示</p>
+                            <p class="middle">{{`无害化处理 ${item.id} ${item.status==0?'未确认,请及时确认':'已确认'}`}}</p>
+                            <span class="bottom">查看详情</span>
+                        </div>
+                    </div>
+                </el-carousel-item>
+            </el-carousel>
+        </footer>
     </div>
 </template>
 
 <script>
+import EColdStore from "./charts/EColdStore";
+import {
+    reqHarmlessList,
+} from "@/api/harmless.js";
 
+const pageSize = 3
 
 export default {
+    name: "intelligentHint",
+    components: {
+        "E-Cold-Store": EColdStore
+    },
     data() {
         return {
-           
+            tableData: []
         };
     },
-    created() {},
+    created() {
+        this.getHarmlessList()
+    },
     methods: {
-        
+        // 无害化确认列表
+        getHarmlessList() {
+            reqHarmlessList({
+                searchStr: '',
+                pageSize,
+                pageNum: 1
+            })
+                .then(res => {
+                    this.tableData = res.content;
+                    this.totalPages = res.totalPages;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 计算步骤条的active （因为现在只有两个状态，要显示四个状态）
+        C_a(v) {
+            return v == 0 ? 1 : 4
+        }
     }
 };
 </script>
 
 <style lang="scss" scoped>
+.intelligentHint {
+    .header {
+        display: flex;
+        padding-right: 11%;
+        .left {
+            width: 50%;
+            height: 400px;
+        }
+        .right {
+            width: 50%;
+            height: 400px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            .cell{
+                    .h3{
+                        margin: 35px 0 10px 0;
+                        .title{
+                            font-size: 18px;
+                            margin-right: 10px;
+                            color: #383838;
+                        }
+                        .content{
+                            color: #555;
+                            font-size: 20px;
+                        }
+                    }
+                }
+        }
+    }
+    .footer {
+        margin-top: 120px;
+        .item {
+            height: 100%;
+            display: flex;
+            box-sizing: border-box;
+            border-radius: 10px;
+            align-items: center;
 
-</style>
+            .left {
+                font-size: 30px;
+                margin-left: 20px;
+                margin-right: 20px;
+            }
+            .right {
+                .top {
+                    font-size: 20px;
+                    font-weight: 600;
+                    color: #746363;
+                }
+                .middle {
+                    font-size: 16px;
+                    color: #999;
+                }
+                .bottom {
+                    font-size: 16px;
+                    color: rgb(48, 115, 240);
+                }
+            }
+        }
+        .item_0 {
+            background-color: #ebf5ff;
+            .left {
+                color: #0079fe;
+            }
+        }
+        .item_1 {
+            background-color: #e6faf0;
+            .left {
+                color: #4bd863;
+            }
+        }
+        .item_2 {
+            background-color: #ffeee6;
+            .left {
+                color: #ff3b30;
+            }
+        }
+    }
+}
+</style>

src/views/index/Index.vue

@@ -1,205 +0,0 @@
-<template>
-    <div class="Index">
-        <header class="header">
-            <div class="left">
-                <!-- <chart-a class="chart_a"></chart-a> -->
-            </div>
-            <div class="right">
-                <!-- <chart-b></chart-b> -->
-            </div>
-        </header>
-        <section class="section">
-            <ul class="ul">
-                <li class="li">
-                    <span class="title">总产仔数</span>
-                    <span class="content">2141</span>
-                </li>
-                <li class="li">
-                    <span class="title">总活仔数</span>
-                    <span class="content">2035</span>
-                </li>
-                <li class="li">
-                    <span class="title">均产仔数</span>
-                    <span class="content">9</span>
-                </li>
-                <li class="li">
-                    <span class="title">均断奶活仔数</span>
-                    <span class="content">21</span>
-                </li>
-                <li class="li">
-                    <span class="title">均断奶天数</span>
-                    <span class="content">14</span>
-                </li>
-                <li class="li">
-                    <span class="title">均断奶活存活率</span>
-                    <span class="content">99%</span>
-                </li>
-            </ul>
-        </section>
-        <footer class="footer">
-            <el-carousel height="150px" :interval="5000" direction="vertical" indicator-position="none">
-                <el-carousel-item>
-                    <div class="item item_1">
-                        <div class="left el-icon-mobile-phone"></div>
-                        <div class="right">
-                            <p class="top">消息警报</p>
-                            <p class="middle">1耳标457865号母猪产仔存活率低于70%</p>
-                            <span class="bottom">查看详情</span>
-                        </div>
-                    </div>
-                </el-carousel-item>
-                <el-carousel-item>
-                    <div class="item item_2">
-                        <div class="left el-icon-mobile-phone"></div>
-                        <div class="right">
-                            <p class="top">消息警报</p>
-                            <p class="middle">2耳标457865号母猪产仔存活率低于70%</p>
-                            <span class="bottom">查看详情</span>
-                        </div>
-                    </div>
-                </el-carousel-item>
-                <el-carousel-item>
-                    <div class="item item_3">
-                        <div class="left el-icon-mobile-phone"></div>
-                        <div class="right">
-                            <p class="top">消息警报</p>
-                            <p class="middle">3耳标457865号母猪产仔存活率低于70%</p>
-                            <span class="bottom">查看详情</span>
-                        </div>
-                    </div>
-                </el-carousel-item>
-            </el-carousel>
-        </footer>
-    </div>
-</template>
-
-<script>
-import { mapActions } from "vuex";
-// import chart_a from "./charts/chart_a";
-// import chart_b from "./charts/chart_b";
-
-export default {
-    name: "Index",
-    components: {
-        // "chart-a": chart_a,
-        // "chart-b": chart_b
-    },
-    data() {
-        return {};
-    },
-    created() {},
-    methods: {
-        ...mapActions(["fetch"]),
-        get() {
-            this.fetch({
-                api: "aaa",
-                method: "GET",
-                data: {},
-                success: res => {
-                    console.log(res);
-                },
-                fail: err => {
-                    console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.Index {
-    .header {
-        display: flex;
-        padding-right: 11%;
-        .left {
-            width: 50%;
-            height: 400px;
-        }
-        .right {
-            width: 50%;
-            height: 400px;
-        }
-    }
-    .section {
-        margin: 60px 0;
-        .ul {
-            display: flex;
-            justify-content: space-around;
-            padding: 0 8%;
-            .li {
-                height: 80px;
-                width: 170px;
-                background-color: #ddd;
-                border-radius: 10px;
-                padding: 10px 0;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-around;
-                align-items: center;
-
-                .title {
-                    font-size: 22px;
-                    font-weight: 600;
-                    color: #444;
-                }
-                .content {
-                    font-size: 22px;
-                    font-weight: 600;
-                    color: rgb(48, 115, 240);
-                }
-            }
-        }
-    }
-    .footer {
-        .item{
-            height: 100%;
-            display: flex;
-            box-sizing: border-box;
-            border-radius: 10px;
-            align-items: center;
-            
-            .left{
-                font-size: 30px;
-                margin-left: 20px;
-                margin-right: 20px;
-            }
-            .right{
-                .top{
-                    font-size: 20px;
-                    font-weight: 600;
-                    color: #746363;
-                }
-                .middle{
-                    font-size: 16px;
-                    color: #999;
-                }
-                .bottom{
-                    font-size: 16px;
-                    color: rgb(48, 115, 240);
-                }
-            }
-        }
-        .item_1{
-            background-color: #EBF5FF;
-            .left{
-                color: #0079FE;
-            }
-        }
-        .item_2{
-            background-color: #E6FAF0;
-            .left{
-                color: #4BD863;
-            }
-        }
-        .item_3{
-            background-color: #FFEEE6;
-            .left{
-                color: #FF3B30;
-            }
-        }
-    }
-}
-</style>

src/views/index/charts/chart_a.vue

@@ -1,123 +0,0 @@
-<template>
-    <div class="hello">
-        <div id="chart_a" style="height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "HelloWorld",
-    props: ["tagId"],
-    data() {
-        return {
-        };
-    },
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("chart_a")
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                tooltip: {
-                    trigger: "item",
-                    formatter: "{b}: {c} ({d}%)"
-                },
-                legend: {
-                    orient: "horizontal",
-                    bottom: 10,
-                    data: ["已用产床", "未用产床", "待产", "已产","断奶","空产床"]
-                },
-                series: [
-                    {
-                        type: "pie",
-                        selectedMode: "single",
-                        radius: ["0", "40%"],
-
-                        label: {
-                            position: "inner"
-                        },
-                        labelLine: {
-                            show: true
-                        },
-                        data: [
-                            { value: 800, name: "已用产床" },
-                            { value: 200, name: "未用产床" }
-                        ],
-                        itemStyle: {
-                            emphasis: {
-                                shadowBlur: 10,
-                                shadowOffsetX: 0
-                            },
-                            normal: {
-                                color: function(params) {
-                                    //自定义颜色 89,212,212
-                                    var colorList = [
-                                        "rgba(58,0,255,0.5)",
-                                        // "rgba(58,161,255,0.5)",
-
-                                        "rgba(54,203,203,0.7)"
-                                    ];
-                                    return colorList[params.dataIndex];
-                                }
-                            }
-                        }
-                    },
-                    {
-                        type: "pie",
-                        // 内外圈厚度
-                        radius: ["40%", "60%"],
-                        label: {
-                            formatter: "{d}%"
-                        },
-                        data: [
-                            { value: 300, name: "待产" },
-                            { value: 300, name: "已产" },
-                            { value: 200, name: "断奶" },
-                            { value: 200, name: "空产床" }
-                        ],
-                        itemStyle: {
-                            emphasis: {
-                                shadowBlur: 10,
-                                shadowOffsetX: 0
-                            },
-                            normal: {
-                                color: function(params) {
-                                    //自定义颜色  "rgb(255,0,0)",
-                                    // var colorList = [
-                                    //     "rgb(0,238,255)",
-                                    //     "rgb(149,162,255)",
-                                    //     "rgb(58,186,255)",
-                                    //     "rgba(54,203,203,0.7)"
-                                    // ];
-                                    var colorList = [
-                                        "rgb(241,97,1)",
-                                        "rgb(255,162,255)",
-                                        "rgb(58,186,255)",
-                                        "rgba(54,203,203,0.7)"
-                                    ];
-                                    return colorList[params.dataIndex];
-                                }
-                            }
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.hello {
-    .chart {
-        width: 100%;
-    }
-}
-</style>

src/views/index/charts/chart_b.vue

@@ -1,77 +0,0 @@
-<template>
-    <div class="chart_b">
-        <div id="chart_b" style="width: 100%;height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "chart_b",
-    props: {},
-    data() {
-        return {};
-    },
-    created() {},
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("chart_b")
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                color: ["#3398DB"],
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        // 坐标轴指示器，坐标轴触发有效
-                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-                    }
-                },
-                grid: {
-                    left: "10%",
-                    right: "10%",
-                    bottom: "3%",
-                    containLabel: true
-                },
-                yAxis: [
-                    {
-                        type: "category",
-                        data: ["断奶母猪", "已产母猪", "待产母猪", "未用产床", "已用产床", "产床总数"],
-                        axisTick: {
-                            alignWithLabel: true
-                        }
-                    }
-                ],
-                xAxis: [
-                    {
-                        type: "value"
-                    }
-                ],
-                series: [
-                    {
-                        name: "数量",
-                        type: "bar",
-                        barWidth: "60%",
-                        data: [52, 200, 334, 390, 330, 220],
-                        encode: {
-                            // Map the "amount" column to X axis.
-                            y: "amount",
-                            // Map the "product" column to Y axis
-                            x: "product"
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>