在线活跃度联调

shanXiPlatform/src/api/branchoff/index.js

@@ -56,3 +56,19 @@ export function  getjfqk( depotId , homeType) {
     method: 'get'
   })
 }
+
+export function  getmorehyd( data  ) {
+  return request({              
+    url: `/csc-szls-business/sysUserActivity/getByPage`,
+    method: 'post',
+    data : data
+  })
+}
+export function  gethyd( depotId , homeType) {
+  return request({
+    url: `/csc-szls-business/sysUserActivity/getGroupByDepotId?depotId=${depotId}&homeType=${homeType} `,
+    method: 'get'
+  })
+}
+
+

shanXiPlatform/src/router/index.js

@@ -361,6 +361,20 @@ export const constantRoutes = [
         hidden: true,
         meta: { title: '工作完成情况', icon: 'dashboard',isshowLibrary:true, affix: true },
       },
+      {
+        path: 'hydtable',
+        component: () => import('@/views/home/hydtable'),
+        name: 'hydtable',
+        hidden: true,
+        meta: { title: '在线活跃度详情', icon: 'dashboard',isshowLibrary:true, affix: true },
+      },
+      {
+        path: 'hydmoretable',
+        component: () => import('@/views/home/hydmoretable'),
+        name: 'hydmoretable',
+        hidden: true,
+        meta: { title: '在线活跃度', icon: 'dashboard',isshowLibrary:true, affix: true },
+      },
     ]
 
   },
@@ -707,7 +721,7 @@ export const constantRoutes = [
             name: 'AllGrain',
 
             hidden: true,
-            meta: { title: '最新粮情检查记录', icon: 'dashboard', affix: false, relation: 'house', istable: true },
+            meta: { title: '全部粮情检查记录', icon: 'dashboard', affix: false, relation: 'house', istable: true },
           },
 
 

shanXiPlatform/src/views/home/branchOffice.vue

@@ -229,7 +229,7 @@
                                 <p class="lsp">
                                     <img src="../../assets/images/rightarrow.png" alt />
                                     上月在线活跃度排名
-                                    <span v-if="crumbs.length != 2" class="echartSpan" @click="yclq()">更多>></span>
+                                    <span v-if="crumbs.length != 2" class="echartSpan" @click="hyd()">更多>></span>
                                 </p>
                                 <div id="myChartrt" class="rtoprto"></div>
                                 <!-- <img src="../../assets/images/huoyue.png" alt /> -->
