hyyfScreen/src/views/Production/Production.vue

<!--
 * @Author: your name
 * @Date: 2021-10-21 17:51:22
 * @LastEditTime: 2021-11-29 18:27:13
 * @LastEditors: Please set LastEditors
 * @Description: 生产经营页面
 * @FilePath: \hyyfScreen\src\views\Production\Production.vue
-->
<template>
  <div class="production">
    <!-- 第一列 -->
    <div class="production-column production-side-column">
      <div class="production-column-item">
        <pro-board :title="'存栏结构'">
          <chart-amount-pie :data="inventoryPieData"></chart-amount-pie>
        </pro-board>
      </div>
      <div class="production-column-item">
        <pro-board :title="'存栏变动'">
          <chart-amount-line :data="amountLineData"></chart-amount-line>
        </pro-board>
      </div>
      <div class="production-column-item">
        <pro-board :title="'母猪分布'">
          <chart-sow-bar :data="amountPieData"></chart-sow-bar>
        </pro-board>
      </div>
    </div>

    <!-- 第二列 -->
    <div class="production-column production-mid-column">
      <div class="production-column-item">
        <pro-board
          :title="'重要指标'"
          :click="true"
          @getClick="clickIndicators"
        >
          <important-items :data="importantData"></important-items>
          <!-- 重要指标的图 -->
          <transition name="fade">
            <div v-if="indicatorsVisible" class="indicators">
              <div class="indicators-title">
                <div class="target">指标数量：78</div>
                <div class="target">上升指标：58</div>
                <div class="target">下降指标：15</div>
                <div class="target">持平指标：5</div>
              </div>
              <div class="indicators-search">
                <div class="indicators-search-icon"></div>
                <input
                  class="indicators-search-input"
                  type="text"
                  placeholder="搜索"
                />
              </div>
              <div class="indicators-charts">
                <indicator-item
                  v-for="(item, index) in indicatorsData"
                  :key="item.title"
                  v-bind="item"
                  :id="index"
                  @clickItem="clickItem(index)"
                >
                </indicator-item>
              </div>
            </div>
          </transition>
          <transition name="fade">
            <div
              v-if="indicatorsItemVisible"
              class="indicators indicator-one-item"
            >
              <div class="back-triangle" @click="clickBack"></div>
              <div class="indicator-item-title">
                {{ indicatorsData[indicatorIndex].title }}
                <span
                  :class="
                    indicatorsData[indicatorIndex].ifPositive
                      ? 'positive'
                      : 'negative'
                  "
                  class="num-common"
                >
                  {{ indicatorsData[indicatorIndex].titleNum }}
                </span>
                <span
                  :class="
                    indicatorsData[indicatorIndex].ifPositive
                      ? 'positive'
                      : 'negative'
                  "
                  class="num-common"
                >
                  {{ indicatorsData[indicatorIndex].subtitleNum }}
                </span>
              </div>
              <div class="indicator-item-subtitle">
                {{ indicatorsData[indicatorIndex].littleTitle }}
              </div>
              <indicator-one-chart
                v-bind="indicatorsData[indicatorIndex]"
              ></indicator-one-chart>
            </div>
          </transition>
        </pro-board>
      </div>

      <div class="production-column-item">
        <pro-board :title="'销售分析'">
          <div class="sales">
            <!-- <div class="sales-condition">
              <el-date-picker
                v-model="getSalesDates"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                size="mini">
              </el-date-picker>
            </div> -->
            <div class="sales-content">
              <div class="sales-left">
                <div class="up">
                  <label>本月销售额</label>
                  <span>{{ weekSales }}元</span>
                  <div class="sales-change">
                    <div>
                      <div
                        class="triangle-change"
                        :class="
                          weekSalesChange > 0 ? 'triangle-up' : 'triangle-down'
                        "
                      ></div>
                      <span
                        :class="weekSalesChange > 0 ? 'color-up' : 'color-down'"
                        >{{ weekSalesChange }}%</span
                      >
                      &nbsp;&nbsp;&nbsp;环比上月
                    </div>
                  </div>
                </div>
                <div class="down">
                  <label>本月销售量</label>
                  <span>{{ weekSalesVolume }}头</span>
                  <div class="sales-change">
                    <div>
                      <div
                        class="triangle-change"
                        :class="
                          weekSalesVolumeChange > 0
                            ? 'triangle-up'
                            : 'triangle-down'
                        "
                      ></div>
                      <span
                        :class="
                          weekSalesVolumeChange > 0 ? 'color-up' : 'color-down'
                        "
                        >{{ weekSalesVolumeChange }}%</span
                      >
                      &nbsp;&nbsp;&nbsp;环比上月
                    </div>
                  </div>
                </div>
              </div>
              <div class="sales-right">
                <chart-sales :data="salesChartData"></chart-sales>
              </div>
            </div>
          </div>
        </pro-board>
      </div>

      <div class="production-column-item">
        <pro-board :title="'应付排名'">
          <ying-shou :data="yingfuData"></ying-shou>
        </pro-board>
      </div>
    </div>

    <!-- 第三列 -->
    <div class="production-column production-side-column">
      <div class="production-column-item">
        <pro-board :title="'工作看板'">
          <work-items @workInfo="getWorkInfo(value)"></work-items>
        </pro-board>
      </div>

      <!-- 工作看板点击后出现的东西 -->
      <div class="work-infos" v-show="ifWorkInfos">
        <div class="kuang">
          <div class="work-info-title">工作任务</div>
          <div class="work-info-wrap">
            <div class="work-info-content">
              <div class="work-info-content-top">
                <div class="work-info-content-history">
                  <div class="history-title">历史工作任务</div>
                  <div class="history-content">
                    <div
                      class="history-content-item"
                      v-for="item in historyData"
                      :key="item.id"
                    >
                      <span class="history-content-item-data">{{
                        item.date
                      }}</span>
                      <span class="history-content-item-data">{{
                        item.content
                      }}</span>
                      <span class="history-content-item-data">{{
                        item.person
                      }}</span>
                    </div>
                  </div>
                </div>
                <div class="work-info-content-condition">
                  <div class="history-title">发布任务</div>
                  <div class="condition-content">
                    <div class="condition-content-item">
                      <div>执行日期：</div>
                      <el-select
                        size="mini"
                        style="width: 65%; position: relative; top: -5px"
                      >
                        <el-option></el-option>
                      </el-select>
                    </div>
                    <div class="condition-content-item">
                      <div>负责人：</div>
                      <el-select
                        size="mini"
                        style="width: 65%; position: relative; top: -5px"
                      >
                        <el-option></el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="work-info-content-main">
                <div class="history-title">内容</div>
                <div class="main-content">我是内容</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="production-column-item2">
        <pro-board :title="'成本分析'">
          <div style="height: 100%">
            <div style="height: 90%;padding-top:30px;">
              <!-- 扇形图 -->
              <chart-cost-pie
                :data="costPieData"
                :title="costTitles[costIndex]"
              >
              </chart-cost-pie>
              <!-- 柱状图 -->
              <chart-cost-line
                :data="costLineData"
                :xAxisData="costTitles"
                @changeCostIndex="changeCostIndex"
              >
              </chart-cost-line>
            </div>
          </div>
        </pro-board>
      </div>
    </div>
  </div>
