wxd

src/api/xiehui/tjgl/supervisor.js

@@ -50,3 +50,12 @@ export function getYeJi(params) {
     params,
   });
 }
+
+//修改设置状态
+export function saveAuditState(params) {
+  return request({
+    url: "/jlry/RenCai/rencaish",
+    method: "get",
+    params,
+  });
+}

src/api/xiehui/wljxjyxt/notExamPerson.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function listExam(params) {
+  return request({
+    url: "/system/PaperInfo/examlist",
+    method: "get",
+    params,
+  });
+}

src/views/xiehui/jlryglxt/supervisionManage.vue

@@ -89,11 +89,7 @@
       </el-form-item>
     </el-form>
 
-    <el-table
-      v-loading="loading"
-      :data="RenCaiList"
-      @selection-change="handleSelectionChange"
-    >
+    <el-table v-loading="loading" :data="RenCaiList">
       <el-table-column label="序号" align="center" type="index">
         <template slot-scope="scope">
           <span>{{ handleTableIndex(scope.$index, queryParams) }}</span>
@@ -118,7 +114,17 @@
         align="center"
         width="300"
         prop="JLYZhengHao"
-      />
+      >
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.JLYZhengHao }}
+
+            <span class="supervision" v-if="scope.row.JLYzfFlg == '0'"
+              >（作废）</span
+            >
+          </div>
+        </template>
+      </el-table-column>
 
       <el-table-column
         label="监理员发证日期"
@@ -135,7 +141,16 @@
         align="center"
         width="200"
         prop="JLZhengHao"
-      />
+      >
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.JLZhengHao }}
+            <span v-if="scope.row.ShenHe == '0'" class="supervision"
+              >（禁用）</span
+            >
+          </div>
+        </template>
+      </el-table-column>
 
       <el-table-column
         label="监理工程师证书发证日期"
@@ -178,10 +193,34 @@
 
       <el-table-column align="center" label="审核状态">
         <el-table-column align="center" label="状态">
-          <el-tag>未审核</el-tag>
+          <template slot-scope="scope">
+            <el-tag
+              :type="
+                (scope.row.JLYZhengHao != '' && scope.row.JLYzfFlg != 1) ||
+                (scope.row.JLZhengHao != '' && scope.row.ShenHe != 0) ||
+                (scope.row.ZJZhengHao != '' && scope.row.ZJzfFlg != 1)
+                  ? 'primary'
+                  : 'danger'
+              "
+              >{{
+                (scope.row.JLYZhengHao != "" && scope.row.JLYzfFlg != 1) ||
+                (scope.row.JLZhengHao != "" && scope.row.ShenHe != 0) ||
+                (scope.row.ZJZhengHao != "" && scope.row.ZJzfFlg != 1)
+                  ? "已审核"
+                  : "未审核"
+              }}</el-tag
+            >
+          </template>
         </el-table-column>
         <el-table-column align="center" label="设置">
-          <el-button type="text" size="mini">设置</el-button>
+          <template slot-scope="scope">
+            <el-button
+              @click="handleSettingAuditState(scope.row)"
+              type="text"
+              size="mini"
+              >设置</el-button
+            >
+          </template>
         </el-table-column>
       </el-table-column>
       <el-table-column
@@ -576,13 +615,47 @@
     <el-dialog
       title="审核设置"
       :visible.sync="auditDia"
-      width="700px"
+      width="500px"
       :before-close="
         () => {
           auditDia = false;
         }
       "
     >
+      <el-form
+        ref="auditRef"
+        :model="auditForm"
+        :rules="auditRules"
+        label-width="120px"
+      >
+        <el-form-item label="监理员：" prop="JLYzfFlg">
+          <el-radio-group v-model="auditForm.JLYzfFlg">
+            <el-radio :label="1">启用</el-radio>
+            <el-radio :label="0">作废</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="监理工程师：" prop="ZJzfFlg">
+          <el-radio-group v-model="auditForm.ZJzfFlg">
+            <el-radio :label="1">启用</el-radio>
+            <el-radio :label="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="总监：" prop="ShenHe">
+          <el-radio-group v-model="auditForm.ShenHe">
+            <el-radio :label="1">启用</el-radio>
+            <el-radio :label="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="作废/禁用原因：">
+          <el-input
+            v-model="auditForm.ZfResult"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入原因"
+          >
+          </el-input>
+        </el-form-item>
+      </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="auditDia = false">取 消</el-button>
         <el-button type="primary" @click="onAuditSubmit">确 定</el-button>