@@ -270,7 +270,9 @@ import {
     getpointll,
     getzxt,
     getmorejfqk,
-    getjfqk
+    getjfqk,
+    // ,
+    gethyd
 } from "@/api/branchoff/index.js"
 import { getUser } from "@/utils/auth"
 export default {
@@ -996,171 +998,208 @@ export default {
             this.$router.push({ path: "/countQuality/warehouseInformation" })
         },
         drawtrt() {
-            var chartData = [6, 7, 8, 9, 10, 10, 9, 8, 7, 6] // 数据
-            var chartDataone = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10] // 数据
-            var chartName = [
-                "中央储备大同直属库有限公司",
-                "中央储备太原直属库有限公司",
-                "中央储备太原直属库有限公司",
-                "中央储备太原直属库有限公司",
-                "中央储备太原直属库有限公司",
-                "中央储备太原直属库有限公司",
-                "中央储备太原直属库有限公司",
-                "中央储备太原直属库有限公司",
-                "中央储备太原直属库有限公司",
-                "中央储备长治直属库有限公司"
-            ]
-            const myChartrt = this.$echarts.init(
-                document.getElementById("myChartrt")
-            )
-            // 绘制图表
-            myChartrt.setOption({
-                grid: {
-                    top: "3%",
-                    left: "3%",
-                    bottom: "3%",
-                    right: "3%",
-                    containLabel: true
-                },
-                xAxis: {
-                    type: "value",
-                    axisLine: {
-                        lineStyle: {
-                            color: "#ccc"
-                        }
+            gethyd(this.midprovinceid, this.homeType).then(res => {
+                var chartDataone = [
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100,
+                    100
+                ] // 数据
+                var chartName = res.data.depotName
+                var chartData = res.data.series
+                const myChartrt = this.$echarts.init(
+                    document.getElementById("myChartrt")
+                )
+                // 绘制图表
+                myChartrt.setOption({
+                    grid: {
+                        top: "3%",
+                        left: "3%",
+                        bottom: "3%",
+                        right: "3%",
+                        containLabel: true
                     },
-                    show: false,
-                    splitLine: {
-                        show: false
-                    }
-                },
-                yAxis: [
-                    {
-                        type: "category",
-                        data: chartName,
-                        splitLine: {
-                            show: false
-                        },
-                        show: false,
+                    xAxis: {
+                        type: "value",
                         axisLine: {
                             lineStyle: {
                                 color: "#ccc"
                             }
-                        }
-                    },
-                    {
-                        // 第二个y轴 为了让数据在右侧末尾显示
-                        show: true,
-                        inverse: true,
-                        data: chartData,
-                        nameTextStyle: {}, // 坐标轴名称的文字样式。 官网上是这样的解释, 但是 我试了这个并不能改变坐标轴的文字样式
-                        axisLabel: {
-                            textStyle: {
-                                fontSize: 12, // 坐标轴名称的大小
-                                color: "#333", // 坐标轴名称的颜色
-                                fontWeight: 700
-                            }
-                        },
-                        axisLine: {
-                            show: false,
-                            lineStyle: {
-                                color: "#8CC4A1"
-                            }
                         },
+                        show: false,
                         splitLine: {
-                            show: true
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        data: chartData
-                    }
-                ],
-                series: [
-                    {
-                        name: "我是打底",
-                        type: "pictorialBar",
-                        symbol: "rect", // 类型
-                        yAxisIndex: 0,
-                        barWidth: 10,
-                        itemStyle: {
-                            normal: {
-                                // barBorderRadius: 5,
-                                color: "#ccc"
-                            }
-                        },
-                        label: {
-                            normal: {
-                                position: "right"
-                            }
-                        },
-                        symbolRepeat: true,
-                        // symbolRotate: '45',
-                        symbolSize: [10, 16],
-                        // symbolMargin: 2,
-                        data: chartDataone
-                    },
-                    {
-                        name: "我是上层方块",
-                        type: "pictorialBar",
-                        symbol: "rect",
-                        itemStyle: {
-                            normal: {
-                                color: "green"
-                            }
-                        },
-                        label: {
-                            normal: {
-                                // show: true, // 数据大小的显示, 100 200 300
-                                textStyle: {
-                                    color: "#000000" // 颜色
-                                },
-                                position: "right"
-                            }
-                        },
-                        barWidth: 10,
-                        symbolRepeat: true,
-                        // symbolRotate: '45',
-                        symbolSize: [10, 16],
-                        // symbolMargin: 2,
-                        data: chartData
+                            show: false
+                        }
                     },
-                    // 数据条--------------------我是分割线君------------------------------//
-                    {
-                        show: true,
-                        type: "bar",
-                        // xAxisIndex: 1, //代表使用第二个X轴刻度
-                        barGap: "-150%",
-                        barWidth: "25%",
-                        itemStyle: {
-                            normal: {
-                                barBorderRadius: 50,
-                                // color: 'yellow',
-                                color: "transparent" // rgba(22,203,115,0.05) 数据条柱状图的填充颜色,, 一开始我的有一点点背景颜色
+                    yAxis: [
+                        {
+                            type: "category",
+                            data: chartName,
+                            splitLine: {
+                                show: false
+                            },
+                            show: false,
+                            axisLine: {
+                                lineStyle: {
+                                    color: "#ccc"
+                                }
                             }
                         },
-                        label: {
-                            normal: {
-                                show: true,
-                                position: [-160, 0],
+                        {
+                            // 第二个y轴 为了让数据在右侧末尾显示
+                            show: true,
+                            inverse: true,
+                            data: chartData,
+                            nameTextStyle: {}, // 坐标轴名称的文字样式。 官网上是这样的解释, 但是 我试了这个并不能改变坐标轴的文字样式
+                            axisLabel: {
                                 textStyle: {
-                                    fontSize: 12,
-                                    color: "#666",
+                                    fontSize: 12, // 坐标轴名称的大小
+                                    color: "#333", // 坐标轴名称的颜色
                                     fontWeight: 700
-                                },
-                                formatter: function(data) {
-                                    return chartName[data.dataIndex]
                                 }
-                            }
+                            },
+                            axisLine: {
+                                show: false,
+                                lineStyle: {
+                                    color: "#8CC4A1"
+                                }
+                            },
+                            splitLine: {
+                                show: true
+                            },
+                            axisTick: {
+                                show: true
+                            },
+                            data: chartData
+                        }
+                    ],
+                    series: [
+                        {
+                            name: "我是打底",
+                            type: "pictorialBar",
+                            symbol: "rect", // 类型
+                            yAxisIndex: 0,
+                            barWidth: 10,
+                            itemStyle: {
+                                normal: {
+                                    // barBorderRadius: 5,
+                                    color: "#ccc"
+                                }
+                            },
+                            label: {
+                                normal: {
+                                    position: "right"
+                                }
+                            },
+                            symbolRepeat: true,
+                            // symbolRotate: '45',
+                            symbolSize: [10, 16],
+                            // symbolMargin: 2,
+                            data: chartDataone
                         },
-                        data: chartDataone
-                    }
-                ]
+                        {
+                            name: "我是上层方块",
+                            type: "pictorialBar",
+                            symbol: "rect",
+                            itemStyle: {
+                                normal: {
+                                    color: "green"
+                                }
+                            },
+                            label: {
+                                normal: {
+                                    // show: true, // 数据大小的显示, 100 200 300
+                                    textStyle: {
+                                        color: "#000000" // 颜色
+                                    },
+                                    position: "right"
+                                }
+                            },
+                            barWidth: 10,
+                            symbolRepeat: true,
+                            // symbolRotate: '45',
+                            symbolSize: [10, 16],
+                            // symbolMargin: 2,
+                            data: chartData
+                        },
+                        // 数据条--------------------我是分割线君------------------------------//
+                        {
+                            show: true,
+                            type: "bar",
+                            // xAxisIndex: 1, //代表使用第二个X轴刻度
+                            barGap: "-150%",
+                            barWidth: "25%",
+                            itemStyle: {
+                                normal: {
+                                    barBorderRadius: 50,
+                                    // color: 'yellow',
+                                    color: "transparent" // rgba(22,203,115,0.05) 数据条柱状图的填充颜色,, 一开始我的有一点点背景颜色
+                                }
+                            },
+                            label: {
+                                normal: {
+                                    show: true,
+                                    position: [-240, 0],
+                                    textStyle: {
+                                        fontSize: 12,
+                                        color: "#666",
+                                        fontWeight: 700
+                                    },
+                                    formatter: function(data) {
+                                        return chartName[data.dataIndex]
+                                    }
+                                }
+                            },
+                            data: chartDataone
+                        }
+                    ]
+                })
             })
         },
         drawtrb() {
-            getjfqk(this.midprovinceid , this.homeType ).then(res => {
-                console.log( res.data , '777777777777777777777777777777777777777777777777777777777777777777777777' )
+            getjfqk(this.midprovinceid, this.homeType).then(res => {
                 const myChartrb = this.$echarts.init(
                     document.getElementById("myChartrb")
                 )
@@ -1260,7 +1299,8 @@ export default {
                 name: "yclqTable",
                 query: {
                     depotId: this.midprovinceid,
-                    midprovinceName: this.midprovinceName
+                    midprovinceName: this.midprovinceName,
+                    isshow: this.isxian
                 }
             })
         },
@@ -1273,6 +1313,15 @@ export default {
                 }
             })
         },
+        hyd() {
+            this.$router.push({
+                name: "hydtable",
+                query: {
+                    depotId: this.midprovinceid,
+                    midprovinceName: this.midprovinceName
+                }
+            })
+        },
     }
 }
 </script>

shanXiPlatform/src/views/home/gzjftable.vue

@@ -76,7 +76,8 @@ export default {
             var condition = {
                 // depotId: this.$store.state.depotId,
                 depotId: this.$route.query.depotId,
-                sTime: this.checkYear
+                sTime: this.checkYear,
+                type:''
             }
             condition = JSON.stringify(condition)
             let data = {

shanXiPlatform/src/views/home/hydmoretable.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="global">
+        <div class="contentContainerGg">
+            <div class="container">
+                <el-form :inline="true">
+                    <el-form-item label="时间:">
+                        <el-date-picker @change="timechange" id="getWeek" v-model="datetime" type="month" format="yyyy-MM" placeholder="选择月">
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button icon="el-icon-search" type="success" plain @click="getList()">
+                            查询</el-button>
+                    </el-form-item>
+                </el-form>
+                <el-table border :data="tableList" highlight-current-row style="width:100%" :header-cell-style="{background:'#f8f8f8'}">
+                    <el-table-column property="sTime" label="时间" align="center" >
+                        <template slot-scope="scope">
+                            {{ scope.row.actTime.slice(0,7) }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="personnelName" label="人员" align="center" />
+                    <el-table-column prop="sposition" label="职位" align="center" />
+                    <el-table-column prop="depotName" label="所属粮库" align="center" />
+                    <el-table-column prop="depotRanking" label="活跃度所在粮库排名" align="center" />
+                    <el-table-column prop="provinceRanking" label="活跃度全省排名" align="center" />
+                    <el-table-column prop="usActivity" label="得分" align="center" />
+                </el-table>
+                <div class="pagination-container">
+                    <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[10,20,30,40]" :total="total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { getcf } from "@/api/organizationalStructureManagement/index.js"
+import { getmorehyd } from "@/api/branchoff/index.js"
+export default {
+    data() {
+        return {
+            datetime: "",
+            // 列表数据
+            tableList: [],
+            // 分页
+            total: 0,
+            listLoading: true,
+            listQuery: {
+                page: 1,
+                limit: 10
+            },
+            roleList: [],
+            depotDic: []
+        }
+    },
+    created() {
+        this.getList()
+        this.depotDic = JSON.parse(localStorage.getItem("deportDic"))
+    },
+    methods: {
+        timechange() {
+            this.$nextTick(() => {
+                let week = document.querySelector("#getWeek").value
+                this.checkYear = week
+            })
+        },
+        getList() {
+            var condition = {
+                // depotId: this.$store.state.depotId,
+                depotId: this.$route.query.depotId,
+                sTime: this.checkYear,
+                type:'1'
+            }
+            condition = JSON.stringify(condition)
+            let data = {
+                condition: condition,
+                pageIndex: this.listQuery.page,
+                pageSize: this.listQuery.limit
+            }
+            getmorehyd(data)
+                .then(res => {
+                    if (res.code == 200) {
+                        this.tableList = res.data.records
+                        this.listQuery.limit = res.data.size
+                        this.total = res.data.total
+                    } else {
+                        this.$message({
+                            type: "error",
+                            message: res.msg
+                        })
+                    }
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+        },
+        sizeChange(v) {
+            this.listQuery.limit = v
+            this.getList()
+        },
+        pageChange(v) {
+            this.listQuery.page = v
+            this.getList()
+        },
+     
+    }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #ccc;
+}
+.container {
+    padding: 10px;
+}
+.pagination-container {
+    margin-top: 10px;
+    margin-right: 20px;
+    text-align: right;
+}
+</style>

shanXiPlatform/src/views/home/hydtable.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="global">
+        <div class="contentContainerGg">
+            <div class="container">
+                <el-form :inline="true">
+                    <el-form-item label="时间:">
+                        <el-date-picker @change="timechange" id="getWeek" v-model="datetime" type="month" format="yyyy-MM" placeholder="选择月">
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button icon="el-icon-search" type="success" plain @click="getList()">
+                            查询</el-button>
+                    </el-form-item>
+                </el-form>
+                <el-table border :data="tableList" highlight-current-row style="width:100%" :header-cell-style="{background:'#f8f8f8'}">
+                    <el-table-column property="sTime" label="时间" align="center">
+                        <template slot-scope="scope">
+                            {{ scope.row.actTime.slice(0,7) }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="depotName" label="公司" align="center" />
+                    <el-table-column prop="provinceRanking" label="活跃度全省排名" align="center" />
+                    <el-table-column prop="usActivity" label="得分" align="center" />
+                     <el-table-column property="operation" label="操作" align="center">
+                        <template slot-scope="scope">
+                            <el-button size="mini" type="detailbtn" @click="detailbtn(scope.$index, scope.row)">查看库内活跃排名</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <div class="pagination-container">
+                    <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[10,20,30,40]" :total="total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { getcf } from "@/api/organizationalStructureManagement/index.js"
+import { getmorehyd } from "@/api/branchoff/index.js"
+export default {
+    data() {
+        return {
+            datetime: "",
+            // 列表数据
+            tableList: [],
+            // 分页
+            total: 0,
+            listLoading: true,
+            listQuery: {
+                page: 1,
+                limit: 10
+            },
+            roleList: [],
+            depotDic: []
+        }
+    },
+    created() {
+        this.getList()
+        this.depotDic = JSON.parse(localStorage.getItem("deportDic"))
+    },
+    methods: {
+        timechange() {
+            this.$nextTick(() => {
+                let week = document.querySelector("#getWeek").value
+                this.checkYear = week
+            })
+        },
+        getList() {
+            var condition = {
+                // depotId: this.$store.state.depotId,
+                depotId: this.$route.query.depotId,
+                sTime: this.checkYear,
+                type: ""
+            }
+            condition = JSON.stringify(condition)
+            let data = {
+                condition: condition,
+                pageIndex: this.listQuery.page,
+                pageSize: this.listQuery.limit
+            }
+            getmorehyd(data)
+                .then(res => {
+                    if (res.code == 200) {
+                        this.tableList = res.data.records
+                        this.listQuery.limit = res.data.size
+                        this.total = res.data.total
+                    } else {
+                        this.$message({
+                            type: "error",
+                            message: res.msg
+                        })
+                    }
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+        },
+        sizeChange(v) {
+            this.listQuery.limit = v
+            this.getList()
+        },
+        pageChange(v) {
+            this.listQuery.page = v
+            this.getList()
+        },
+         detailbtn( index, row  ) {
+              this.$router.push({
+                name: "hydmoretable",
+                query: {
+                    depotId: row.depotId,
+                    midprovinceName: this.$route.query.midprovinceName
+                }
+            })
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #ccc;
+}
+.container {
+    padding: 10px;
+}
+.pagination-container {
+    margin-top: 10px;
+    margin-right: 20px;
+    text-align: right;
+}
+</style>

shanXiPlatform/src/views/home/kngzjftable.vue

@@ -70,7 +70,8 @@ export default {
             var condition = {
                 // depotId: this.$store.state.depotId,
                 depotId: this.$route.query.depotId,
-                sTime: this.checkYear
+                sTime: this.checkYear,
+                type:'1'
             }
             condition = JSON.stringify(condition)
             let data = {

shanXiPlatform/src/views/home/yclqtable.vue

@@ -2,7 +2,7 @@
     <div class="global">
         <div class="contentContainerGg">
             <div class="container">
-                <el-form  :inline="true">
+                <el-form :inline="true">
                     <el-form-item label="时间:">
                         <el-date-picker @change="timechange" id="getWeek" v-model="datetime" type="week" format="yyyy年WW周" placeholder="选择周">
                         </el-date-picker>
@@ -13,15 +13,32 @@
                     </el-form-item>
                 </el-form>
                 <el-table border :data="tableList" highlight-current-row style="width:100%" :header-cell-style="{background:'#f8f8f8'}">
-                    <el-table-column prop="operationTime" label="时间" align="center" />
-                      <el-table-column property="depotName" label="公司" align="center">
+                    <!-- <el-table-column prop="operationTime" label="时间" align="center" /> -->
+                    <el-table-column property="depotName" label="时间" align="center">
                         <template slot-scope="scope">
-                             {{ depotDic[scope.row.depotId] }}
+                            {{ scope.row.checkYear }}年 {{ scope.row.checkYearWeek}}周
                         </template>
                     </el-table-column>
-                    <!-- <el-table-column prop="storageStatus" label="所属市" align="center" /> -->
-                    <el-table-column prop="grainVarieties" label="仓房数量(个)" align="center" />
-                    <el-table-column prop="warehouseStatus" label="粮情异常仓房数量(个)" align="center" />
+                    <el-table-column v-if="this.$route.query.isshow" property="depotName" label="仓房" align="center">
+                        <template slot-scope="scope">
+                            <span style="color:green;" > {{ scope.row.depotId }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column  property="depotName" label="公司" align="center">
+                        <template slot-scope="scope" >
+                             {{ depotDic[scope.row.depotId] }} 
+                        </template>
+                    </el-table-column>
+                    <el-table-column v-if="this.$route.query.isshow" label="粮情异常情况" align="center">
+                        <template slot-scope="scope">
+                            <p style="height:45px;line-height:45px;margin:0;padding-top:7px;">
+                                <span class='colorspano' v-if="scope.row.grainError == '191'"></span>
+                                <span class='colorspant' v-if="scope.row.grainError != '191'"></span>
+                            </p>
+                        </template>
+                    </el-table-column>
+                    <el-table-column v-if="!this.$route.query.isshow" prop="grainVarieties" label="仓房数量(个)" align="center" />
+                    <el-table-column v-if="!this.$route.query.isshow" prop="warehouseStatus" label="粮情异常仓房数量(个)" align="center" />
                     <el-table-column property="operation" label="操作" align="center">
                         <template slot-scope="scope">
                             <el-button size="mini" type="detailbtn" @click="detailbtn(scope.$index, scope.row)">详情</el-button>
@@ -37,7 +54,7 @@
 </template>
 <script>
 import { getcf } from "@/api/organizationalStructureManagement/index.js"
-import {  getyclq } from "@/api/branchoff/index.js"
+import { getyclq } from "@/api/branchoff/index.js"
 export default {
     data() {
         return {
@@ -52,7 +69,7 @@ export default {
                 limit: 10
             },
             roleList: [],
-            depotDic: [],
+            depotDic: []
         }
     },
     created() {
@@ -105,7 +122,15 @@ export default {
             this.listQuery.page = v
             this.getList()
         },
-        detailbtn() {}
+        detailbtn(index, row) {
+            this.$router.push({
+                name: "AllGrain",
+                query: {
+                    // depotId: row.depotId,
+                    // midprovinceName: this.$route.query.midprovinceName
+                }
+            })
+        }
     }
 }
 </script>
@@ -123,4 +148,18 @@ export default {
     margin-right: 20px;
     text-align: right;
 }
+.colorspano {
+    width: 140px;
+    height: 30px;
+    background-color: #199856;
+    display: inline-block;
+    border-radius: 5px;
+}
+.colorspant {
+    width: 140px;
+    height: 30px;
+    background-color: #ffff00;
+    display: inline-block;
+    border-radius: 5px;
+}
 </style>