</template>

<script>
import ProBoard from "./board/ProBoard.vue";
import ChartAmountPie from "./board/ChartAmountPie.vue";
import ChartAmountLine from "./board/ChartAmountLine.vue";
import ChartSowBar from "./board/ChartSowBar.vue";
import ChartSales from "./board/ChartSales.vue";
import YingShou from "./board/YingShou.vue";
import WorkItems from "./board/WorkItems.vue";
import ImportantItems from "./board/ImportantItems.vue";
import ChartCostPie from "./board/ChartCostPie.vue";
import ChartCostLine from "./board/ChartCostLine.vue";
import IndicatorItem from "./board/IndicatorItem.vue";
import IndicatorOneChart from "./board/IndicatorOneChart.vue";

// 网络请求
import {
  getInventoryAndProduct,
  getInventoryLines,
  getProductionCondition,
  getYingFu,
  getCostData,
  getTheSales,
  getWorkPlans,
} from "../../utils/chenApi";

export default {
  name: "Production",
  data() {
    return {
      inventoryPieData: [],
      amountPieData: [
        {
          farmId: 1,
          id: 1,
          month: 10,
          rate: 1,
          stockName: "总存栏",
          stockQuantity: 1000,
          stockType: "total_stock",
          subareaId: 9,
          year: 2021,
        },
        {
          farmId: 1,
          id: 2,
          month: 10,
          rate: 0.01,
          stockName: "母猪存栏",
          stockQuantity: 10,
          stockType: "sow_stock",
          subareaId: 9,
          year: 2021,
        },
        {
          farmId: 1,
          id: 3,
          month: 10,
          rate: 0.09,
          stockName: "公猪存栏",
          stockQuantity: 90,
          stockType: "boar_stock",
          subareaId: 9,
          year: 2021,
        },
        {
          farmId: 1,
          id: 4,
          month: 10,
          rate: 0.1,
          stockName: "哺乳仔猪存栏",
          stockQuantity: 100,
          stockType: "grice_stock",
          subareaId: 9,
          year: 2021,
        },
        {
          farmId: 1,
          id: 5,
          month: 10,
          rate: 0.1,
          stockName: "保育猪存栏",
          stockQuantity: 100,
          stockType: "piglet_stock",
          subareaId: 9,
          year: 2021,
        },
        {
          farmId: 1,
          id: 6,
          month: 10,
          rate: 0.1,
          stockName: "育肥猪存栏",
          stockQuantity: 100,
          stockType: "fatpig_stock",
          subareaId: 9,
          year: 2021,
        },
      ],
      amountLineData: {
        boarStock: [],
        fatpigStock: [],
        griceStock: [],
        month: [],
        pigletStock: [],
        sowStock: [],
      },
      pickerOptions: {
        // 快捷选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      getSalesDates: [], // 获取销售分析的时间
      weekSales: 1545252,
      weekSalesChange: 10,
      weekSalesVolume: 1000,
      weekSalesVolumeChange: -10,
      salesChartData: {
        // 销售图的数据
        quantitys: [46, 45, 100],
        sellDates: ["10-20周三", "10-21周四", "10-22周五"],
      },
      yingfuData: [],
      historyData: [
        {
          id: 1,
          date: "7日12日下午",
          content: "1000头仔猪进入厂区",
          person: "李海涛",
        },
        {
          id: 2,
          date: "7日12日下午",
          content: "1000头仔猪进入厂区",
          person: "李海涛",
        },
        {
          id: 3,
          date: "7日12日下午",
          content: "1000头仔猪进入厂区",
          person: "李海涛",
        },
        {
          id: 4,
          date: "7日12日下午",
          content: "1000头仔猪进入厂区",
          person: "李海涛",
        },
        {
          id: 5,
          date: "7日12日下午",
          content: "1000头仔猪进入厂区",
          person: "李海涛",
        },
      ],
      ifWorkInfos: false, // 工作看板点击后出现的工作任务
      importantData: [],
      costTitles: ["总成本", "基础猪群", "保育猪群", "育肥猪群", "后备猪群"], // 成本分析 - 被选中的名字
      costIndex: 0, // 成本分析 - 名字数组的 index
      costPieData: {},
      costLineData: [],
      indicatorsVisible: false, // 是否显示股票图
      indicatorsData: [
        {
          id: 1,
          title: "窝均产仔数",
          subtitle: "母猪每一胎生产的仔猪数量",
          littleTitle:
            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
          titleNum: "23",
          subtitleNum: "+1",
          ifPositive: true,
        },
        {
          id: 2,
          title: "产房存活率",
          subtitle: "每一窝仔猪断奶前平均存活率",
          littleTitle:
            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
          titleNum: "92.5%",
          subtitleNum: "+0.75%",
          ifPositive: true,
        },
        {
          id: 3,
          title: "保育存活率",
          subtitle: "保育阶段的猪只存活率",
          littleTitle:
            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
          titleNum: "97.3%",
          subtitleNum: "-0.43%",
          ifPositive: false,
        },
        {
          id: 4,
          title: "年提供出栏猪数",
          subtitle: "每年可以提供出栏猪",
          littleTitle:
            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
          titleNum: "214525",
          subtitleNum: "+13.2%",
          ifPositive: true,
        },
        {
          id: 5,
          title: "保育存活率",
          subtitle: "保育阶段的猪只存活率",
          littleTitle:
            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
          titleNum: "97.3%",
          subtitleNum: "-0.43%",
          ifPositive: false,
        },
        {
          id: 6,
          title: "窝均产仔数",
          subtitle: "母猪每一胎生产的仔猪数量",
          littleTitle:
            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
          titleNum: "23",
          subtitleNum: "+1",
          ifPositive: true,
        },
        {
          id: 7,
          title: "保育存活率",
          subtitle: "保育阶段的猪只存活率",
          littleTitle:
            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
          titleNum: "97.3%",
          subtitleNum: "-0.43%",
          ifPositive: false,
        },
      ],
      indicatorsItemVisible: false, // 只要指标的一张图
      indicatorIndex: 0,
      workPlans: {} // 工作看板
    };
  },
  components: {
    ProBoard,
    ChartAmountPie,
    ChartAmountLine,
    ChartSowBar,
    ChartSales,
    YingShou,
    WorkItems,
    ImportantItems,
    ChartCostPie,
    ChartCostLine,
    IndicatorItem,
    IndicatorOneChart,
  },
  mounted() {
    this.initInventoryAndProduct();
    this.initInventoryLines();
    this.initProductionCondition(); // 重要指标 - 百分率
    this.initYingFu(); // 应付排名
    this.initCostData(); // 成本分析
    this.initTheSales(); // 销售分析
    this.initWorkPlans(); // 工作看板
  },
  methods: {
    getWorkInfo(value) {
      // 工作看板的点击事件
      console.log(value);
      this.ifWorkInfos = !this.ifWorkInfos;
    },
    clickIndicators() {
      this.indicatorsVisible = !this.indicatorsVisible;
      console.log(this.indicatorsVisible);
    },
    clickItem(index) {
      // setTimeout(() => {
      //   this.indicatorsVisible = true
      // })
      this.indicatorIndex = index;
      this.indicatorsItemVisible = true;
      console.log(111111111);
    },
    clickBack() {
      this.indicatorsItemVisible = false;
    },
    // 第一列：存栏结构 + 存栏变动
    initInventoryAndProduct() {
      getInventoryAndProduct({}).then((res) => {
        if (res.code === 10000) {
          // this.inventoryLinesData = res.data
          console.log(res.data);
          // this.inventoryPieData = res.data.slice(0, 6)
          this.inventoryPieData = [
            res.data["sow_stock"],
            res.data["boar_stock"],
            res.data["grice_stock"],
            res.data["piglet_stock"],
            res.data["fatpig_stock"],
          ];
        }
      });
    },
    // 存栏情况 - 存栏变动折线图数据请求
    initInventoryLines() {
      getInventoryLines({}).then((res) => {
        if (res.code === 10000) {
          this.amountLineData = res.data;
        } else {
          this.amountLineData = {
            boarStock: [],
            fatpigStock: [],
            griceStock: [],
            month: [],
            pigletStock: [],
            sowStock: [],
          };
        }
      });
    },
    // 重要指标 - 百分率
    initProductionCondition() {
      getProductionCondition({}).then((res) => {
        this.importantData = [];
        if (res.code === 10000) {
          const items = [
            "grice_rate",
            "piglet_rate",
            "fatpig_rate",
            "break_rate",
            "breed_rate",
            "psy",
          ];
          items.forEach((item) => {
            let itemNum =
              (parseFloat(res.data[item].stockQuantity) * 100).toFixed(2) + "%";
            if (item === "psy") {
              itemNum = res.data[item].stockQuantity;
            }
            this.importantData.push({
              id: res.data[item].id,
              name: res.data[item].stockName,
              num: itemNum,
            });
          });
        }
      });
    },
    // 应付排名
    initYingFu() {
      getYingFu({}).then((res) => {
        console.log("应付", res);
        if (res.code === 10000) {
          this.yingfuData = res.data;
        }
      });
    },
    // 成本分析
    initCostData() {
      getCostData({}).then((res) => {
        if (res.code === 10000) {
          this.costLineData = [
            res.data["total"],
            res.data["baseGroup"],
            res.data["pigletGroup"],
            res.data["fattenPig"],
            res.data["replaceGilt"],
          ];
          this.costPieData = this.costLineData[this.costIndex];
        }
      });
    },
    // 成本分析 - 数据改变
    changeCostIndex(value) {
      this.costIndex = value;
      this.costPieData = this.costHisData[value];
    },
    // 销售分析
    initTheSales() {
      getTheSales({
        type: 2,
      }).then((res) => {
        if (res.code === 10000) {
          this.weekSales = res.data.money;
          this.weekSalesChange = res.data.moneyPercent;
          this.weekSalesVolume = res.data.quantity;
          this.weekSalesVolumeChange = res.data.quantityPercent;
          this.salesChartData = {
            moneyList: res.data.moneyList,
            quantityList: res.data.quantityList,
            timeList: res.data.timeList,
          };
        }
      });
    },
    // 工作看板
    initWorkPlans() {
      getWorkPlans({}).then(({code, data}) => {
        if (code === 10000) {
          this.workPlans = data
        }
      });
    },
  },
};
</script>

<style scoped>
.production {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  padding-top: 20px;
}
/* 每一列 */
.production-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.production-side-column {
  width: 25%;
}
.production-mid-column {
  width: 45%;
}
/* 每一列的每一个面板 */
.production-column-item {
  height: 32%;
}
.production-column-item2 {
  height: 66%;
}

/** 重要指标的图 */
.indicators {
  position: absolute;
  background-color: rgb(0, 0, 0);
  color: #fff;
  top: 26px;
  width: 100%;
  height: 290%;
  z-index: 10;
  overflow: auto;
}
/* 标题栏 */
.indicators-title {
  font-weight: 700;
  font-size: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 30px;
}
/* 搜索框 */
.indicators-search {
  height: 34px;
  margin: 30px 8px 0px;
  /* padding-top: 4px; */
  background-color: rgb(56, 55, 55);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.indicators-search-icon {
  margin-top: 2px;
  width: 30px;
  height: 30px;
  background: url("../../assets/Production/u4772.svg") no-repeat;
  background-size: 100% 100%;
}
.indicators-search-input {
  width: calc(96% - 30px);
  font-size: 18px;
  background-color: transparent;
  color: #fff;
  outline: unset;
  border: 0;
}
/** 重要指标图的过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
/** 重要指标图 - 一张图 */
.indicator-one-item {
  text-align: left;
  z-index: 11;
}
/* 返回的三角形 */
.back-triangle {
  width: 0px;
  height: 0px;
  border: 30px solid;
  border-color: transparent rgba(124, 121, 121, 0.5) transparent;
  border-left: 120px;
  float: right;
  margin-top: 20px;
  margin-right: 20px;
}
.indicator-item-title {
  font-size: 25px;
  font-weight: 700;
  margin-top: 30px;
  margin-left: 20px;
  text-align: left;
  display: inline-block;
}
.num-common {
  font-size: 14px;
  display: inline-block;
  margin-left: 20px;
  position: relative;
  bottom: 4px;
}
/* 红色 */
.positive {
  color: red;
}
/* 绿色 */
.negative {
  color: green;
}
.indicator-item-subtitle {
  margin: 20px 30px 20px 20px;
  font-size: 18px;
}

/* 销售分析 */
.sales {
  position: relative;
}
.sales-condition {
  margin-top: 15px;
  position: absolute;
  right: 4px;
  z-index: 10;
}
.sales-content {
  padding-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  color: #fff;
}
.sales-left {
  width: 23%;
  line-height: 25px;
  padding-top: 30px;
}
.sales-left > .up {
  margin-bottom: 10px;
}
.sales-left > .up > label,
.sales-left > .down > label {
  display: block;
  text-align: center;
  font-size: 13px;
}
.sales-left > .up > span,
.sales-left > .down > span {
  display: block;
  text-align: center;
  font-size: 16px;
}
.sales-left > .up > .sales-change,
.sales-left > .down > .sales-change {
  display: flex;
  justify-content: space-around;
  font-size: 13px;
}
/* 三角形 */
.triangle-change {
  display: inline-block;
  /* width: 4px; */
  height: 4px;
  border-style: solid;
  border-width: 4px;
  margin-right: 10px;
}
.triangle-up {
  border-color: transparent transparent rgb(238, 16, 16) transparent;
}
.triangle-down {
  border-color: rgb(12, 202, 12) transparent transparent transparent;
  position: relative;
  top: 4px;
}
.color-up {
  color: rgb(238, 16, 16);
}
.color-down {
  color: rgb(12, 202, 12);
}
/* 销售情况右侧 */
.sales-right {
  width: 77%;
  /* border-left: 1px solid rgba(228, 228, 228, 1); */
  /* height: 200px; */
  /* background-color: #fff; */
}

/* 工作看板 */
.work-infos {
  width: 800px;
  height: 470px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: rgb(3, 16, 50);
}
.kuang {
  width: 100%;
  height: 100%;
  background: url("../../assets/BioSafety/kuang.png") no-repeat;
  background-size: contain;
}
.work-info-title {
  color: rgb(87, 221, 255);
  font-weight: bold;
  font-size: 18px;
  margin-top: 5px;
}
.work-info-wrap {
  width: 86%;
  height: 77%;
  background-color: rgb(4, 5, 26);
  margin: 20px auto;
  padding-top: 2.5%;
}
.work-info-content {
  border: 2px solid rgb(51, 153, 153);
  width: 95%;
  height: 95%;
  margin: auto;
}
.work-info-content-top {
  display: flex;
  justify-content: space-around;
}
/* 工作任务 —— 历史工作任务 */
.work-info-content-history {
  display: inline-block;
  margin-top: 10px;
  width: 60%;
}
.history-title {
  color: rgb(87, 221, 255);
  font-size: 14px;
}
.history-content {
  background-color: rgb(33, 41, 58);
  margin: 5px 10px;
  height: 100px;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.history-content-item {
  display: flex;
  justify-content: space-between;
  color: rgb(87, 221, 255);
}
.history-content-item:hover {
  background-color: rgb(25, 91, 104);
  cursor: pointer;
}
.history-content-item-data {
  margin: 5px 10px;
}

/* 工作任务 —— 发布任务 */
.work-info-content-condition {
  display: inline-block;
  margin-top: 10px;
  width: 40%;
}
.condition-content {
  width: 100%;
  height: 100px;
  margin: 5px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 10px;
}
.condition-content-item {
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 30px;
  color: rgb(87, 221, 255);
}

/* 工作任务 —— 内容 */
.work-info-content-main {
}

.main-content {
  background-color: rgb(15, 18, 38);
  margin: 10px;
  height: 130px;
  color: #fff;
  padding: 10px;
  text-align: left;
  text-indent: 2em;
}
</style>