@@ -596,9 +669,9 @@ import {
   listRenCai,
   getRenCai,
   delRenCai,
-  addRenCai,
   updateRenCai,
   getYeJi,
+  saveAuditState,
 } from "@/api/xiehui/tjgl/supervisor";
 
 import { handleTableIndex } from "@/utils/index";
@@ -608,7 +681,45 @@ export default {
   dicts: ["jxjy_sfkyjxjy", "jxjy_jlgcszfbz", "jxjy_bljl", "jxjy_jlyzfbz"],
   data() {
     return {
-      auditForm:{},
+      auditRules: {
+        JLYzfFlg: [
+          {
+            required: true,
+            message: "状态不能为空",
+            trigger: "blur",
+          },
+        ],
+        ZJzfFlg: [
+          {
+            required: true,
+            message: "状态不能为空",
+            trigger: "blur",
+          },
+        ],
+        ShenHe: [
+          {
+            required: true,
+            message: "状态不能为空",
+            trigger: "blur",
+          },
+        ],
+        ZfResult: [
+          {
+            required: true,
+            message: "原因不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      activeSetting: {},
+      auditDia: false,
+      auditForm: {
+        JLYzfFlg: null,
+        ZJzfFlg: null,
+        ShenHe: null,
+        ZfResult: null,
+        ID: null,
+      },
       achievementTableData: [],
       viewDia: false,
       // 遮罩层
@@ -654,9 +765,34 @@ export default {
     },
   },
   methods: {
+    handleSettingAuditState(row) {
+      console.log(row);
+      this.auditDia = true;
+      this.activeSetting = row;
+
+      this.auditForm.JLYzfFlg = row.JLYzfFlg;
+      this.auditForm.ZJzfFlg = row.ZJzfFlg;
+      this.auditForm.ShenHe = row.ShenHe;
+      this.auditForm.ZfResult = row.ZfResult;
+      this.auditForm.ID = row.ID;
+    },
     //审核提交
     onAuditSubmit() {
-      
+      this.$refs["auditRef"].validate((valid) => {
+        if (valid) {
+          saveAuditState(this.auditForm)
+            .then((res) => {
+              this.$message({
+                type: "success",
+                message: "设置成功",
+              });
+              this.getList();
+            })
+            .finally(() => {
+              this.auditDia = false;
+            });
+        }
+      });
     },
     // 表单重置
     reset() {
@@ -791,3 +927,8 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+.supervision {
+  color: red;
+}
+</style>

src/views/xiehui/tjgl/supervisor.vue

@@ -69,7 +69,17 @@
         align="center"
         width="300"
         prop="JLYZhengHao"
-      />
+      >
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.JLYZhengHao }}
+
+            <span class="supervision" v-if="scope.row.JLYzfFlg == '0'"
+              >（作废）</span
+            >
+          </div>
+        </template>
+      </el-table-column>
       <!-- <el-table-column
         label="监理员证号"
         align="center"
@@ -90,13 +100,22 @@
         align="center"
         width="200"
         prop="JLZhengHao"
-      />
-      <el-table-column
+      >
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.JLZhengHao }}
+            <span v-if="scope.row.ShenHe == '0'" class="supervision"
+              >（禁用）</span
+            >
+          </div>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
         label="监理工程师证书号(纯数字)"
         align="center"
         prop="JLZhengHaoNum"
         width="200"
-      />
+      /> -->
       <el-table-column
         label="监理工程师证书发证日期"
         align="center"
@@ -122,7 +141,17 @@
         align="center"
         width="200"
         prop="ZJZhengHao"
-      />
+      >
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.ZJZhengHao }}
+            <span v-if="scope.row.ZJzfFlg == '0'" class="supervision"
+              >（禁用）</span
+            >
+          </div>
+        </template>
+      </el-table-column>
+
       <el-table-column
         label="总监发证日期"
         align="center"
@@ -166,13 +195,36 @@
     <el-dialog
       title="业绩/简历"
       :visible.sync="viewDia"
-      width="600px"
+      width="1000px"
       :before-close="
         () => {
           viewDia = false;
         }
       "
     >
+      <el-table style="width: 1000px" :data="achievementTableData">
+        <el-table-column
+          label="序号"
+          align="center"
+          type="index"
+        ></el-table-column>
+        <el-table-column
+          label="工作单位"
+          width="300"
+          align="center"
+          prop="QYLoginName"
+        ></el-table-column>
+        <el-table-column width="200" label="添加时间" align="center">
+          <template slot-scope="scope">
+            {{ parseTime(scope.row.Nian, "{y}-{m}-{d}") }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="内容" width="500">
+          <template slot-scope="scope">
+            <span v-html="content(scope.row)"></span>
+          </template>
+        </el-table-column>
+      </el-table>
       <span slot="footer" class="dialog-footer">
         <el-button @click="viewDia = false">关 闭</el-button>
       </span>
@@ -181,13 +233,7 @@
 </template>
 
 <script>
-import {
-  listRenCai,
-  getRenCai,
-  delRenCai,
-  addRenCai,
-  updateRenCai,
-} from "@/api/xiehui/tjgl/supervisor";
+import { listRenCai, getRenCai, getYeJi } from "@/api/xiehui/tjgl/supervisor";
 import { handleTableIndex } from "@/utils/index";
 
 export default {
@@ -195,6 +241,7 @@ export default {
   dicts: ["jxjy_sfkyjxjy", "jxjy_jlgcszfbz", "jxjy_bljl", "jxjy_jlyzfbz"],
   data() {
     return {
+      achievementTableData: [],
       viewDia: false,
       // 遮罩层
       loading: true,
@@ -232,7 +279,11 @@ export default {
   methods: {
     handleTableIndex,
     handleView(row) {
-      this.activeView = row;
+      getYeJi({
+        XYusercord: row.ShenFenZheng,
+      }).then((res) => {
+        this.achievementTableData = res.rows;
+      });
       this.viewDia = true;
     },
     /** 查询监理人才管理列表 */
@@ -274,3 +325,8 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+.supervision {
+  color: red;
+}
+</style>

src/views/xiehui/wljxjyxt/examPerson.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="100px"
+    >
+      <el-form-item label="姓名" prop="UserName">
+        <el-input
+          v-model="queryParams.UserName"
+          placeholder="请输入姓名"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="身份证" prop="UserCord">
+        <el-input
+          v-model="queryParams.UserCord"
+          placeholder="请输入身份证"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否及格" prop="PassState">
+        <el-select v-model="queryParams.PassState" placeholder="请选择是否及格">
+          <el-option label="0">否</el-option>
+          <el-option label="1">是</el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="期次（年）" prop="QiciYear">
+        <el-date-picker
+          format="yyyy"
+          value-format="yyyy"
+          v-model="queryParams.QiciYear"
+          type="year"
+          placeholder="请选择期次（年）"
+        >
+        </el-date-picker>
+        <span style="display: inline-block; margin: 0 10px 0 15px">-</span>
+      </el-form-item>
+      <el-form-item prop="QiCi">
+        <el-input
+          v-model="queryParams.QiCi"
+          style="width: 150px"
+          placeholder="期次"
+          type="number"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">查询</el-button>
+        <el-button @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="RenCaiList">
+      <el-table-column label="序号" align="center" type="index">
+        <template slot-scope="scope">
+          <span>{{ handleTableIndex(scope.$index, queryParams) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="期次" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.QiciYear }}年{{ scope.row.QiCi }}期次</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="培训类别" align="center" prop="">
+        监理工程师
+      </el-table-column>
+      <el-table-column label="姓名" align="center" prop="UserName" />
+
+      <el-table-column
+        label="身份证号"
+        align="center"
+        width="200"
+        prop="UserCord"
+      />
+      <el-table-column
+        label="执业单位"
+        align="center"
+        width="300"
+        prop="DeptName"
+      />
+      <el-table-column label="证书编号" align="center" prop="Undef1">
+      </el-table-column>
+
+      <el-table-column label="证书有效期至" align="center" prop="Yxqz">
+      </el-table-column>
+      <el-table-column label="应完成学时" align="center" prop="XueShi">
+        <template slot-scope="scope">
+          <span>{{ scope.row.XueShi }}学时</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="已完成时间" align="center" prop="WcXueshi">
+        <template slot-scope="scope">
+          <span v-if="scope.row.WcXueshi">{{ scope.row.WcXueshi }}分钟</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="及格分数" align="center" prop="jgfs">
+        <template slot-scope="scope">
+          <span v-if="scope.row.jgfs">{{ scope.row.jgfs }}分</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="考试分数" align="center" prop="TotalMark">
+        <template slot-scope="scope">
+          <span v-if="scope.row.TotalMark"
+            >{{
+              scope.row.TotalMark - Math.trunc(scope.row.TotalMark) > 0
+                ? scope.row.TotalMark
+                : parseInt(scope.row.TotalMark)
+            }}分</span
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="考试次数" align="center" prop="kscs">
+        <template slot-scope="scope">
+          <span v-if="scope.row.kscs">{{ scope.row.kscs }}次</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listExam } from "@/api/xiehui/wljxjyxt/notExamPerson";
+import { handleTableIndex } from "@/utils/index";
+
+export default {
+  name: "RenCai",
+  dicts: ["jxjy_sfkyjxjy", "jxjy_jlgcszfbz", "jxjy_bljl", "jxjy_jlyzfbz"],
+  data() {
+    return {
+      achievementTableData: [],
+      viewDia: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      activeView: {},
+      // 监理人才管理表格数据
+      RenCaiList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        isks: 1,
+        PassState: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    handleTableIndex,
+    handleView(row) {
+      getYeJi({
+        XYusercord: row.ShenFenZheng,
+      }).then((res) => {
+        this.achievementTableData = res.rows;
+      });
+      this.viewDia = true;
+    },
+    /** 查询监理人才管理列表 */
+    getList() {
+      this.loading = true;
+      listExam(this.queryParams).then((response) => {
+        this.RenCaiList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const ID = row.ID || this.ids;
+      getRenCai(ID).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改监理人才管理";
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.supervision {
+  color: red;
+}
+</style>

src/views/xiehui/wljxjyxt/notExamPerson.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="100px"
+    >
+      <el-form-item label="姓名" prop="UserName">
+        <el-input
+          v-model="queryParams.UserName"
+          placeholder="请输入姓名"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="身份证" prop="UserCord">
+        <el-input
+          v-model="queryParams.UserCord"
+          placeholder="请输入身份证"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="期次（年）" prop="QiciYear">
+        <el-date-picker
+          format="yyyy"
+          value-format="yyyy"
+          v-model="queryParams.QiciYear"
+          type="year"
+          placeholder="请选择期次（年）"
+        >
+        </el-date-picker>
+        <span style="display: inline-block; margin: 0 10px 0 15px">-</span>
+      </el-form-item>
+      <el-form-item prop="QiCi">
+        <el-input
+          v-model="queryParams.QiCi"
+          style="width: 150px"
+          placeholder="期次"
+          type="number"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">查询</el-button>
+        <el-button @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="RenCaiList">
+      <el-table-column label="序号" align="center" type="index">
+        <template slot-scope="scope">
+          <span>{{ handleTableIndex(scope.$index, queryParams) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="期次" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.QiciYear }}年{{ scope.row.QiCi }}期次</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="培训类别" align="center" prop="">
+        监理工程师
+      </el-table-column>
+      <el-table-column label="姓名" align="center" prop="UserName" />
+
+      <el-table-column
+        label="身份证号"
+        align="center"
+        width="200"
+        prop="UserCord"
+      />
+      <el-table-column
+        label="执业单位"
+        align="center"
+        width="300"
+        prop="DeptName"
+      />
+      <el-table-column label="证书编号" align="center" prop="Undef1">
+      </el-table-column>
+
+      <el-table-column label="证书有效期至" align="center" prop="Yxqz">
+      </el-table-column>
+      <el-table-column label="应完成学时" align="center" prop="XueShi">
+        <template slot-scope="scope">
+          <span>{{ scope.row.XueShi }}学时</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="已完成时间" align="center" prop="WcXueshi">
+        <template slot-scope="scope">
+          <span v-if="scope.row.WcXueshi">{{ scope.row.WcXueshi }}分钟</span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="及格分数" align="center" prop="jgfs">
+        <template slot-scope="scope">
+          <span v-if="scope.row.jgfs">{{ scope.row.jgfs }}分</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="考试分数" align="center" prop="TotalMark">
+        <template slot-scope="scope">
+          <span v-if="scope.row.TotalMark">{{ scope.row.TotalMark }}分</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="考试次数" align="center" prop="kscs">
+        <template slot-scope="scope">
+          <span v-if="scope.row.kscs">{{ scope.row.kscs }}次</span>
+        </template>
+      </el-table-column> -->
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listExam } from "@/api/xiehui/wljxjyxt/notExamPerson";
+import { handleTableIndex } from "@/utils/index";
+
+export default {
+  name: "RenCai",
+  dicts: ["jxjy_sfkyjxjy", "jxjy_jlgcszfbz", "jxjy_bljl", "jxjy_jlyzfbz"],
+  data() {
+    return {
+      achievementTableData: [],
+      viewDia: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      activeView: {},
+      // 监理人才管理表格数据
+      RenCaiList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        isks: 0,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    handleTableIndex,
+    handleView(row) {
+      getYeJi({
+        XYusercord: row.ShenFenZheng,
+      }).then((res) => {
+        this.achievementTableData = res.rows;
+      });
+      this.viewDia = true;
+    },
+    /** 查询监理人才管理列表 */
+    getList() {
+      this.loading = true;
+      listExam(this.queryParams).then((response) => {
+        this.RenCaiList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const ID = row.ID || this.ids;
+      getRenCai(ID).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改监理人才管理";
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.supervision {
+  color: red;
+}
+</style>